Jako, że nasz poprzedni artykuł na temat rozwijanego menu, z wykorzystaniem CSS ma już ponad rok, postanowiliśmy go nieco zaktualizować, dostosowując go do dzisiejszych standardów, a mianowicie HTML5 i CSS3. W czasach obecnych, prawidłowo wykonana nawigacja, znacząco poprawia komfort pracy i użytkowania strony www. Kiedy internauta bez problemów odnajdzie interesujące go informacje, są większe szanse, że do nas wróci. Tym razem postaramy się o bardziej eleganckie menu, które posiadać będzie stylistycznie dopasowane, zaokrąglone rogi (przy rozwijaniu), oraz delikatne przejścia, dla koloru odnośników i tła, po najechaniu na każdą z pozycji. Na końcu artykułu znajdziecie DEMO oraz przykład do pobrania.
Na początek przygotujmy sobie nowy dokument HTML, który zawierać będzie listę, z wybranymi odnośnikami. W naszym przypadku będzie wyglądać to w taki sposób:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Rozwijane menu w CSS3</title> <link href="arkusz.css" rel="stylesheet"> </head> <body> <div id="kontener"> <ul id="menu"> <li><a href="#" title="">Home</a></li> <li><a href="http://kortas.info">Portfolio</a> <ul> <li><a href="#" title="">Strony www</a></li> </ul> </li> <li><a href="http://webroad.pl" title="">WEBroad.pl</a></li> <li><a href="#" title="">Informacje</a> <ul> <li><a href="#" title="">O mnie</a></li> <li><a href="#" title="">Aktualności</a></li> </ul> </li> <li><a href="#" title="">Webdesign</a></li> <li><a href="#" title="">Kontakt</a> <ul> <li><a href="#" title="">Formularz kontaktowy</a></li> <li><a href="#" title="">Pomoc</a></li> </ul> </li> <li><a href="#" title="">Współpraca</a> <ul> <li><a href="#" title="">Wymiana linkiem</a></li> </ul> </li> </ul> </div> </body> </html>
Teraz wystarczy to wszystko odpowiednio sformatować. Kod CSS wpisujemy oczywiście do zewnętrznego arkusza, w tym przypadku o nazwie arkusz.css. Jak widzimy w naszym szkielecie HTML, zaimportowaliśmy go już za pomocą takiej instrukcji:
<link href="arkusz.css" rel="stylesheet">
Sam kod odpowiedzialny za formatowanie jest następujący:
/*PODSTAWOWE USTAWIENIA*/ body {font-family: calibri, tahoma; background: #e6e6e6;} #kontener {width: 960px; margin: 0 auto;} #menu {display: table; padding: 0 10px 0 !important; margin: 0 auto; overflow: hidden; font-size: 14px; background: #242424;} #menu li {list-style-type: none; margin: 0 auto; float: left; } #menu li:hover {background: #404040;} #menu li a {display: block; color: silver; text-decoration: none; padding: 7px 10px 7px;} #menu li a:hover {background: #404040; color: white;} #menu li li a {width: 160px;} #menu li ul {overflow: hidden; display: none; background: #242424;} #menu li:hover ul {position: absolute; padding: 0; display: block; width: 160px;} /*ANIMACJA - tylko CSS3*/ *:hover {-moz-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in;} /*ZAOKRĄGLONE ROGI - tylko CSS3*/ #menu {-moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;} #menu li ul {-moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;}
W ostatnim bloku dodaliśmy instrukcje, dostępne tylko w CSS3 - w starszych przeglądarkach nie wpłyną one na układ menu, jednak będzie ono pozbawione zaokrągleń i animacji.