Ciekawe menu w css

Kombinowałam sobie ostatnio trochę z różnymi menu w css. Myślę, że ten artykuł doczeka się kontynuacji. Przedstawię w nim 2 rodzaje menu (lecz zrobione trochę odmienną techniką). Będą to menu zakładkowe. Na początek wykonamy przykład pierwszy. Potrzebne nam będą 4 pliki (do zakładek normalnych i current) lewa.png prawa.png lewa2.png i prawa2.png. Zapisz je na dysku i umieść dwa pierwsze obrazki w folderze o nazwie obrazki, a dwa następne w folderze o nazwie obrazki2. Zabierzmy się teraz do tworzenia kodu. Najpierw w nowym pliku html w sekcji body wpiszmy kod menu, później zabierzemy się za jego stylowanie.

<ul id="menu">
<li class="current"><a class="current" href="index.html">Strona główna</a></li>
<li><a href="articles.html">Artykuły</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="resources.html">Dodatki</a></li>
<li><a href="contact.html">Kontakt</a></li>
<li><a href="links.html">Linki</a></li>
</ul>

Menu budujemy na podstawie listy wypunktowanej. Nadamy jej identyfikator id="menu". Pierwszy z elementów listy wypunktowanej li oraz pierwszy odnośnik mają nadane klasy current, ponieważ zdefiniujemy specjalny styl dla stron, na których aktualnie przebywamy (tzw. stan current). Zabieramy się definiowania stylu. Na początek należy dodać

body, html { font: bold 12px Tahoma, Verdana, sans-serif; color: #66cbff;}
ul#menu, ul#menu li {
       display: block;
       list-style: none;
       margin: 0;
       padding: 0;
}

Pierwsze definicje to ogólne definicje czcionki dla całego dokumentu. Następnie dla listy wypunktowanej i jej elementów nadajemy wyświetlanie blokowe, zerowe marginesy i ustawiamy list-style: none. Następnie

ul#menu { height: 31px; float: left; width: 852px}
ul#menu li { float: left; background: url(obrazki/lewa.png) no-repeat left top }

Dla listy wypunktowanej ustalamy wysokość (u nas jest to wysokość obrazków 31px) i szerokość. Ustawiamy ponadto opływanie z lewej strony. Dla elementów li też ustawiamy opływanie z lewej strony. Następnie tło na obrazek lewa.png bez powtarzania (no-repeat). Kolejne definicje stylu to

ul#menu a:link, ul#menu a:visited { text-decoration: none; display: block; background: 

url(obrazki/prawa.png) no-repeat right top; padding: 8px 15px 8px 5px; margin-left: 9px; color: #f7941d;}
ul#menu a:hover { color: green }

Definiujemy tu style odnośników. Dla nieużytych i odwiedzonych ustalamy brak dekoracji tekstu (domyślnie odnośniki są podkreślone), wyświetlenie w bloku, tło (prawa.png), padding, lewy margines (9px ponieważ jest to szerokość obrazka lewa.png, a obrazki te nie mogą na siebie nachodzić) oraz kolor tekstu na #f7941d. Określając pseudoklasę hover nadajemy zielony kolor tekstu dla odsyłaczy wskazanych myszką. Pozostaje jeszcze zdefiniować klasę current.

ul#menu a.current { background: url(obrazki2/prawa2.png) no-repeat right top; color: white; 

text-decoration: none; display: block; padding: 8px 15px 8px 5px; margin-left: 9px}
ul#menu li.current { background: url(obrazki2/lewa2.png) no-repeat top left; }

Określamy tło dla odsyłaczy na prawa2.png, kolor tekstu na biały, oczywiście brak dekoracji tekstu, wyświetlenie w bloku, takie same marginesy padding jak poprzednio oraz lewy margines 9px. Natomiast dla elementów li jako tło ustawiamy lewa2.png.

Teraz przejdziemy do drugiego menu przykład2. Jest to nieco inne menu od poprzedniego chociaż wygląda bardzo podobnie. Zależało mi na tym aby po najechaniu myszką zmieniał się obrazek tła odnośnika. Obrazek tła musi być ustalonej wielkości (poprzednio wielkość odnośnika zależała od długości tekstu). Pobierz tym razem dwa obrazki all0.png i all.png oraz zapisz je w jednym folderze o nazwie obrazki. Kod html menu jest taki sam jak w poprzednim przykładzie. Jedynie nie nadajemy klasy current dla elementu li tzn.

<ul id="menu">
<li><a class="current" href="index.html">Strona główna</a></li>
<li><a href="articles.html">Artykuły</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="resources.html">Dodatki</a></li>
<li><a href="contact.html">Kontakt</a></li>
<li><a href="links.html">Linki</a></li>
</ul>

Zabieramy się teraz do tworzenia kodu css.

body, html { font: bold 12px Tahoma, Verdana, sans-serif; color: #66cbff;}
ul#menu { height: 31px; float: left; width: 852px;  }
ul#menu, ul#menu li {
       display: block;
       list-style: none;
       margin: 0;
       padding: 0;
}

Powyższe deklaracje są takie same jak dla poprzedniego przykładu. Następnie dodajemy opływanie float: left dla elementów listy.

ul#menu li { float: left; }

Kolejne deklaracje to

ul#menu a:link, ul#menu a:visited { text-decoration: none; display: block; background: 

url(obrazki/all0.png) no-repeat right top; padding: 8px 0px 8px 0px; color: #f7941d; width: 100px; text-align: 

center}
ul#menu a:hover { color: white; background: url(obrazki/all.png) no-repeat; margin: 0px; width: 100px; text-align: 

center}
ul#menu a.current { background: url(obrazki/all.png) no-repeat; color: white; width: 100px}

Określają one style dla odsyłaczy. Deklaracje są podobne jak w poprzednim przykładzie, jedyne zmiany to określenie szerokości 100px równej wielkości obrazka tła (pamiętajmy, że w tym przykładzie nie mamy już części lewej i prawej odnośnika) oraz wyśrodkowanie tekstu linka (text-align: center). Dla a:hover (czyli po najechaniu myszką) zmieniamy tylko obrazek tła na all.png i kolor tekstu na biały. Podobnie definiujemy klasę current.