14# Menu z ikonami

Cześć!
Dzisiejszą instrukcję sponsoruje dla MRUwiska Karol, z którą ją opracowałam. Pewnie znacie ją jako Tyler (choć podobno nie przepada za tym nickiem) z Panda Graphics i z Graphical Thoughts.
Bardzo dziękuję jej za współpracę i liczę na to, że to nie ostatni raz kiedy się jej podjęłyśmy. :)
Bazę kodu oraz pierwszą animację opracowała właśnie ona. Ja ją opisałam i dorzuciłam kilka gotowców na jej podstawie od siebie.
Mam nadzieję, że efekt Wam się spodoba. :)
Menu prezentuje się następująco:


Krok I - utworzenie gadżetu

Utworzymy je w gadżecie HTML/JavaScript. Aby dodać go na bloga, musimy przejść do jego profilu, by w następnym kroku kliknąć układ i w wybranym miejscu, w którym menu ma się znajdować: dodaj gadżet. Wybieramy z listy HTML/JavaScript, którego podgląd znajduje się poniżej.



Krok II - HTML


By osiągnąć efekt widoczny na początku posta do gadżetu należy wkleić następujący kod:
<div class='menu'>
<a href=‘adres odnośnika’>
<div class='text'>
Strona główna
<i>Home page</i>
</div>
<div class='picture'>
<img src='http://i.imgur.com/7cEX1SI.png'/>
</div>
</a>
</div>

<div class='menu'>
<a href=‘adres odnośnika’>
<div class='text'>
Lista blogów
<i>List of blogs</i>
</div>
<div class='picture'>
<img src='http://i.imgur.com/iRGNKLW.png'/>
</div>
</a>
</div>

<div class='menu'>
<a href=‘adres odnośnika’>
<div class='text'>
Galeria
<i>Gallery</i>
</div>
<div class='picture'>
<img src='http://i.imgur.com/H3xuTB6.png'/>
</div>
</a>
</div>

<div class='menu'>
<a href=‘adres odnośnika’>
<div class='text'>
Kontakt
<i>Contact</i>
</div>
<div class='picture'>
<img src='http://i.imgur.com/a8qO5jb.png'/>
</div>
</a>
</div>
Jeśli chcecie uzyskać efekt identyczny powyższy kod musicie uzupełnić jedynie o adresy odnośników. W tym celu zastąpcie: adres odnośnika odpowiednim linkiem z Waszego bloga.

Osoby, które zdecydują się na edytowanie pod swoje indywidualne potrzeby kodu mają odrobinę bardziej skomplikowane zadanie.
Kod składa się z kilku sekcji, w których każda z nich odpowiada kolejnym odnośnikom. Linków możecie wstawić dowolną ilość uzupełniając w każdym przypadku poniższy kod:

<div class='menu'><a href=‘adres odnośnika’>
<div class='text'>
Tytuł karty<i>Opis karty</i></div><div class='picture'>
<img src='adres obrazka'/></div></a></div>

adres odnośnika - tutaj wklej link pod który skieruje nas karta
Tytuł karty - tu napisz tytuł swojej karty (u nas to na przykład "STRONA GŁÓWNA")
Opis karty - opis karty (w naszym przypadku to pochylone angielskie nazwy kart)
adres obrazka - link przekierowujący na bezpośredni adres do ikony (prosimy o umieszczanie w tym miejscu kwadratowych ikonek-  najlepiej w rozmiarze 128x128px. Darmowe ikony możecie znaleźć np. na IconFinder)

Z kolejnymi linkami, które chcemy umieścić w naszym menu postępujemy analogicznie wklejając kolejne kody bezpośrednio pod poprzednimi.

Krok III  - CSS

Skoro już utworzyliśmy nasz gadżet i uzupełniliśmy HTML, możemy przejść do naszej magii. A interesujący nas efekt uzyskamy poprzez dodanie odpowiedniego kodu CSS.
By go dodać w profilu naszego bloga wchodzimy w Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS.

Kod nie należy do najtrudniejszych, ale może wymagać zabawy z pozycjonowaniem poszczególnych elementów. :) Mimo wszystko mam nadzieję, że nie sprawi Wam większych problemów.

By osiągnać interesujący nas efekt korzystamy z poniższego kodu:

/*ogólne*/

.menu {
overflow:hidden;
font-family: Arial; /*ustawiamy font*/
cursor: pointer; /*zmiana kursora*/
display: inline-block; /*ustawiamy wszystkie linki w poziomie*/
background: #eee; /*tło każdej z kart*/
width:128px; /*długość kart*/
padding: 40px 0px; /*odległość tekstu i obrazka od ramek - dzięki nim ustalimy wysokość*/
text-align:center; /*wyśrodkowanie tekstu*/
transition: 1s; /*czas trwania animacji*/
}

/* tytuł */

.text a {
color: #4a8f0d; /*kolor czcionki*/
font-size: 13px;  /*wielkość czcionki*/
text-transform: uppercase; /*zmiana wszystkich liter na duże*/
transition: 1s; /*czas trwania animacji*/
}

/*opis*/

.menu i {
display: block; /*dzięki temu nasz pochylony opis będzie wyświetlał się pod tytułem*/
font-size: 11px; /*rozmiar czcionki*/
color: black; /*kolor*/
text-transform: lowercase; /*zmiana wszystkich liter na małe*/
}
/*ikona*/

.menu .picture {
padding: 20px 0px; /*odległość obrazka od krawędzi*/
opacity:1; /*widoczność*/
margin-top:-70px; /*podniesienie pudełka z obrazkiem w górę - tak aby przykrył nasz tekst*/
width:128px; /*szerokość karty z ikonką*/
transform:scale(0); /*zmniejszamy obrazek do 0*/
transition: 1s; /*czas trwania animacji*/
}

.menu .picture img {
max-width:60px; /*szerokość ikony*/
margin:auto;
}

/*animacja - poniżej nic nie zmieniamy*/

.menu:hover .picture {
transform:scale(1); /*po najechaniu kursorem na kartę obrazek powiększy się*/
}

.menu:hover .text {
transform:scale(0); /*po najechaniu kursorem na kartę tekst się zmniejszy*/
}


GOTOWCE

Aby skorzystać z gotowca powtórz krok pierwszy oraz drugi, a w arkuszu CSS wklej poniższe kody.

KOD:



KOD:



KOD:
To wszystko na dziś ode mnie. :) Mam nadzieję, że instrukcja przypadła Wam do gustu. Nie zapomnijcie o skomentowaniu notki (to mnie motywuje do pracy) i zapoznaniu się z zasadami przed pobraniem (to też motywujące xD).No i w tym miejscu możecie Tyler pozdrowić i nakrzyczeć na nią, żeby się w końcu ruszyła i ogarnęła Graphical Thoughts, bo biedaczka sama nie wie jak się za to zabrać (może też potrzebuje motywacji? :D).

22 komentarze:

  1. GENIALNE!
    Na pewno wykorzystam, jesteście wielkie <3
    Idealne do takich nowoczesnych, minimalistycznych blogów, akurat mam takie zamówionko na fotograficzny, kody nadadzą się idealnie :*
    Pozdrawiam i lecę przeglądać resztę instrukcji <3

    OdpowiedzUsuń
    Odpowiedzi
    1. Leć, leć, bo jest co oglądać! :D
      Bardzo dziękujemy za komentarz, Dec. <33

      Usuń
  2. Awww!!!! Na bank wykorzystam.. kiedyś.. xd. Instrukcja GENIALNA!!!!

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękujemy! :D
      No i oczywiście nie mogę doczekać się efektów tego wykorzystania.

      Usuń
  3. Genialne *.*
    Nadal nie mogę zrozumieć, jak wy możecie stworzyć coś tak... niesamowitego! I choć aktualnie mi się to nie przyda, to jestem pod wrażeniem.

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękujemy za komentarz! :)
      To nie takie trudne jak się wydaje. ^^ Wystarczy trochę wiedzy i kreatywności by stworzyć wszystko. ;D

      Usuń
  4. Jesteście genialne! Zastanawiam sie jak długo siedzicie w kodowaniu, by samym tak ogarniać i pisać takie rzeczy!

    OdpowiedzUsuń
    Odpowiedzi
    1. Karol siedzi w kodach od 2012, ja od 2013... Także kilka, ładnych lat. :)
      Bardzo dziękujemy za komentarz. <3

      Usuń
  5. Ale fajne <333 Po prostu się zakochałam <3 jest świetne, na pewno kiedyś wykorzystam <333 :3

    OdpowiedzUsuń
    Odpowiedzi
    1. I tu również nie mogę się doczekać efektów tego wykorzystywania. <3
      dziękujemy!

      Usuń
  6. Wow efekt jest zaskakujący. ;D W przyszłości na pewno z tej instrukcji skorzystam. :3
    Pozdrawiam!

    OdpowiedzUsuń
  7. czy ja już mówiłam, że podziwiam cię za te kody, pisanie ich i te sprawy? dam ci kiedyś nagrodę, jak już mnie będzie stać na coś więcej niż guma do żucia z biedronki, zobaczysz ♥

    OdpowiedzUsuń
    Odpowiedzi
    1. Przydałby się nam nowy Pandowóz, jeśli mogę zasugerować nagrodę...
      Dzięki, Klucha. <3

      Usuń
  8. Kod naprawdę przydatny i pewnie wykorzystam go nie raz ❤ Naprawdę świetna instrukcja 😀😀😀

    OdpowiedzUsuń
  9. Hej!Instrukcja świetna,ostatni efekt animacji najbardziej mi się podoba ^^
    Możliwe,że skorzystam z kodów o ile mi wyjdzie:D Pozdrawiam :)

    OdpowiedzUsuń
  10. Instrukcja genialna! Biorę ją do siebie do głównego, tylko mam pytanie, czy jeśli ikonka będzie mieć 100x100px to jak mam ją przesunąć, aby była cała widoczna? Znaczy, w którym selektorze, o?

    OdpowiedzUsuń

statystyka

Archiwum bloga

Obserwatorzy