[CSS]Menu rozwijane – poziome
This post is 17 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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(https://blog.piotrnalepa.pl/demo/menu/strzalka_bok.gif) no-repeat right center;} #menu li.link_strzalka_dol {background:#7484ad url(https://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.
About the author
