[Menu] Menu obrazkowe

Sporo osób pytało mnie, jak zrobić menu obrazkowe. No cóż... Obiecałam opublikować taką instrukcję i oto i ona. Bardzo bym prosiła o skupienie i uważne czytanie. Nie jestem specem od tłumaczenia i zawsze robię to dość chaotycznie, ale postaram się jak najlepiej potrafię ;p

Instrukcja, którą zaprezentuję, będzie bazowała na obecnym głównym DAnayi. Sądzę, że nie powinno być większych problemów. Dla wszystkich tych, którzy chcą pogłębić wiedzę, polecam artykuł: Poradnik Webmastera

Od czego zaczniemy? Tradycyjnie od uruchomienia ramki HTML/JavaScript. A teraz to, co powinniśmy wkleić.

<div class="ikony">
<a href="Twój link" target="_blank" title=" Facebook "><img alt=" Facebook" src="twoj link" /></a>
</div>

Teraz wszystko objaśniamy. 

<div class="ikony">  - nadajemy naszemu menu imię. W tym wypadku nazwałam je "ikony". Wy możecie nazwę zmieniać i tworzyć tyle obrazkowy dodatków, ile dusza zapragnie. 

title=" Facebook">    - nazwa ta będzie się wyświetlać po najechaniu myszką na ikonę "Facebook". Dobry sposób na przedstawienie e-maila. Po najechaniu myszką na kopertę, wyświetli się e-mail :) 

 Pamiętajcie, by w tym miejscu wstawić własną nazwę!

target="_blank"   - ten zapis spowoduje, że strona otworzy się w nowej karcie. Jeśli jednak tego nie chcemy, wystarczy zapis usunąć.
href="Twój link"  - w miejsce "Twój link" wstaw swój własny link.
<img src="Twój obrazek" />  - w miejsce "Twój obrazek" wstawiamy link do obrazka.
 alt=" Facebook"  - opis alternatywny. Jeśli stanie się tak, że z jakiegoś powodu obrazek w menu się nie załaduje, opis alternatywny zastąpi jego miejsce. Wyglądać to będzie następująco:

Tym oto sposobem mamy stworzony kod, który wklejamy do ramki HTML/JavaScript. Wiem, że już o tym pisałam, ale czasem lepiej napisać coś dwa razy :)

Teraz CSS, czyli to, co robaczki lubią najbardziej.

.ikony {

display:inline-block;   /*jeśli chcemy, żeby nasze menu było w jednej linii, 'block' - ułożenie jeden pod drugim*/

width:200px; /*szerokość menu, zmniejszając, możemy doprowadzić do ułożenia jedno pod drugim*/

position:relative;

left:0px; /*odległość od lewej*/

top:0px; /*odległość od góry*/

z-index:10;  /*tu decydujemy, jak bardzo "na wierzchu" ma być nasze menu, czy ma się pod czymś chować, czy też nie*/

}

Teraz decydujemy o odległości pomiędzy naszymi obrazkami.

.ikony img {margin:5px;}

Możemy również dodać jakieś fajne efekty po najechaniu myszką. Np:

.ikony img:hover{
-moz-transform:  rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform:  rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

 Jeśli ktoś z was zauważy jakiś błąd w kodzie, proszę śmiało pisać. Cały czas się uczę i popełniam sporo błędów :D Mam jednak nadzieję, że wszystko będzie jako tako działać.

Przykład dla trzech obrazków:

<div class="ikony">
<a href="Twój link1" target="_blank" title=" Facebook "><img src="Twój obrazek1" /> alt=" Facebook"</a>
<a href="Twój link2" target="_blank" title=" dArt "><img src="Twój obrazek2" /> alt=" dArt"</a>
<a href=" "  title=" anaya.motum@gmail.com "><img src="Twój obrazek3" /> alt=" e-mail"</a>
</div>

Pozdrawiam! :)

Przypominam też, że jeżeli korzystasz z instrukcji zawartych na Zatraconych Instrukcjach, umieść odpowiednią adnotację na blogu / pod szablonem. Na ZI publikowane są i będą jedynie instrukcje w oparciu o nasze szablony.