[CSS]Menu rozwijane – poziome
Dzisiaj zaprezentuję Wam jak zrobić menu poziome rozwijane. Zbudowane tylko i wyłącznie za pomocą kodu CSS.
<div id="menu_zawartosc"> <ul id="menu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li class="link_strzalka_dol"><a href="#">3<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td>< ![endif]--> <ul> <li><a href="#" class="link">31</a></li> <li><a href="#">32</a></li> <li class="link_strzalka_bok"><a href="#">33<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td>< ![endif]--> <ul> <li><a href="#" class="link">34</a></li> <li class="link_strzalka_bok"><a href="#">35<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td>< ![endif]--> <ul> <li><a href="#" class="link">45</a></li> <li class="link_strzalka_bok"><a href="#">46<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td>< ![endif]--> <ul> <li><a href="#" class="link">74</a></li> <li><a href="#">747</a></li> <li class="link_strzalka_bok"><a href="#">78<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td>< ![endif]--> <ul> <li><a href="#" class="link">250</a></li> <li><a href="#">87</a></li> <li><a href="#">76</a></li> <li><a href="#">52</a></li> <li><a href="#">13</a></li> <li><a href="#">68</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> < ![endif]--> </li> <li><a href="#">768</a></li> <li><a href="#">867</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> < ![endif]--> </li> <li><a href="#">97</a></li> <li><a href="#">744444446</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> < ![endif]--> </li> <li><a href="#">255</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> < ![endif]--> </li> <li><a href="#">36</a></li> <li><a href="#">37</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> < ![endif]--> </li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#" class="link">6</a></li> </ul> </div>
Jak widać zastosowałem tutaj prostą budowę menu wraz z hackami pod Internet Explorera, które zapewnią poprawne wyświetlanie menu w tych przeglądarkach.
Kod CSS wygląda następująco dla tego zestawu:
#menu_zawartosc {margin:25px 0 100px 15px; position:relative; width:735px; height:25px; z-index:100;} #menu, #menu ul {padding:0; margin:0; list-style-type: none;} #menu a, #menu a:visited {display:block;width:120px; font-size:11px; color:#fff; height:25px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #000; border-width:1px 0 1px 1px;} #menu li ul li a, #menu li ul li a:visited {border-width:0 1px 1px 1px;} #menu li a.link, #menu li a.link:visited {border-width:1px;} #menu li {float:left; background:#b30000;} #menu li:hover {position:relative;} #menu li:hover > a {background:#dfd7ca; color:#c00;} #menu li ul {display:none;} #menu li:hover > ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent; width:120px;} #menu > li:hover > ul {left:-30px; top:16px;} #menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;} * html #menu li a:hover {position:relative; background:#dfd7ca; color:#c00;} #menu li a:active, #menu li a:focus {background:#dfd7ca; color:#c00;} #menu li.link_strzalka_bok {background:#7484ad url(http://blog.piotrnalepa.pl/demo/menu/strzalka_bok.gif) no-repeat right center;} #menu li.link_strzalka_dol {background:#7484ad url(http://blog.piotrnalepa.pl/demo/menu/strzalka_dol.gif) no-repeat right center;} * html #menu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent;} #menu li a:hover ul ul{visibility:hidden;} #menu li a:hover ul a:hover ul ul{visibility:hidden;} #menu li a:hover ul a:hover ul a:hover ul ul{visibility:hidden;} #menu li a:hover ul a:hover ul a:hover ul a:hover ul ul {visibility:hidden;} #menu li a:hover ul {visibility:visible; left:-30px; top:14px;} #menu li a:hover ul a:hover ul{visibility:visible; top:-11px; left:80px;} #menu li a:hover ul a:hover ul a:hover ul {visibility:visible;} #menu li a:hover ul a:hover ul a:hover ul a:hover ul {visibility:visible;} #menu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {visibility:visible;}
W samym kodzie CSS zastosowałem kilka hacków pod IE, aby zachować poprawność wyświetlania menu.
Demo z tego artykułu można zobaczyć tutaj: MENU ROZWIJANE – CSS.
10 komentarze/y
Napisz komentarz
Komentarze są moderowane. Po akceptacji przez administratora zostaną wyświetlone na stronie.

26/11/2009 o 02:19
Ciekawe rozwiązanie menu. Nie rozumie tylko jednej rzeczy – po co jest, w jaki sposób działa znak większości > w pliki css?
26/11/2009 o 11:36
ten znak odpowiada za nadanie odpowiednich stylów dla potomka danego selektora, czyli tak jak w moim przykładzie kodu menu
#menu li:hover > aoznacza, że każdy element „a” będący potomkiem „#menu li:hover” i tylko te znaczniki „a” a nie jakieś inne znajdujące się w innym miejscu na stronie.
26/11/2009 o 13:23
Teraz mi się rozjaśniło. Muszę się douczyć tych rzeczy na temat dziedziczenia. Dzięki
08/04/2010 o 12:27
Proponuję zmianę padding:10px 30px 30px 30px na margin:10px 30px 30px 30px, ponieważ przy linkowaniu wychodzą problemy
taki mały fix
25/04/2011 o 00:43
Ciekawa konstrukcja. Jednak na przeglądarce CHROME się lekko sypie – ‘nie trzyma koloru’ przy wyborze numerka z menu. Reszta przeglądarek OK. Pozdrawiam
20/06/2011 o 18:07
Hej. Dzięki za udostępnienie fajnego kodu. Widzę że już trochę minęło, ale może nadal tu zaglądasz
pozdrawiam
Ps. kodzik próbuję dopasować pod siebie. Na razie mam mały problem ale mam nadzieję że uda mi się go ominąć bo kodzik na prawdę czyściutko napisany
08/10/2011 o 20:55
przerobiłam sobie kod i wygląda na prawdę pięknie. mam tylko problem z IE. posypało się totalnie. no i cóż, muszę posiedzieć i pogapić się to pewnie zobaczę co źle zrobiłam
26/10/2011 o 11:28
Dzięki! Na prawdę cudowny kod – i da się go łatwo dostosować do własnych potrzeb. I w związku z tym mam pytanie – prośbę. Nie mógłby Pan zaprezentować podobnego kodu dla menu pionowego – takiego żeby można go było wykorzystać w lewym pasku nawigacyjnym z opcjami rozwijanymi w prawo? Próbuję dostosować tu zaprezentowany kod, ale widać za słobo u mnie z CSS.
28/02/2012 o 23:39
Witam , nie wiem jak wam ale mi po wstawieniu tego kodziku wyskakuje cos takiego , sami zobaczcie : http://www.fcbarca1899.pl panel o nazwie :menu .
Prosze o Pomoc
29/02/2012 o 07:11
nie widzę problemu