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:

Strona główna Home page

Lista blogów List of blogs

Galeria Gallery

Kontakt Contact

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.

Strona główna Home page

Lista blogów List of blogs

Galeria Gallery

Kontakt Contact

KOD:
.menu { font-family: Times; cursor: pointer; display:inline-block; background:#104d62; width:128px; padding:40px 0px 0px 0px; margin:0px 2px; text-align:center; overflow:hidden; transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s; } .menu a { color: white; text-decoration: none; } .text { font-size: 11px; text-transform: uppercase; transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s; } .menu i { display:block; font-size:9px; color: 1f92b9; letter-spacing: 3px; text-transform: lowercase; } .menu .picture { padding:30px 0px; transform: translateY(-100px); margin-top:-70px; width:128px; text-align:center; transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s; } .menu .picture4 img { max-width:50px; margin:auto; } .menu:hover .picture4 { transform: translateY(-10px); } .menu:hover .text4 { transform: translateY(30px); } .menu:hover { background: #92bbc9; transition: 1s; }

Strona główna Home page

Lista blogów List of blogs

Galeria Gallery

Kontakt Contact

KOD:
.menu { font-family: Tahoma; cursor: pointer; display:inline-block; background:#f69226; border-bottom: 4px solid #203467; width:128px; padding:40px 0px 0px 0px; margin:0px 2px; text-align:center; overflow:hidden; transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s; } .menu a { color: #203467; text-decoration: none; } .text { font-size: 11px; text-transform: uppercase; transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s; } .menu i { display:block; font-size:9px; color: white; text-transform: lowercase; } .menu .picture { padding:20px 0px; opacity:0; margin-top:-70px; width:128px; text-align:center; transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s; } .menu .picture img { max-width:60px; margin:auto; } .menu:hover .picture { opacity: 1; } .menu:hover .text { opacity: 0; } .menu:hover { background: #ffffff; transition: 1s; }

Strona główna Home page

Lista blogów List of blogs

Galeria Gallery

Kontakt Contact

KOD:
.menu { font-family: Tahoma; cursor: pointer; display:inline-block; background:#4e605f; width:128px; padding:40px 0px 0px 0px; margin:0px 2px; text-align:center; overflow:hidden; transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s; } .menu a { color: silver; text-decoration: none; } .text { font-size: 11px; text-transform: uppercase; transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s; } .menu i { display:block; font-size:9px; color: white; text-transform: lowercase; } .menu .picture { padding:20px 0px; transform: translateX(100px); margin-top:-70px; width:128px; text-align:center; transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s; } .menu .picture img { max-width:60px; margin:auto; } .menu:hover .picture { opacity: 1; transform: translateX(0px); } .menu:hover .text { opacity: 0; } .menu:hover { box-shadow: inset 200px 0px 0px 0px #cfcdcb; background: #d6d5d3; transition: 1s; }

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).