В этой статье я расскажу вам как сделать выпадающее меню на CSS . Преимущества такого меню думаю очевидно. Самое главное из них – это то, что такое меню будет работать при выключенном Java Script в браузере. Будут рассмотрены 2 идентичных примера меню, первое – горизонтальное меню, второе – вертикальное меню. Принцип действия у них один и тот же.
Начнем с горизонтального меню, оно имеет следующий HTML код:
<ul id="cssmenu"> <li><a href="#">Горизонтальное</a> <ul> <li><a href="#">Ссылка 1</a> </li> <li><a href="#">Ссылка 2</a> </li> </ul> </li> <li><a href="#">CSS</a> <ul> <li><a href="#">Ссылка 1</a> </li> <li><a href="#">Ссылка 2</a> </li> <li><a href="#">Ссылка 3</a> </li> <li><a href="#">Ссылка 4</a> </li> <li><a href="#">Ссылка 5</a> </li> </ul> </li> <li><a href="#">Меню</a> <ul> <li><a href="#">Ссылка 1</a> </li> <li><a href="#">Ссылка 2</a> </li> </ul> </li> </ul>
Принцип думаю ясен и вы сообразите как вставить свои пункты меню. Теперь напишем CSS код для этого еще безобразного меню:
/* CSS Document */ ul#cssmenu { width:350px; margin: 0; border: 0 none; padding: 0; list-style: none; background: #003366; height: 30px; font: bold 12px/28px Verdana, Arial; border-left:#003366 1px solid; } ul#cssmenu li { margin: 0; border: 0 none; padding: 0; float: left; display: inline; list-style: none; position: relative; height: 30px; } ul#cssmenu ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; display: none; position: absolute; top: 30px; left: 0; } ul#cssmenu ul:after { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#cssmenu ul li { width: 150px; float: left; display: block !important; display: inline; } /* Main Menu */ ul#cssmenu a { border: 0px; padding: 0 10px; float: none !important; float: left; display: block; background: #003366; color: #FFFFFF; font: bold 12px/28px Verdana, Arial; text-decoration: none; height: auto !important; height: 1%; } /* Main Menu Hover */ ul#cssmenu a:hover, ul#cssmenu li:hover a, ul#cssmenu li.iehover a { background: #FFFFFF; color:#003366; border-top:#003366 1px solid; } /* Second Menu */ ul#cssmenu li:hover li a, ul#cssmenu li.iehover li a { border-top: 2px solid #FFFFFF; float: none; background: #003366; color: #FFFFFF; } /* Second Menu Hover */ ul#cssmenu li:hover li a:hover, ul#cssmenu li:hover li:hover a, ul#cssmenu li.iehover li a:hover, ul#cssmenu li.iehover li.iehover a { border-top: 2px solid #FFFFFF; background: #FFFFFF; color:#003366; border:#003366 1px solid; } ul#cssmenu ul ul { display: none; position: absolute; top: 0; left: 170px; } ul#cssmenu li:hover ul ul, ul#cssmenu li.iehover ul ul { display: none; } ul#cssmenu li:hover ul, ul#cssmenu ul li:hover ul, ul#cssmenu li.iehover ul, ul#cssmenu ul li.iehover ul { display: block; }
Все!?!? Ан нет. IE никак не хочет отображать такое меню как нам надо, поэтому напишем небольшой JavaScript для IE:
// JavaScript Document function cssmenuhover() { if(!document.getElementById("cssmenu")) return; var lis = document.getElementById("cssmenu").getElementsByTagName("LI"); for (var i=0;i<lis.length;i++) { lis[i].onmouseover=function(){this.className+=" iehover";} lis[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\\b"), "");} } } if (window.attachEvent) window.attachEvent("onload", cssmenuhover);
Вуаля. Теперь наше меню кроссбраузерное и корректно работает в IE5.5+, FF1+, Opera8+. Теперь посмотрим как делается вертикальное меню.
Вертикальное CSS меню
HTML код:
<ul id="navmenu-v"> <li><a href="#">Вертикальное</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul></li> <li><a href="#">CSS</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> <li><a href="#">Ссылка 3</a></li> <li><a href="#">Ссылка 4</a></li> <li><a href="#">Ссылка 5</a></li> </ul> </li> <li><a href="#">Меню</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul></li> </ul>
И CSS код:
/* CSS Document */ ul#navmenu-v, ul#navmenu-v li, ul#navmenu-v ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; } ul#navmenu-v:after { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#navmenu-v li { float: left; display: block !important; display: inline; position: relative; border:#003366 1px solid; } ul#navmenu-v li ul li { border:none; border-bottom:#FFFFFF 2px solid; } /* Root Menu */ ul#navmenu-v a { padding: 0 6px; display: block; background: #003366; color: #FFFFFF; font: bold 12px/28px Verdana, Arial; text-decoration: none; height: auto !important; height: 1%; } ul#navmenu-v a:hover, ul#navmenu-v li:hover a, ul#navmenu-v li.iehover a { background: #FFFFFF; color: #000000; } /* 2nd Menu */ ul#navmenu-v li:hover li a, ul#navmenu-v li.iehover li a { background: #003366; color: #FFFFFF; border:#003366 1px solid; } ul#navmenu-v li:hover li a:hover, ul#navmenu-v li:hover li:hover a, ul#navmenu-v li.iehover li a:hover, ul#navmenu-v li.iehover li.iehover a { background: #FFFFFF; color: #003366; border:#003366 1px solid; } ul#navmenu-v ul, ul#navmenu-v ul ul, ul#navmenu-v ul ul ul { display: none; position: absolute; top: 0; left: 161px; } ul#navmenu-v li:hover ul ul, ul#navmenu-v li:hover ul ul ul, ul#navmenu-v li.iehover ul ul, ul#navmenu-v li.iehover ul ul ul { display: none; } ul#navmenu-v li:hover ul, ul#navmenu-v ul li:hover ul, ul#navmenu-v ul ul li:hover ul, ul#navmenu-v li.iehover ul, ul#navmenu-v ul li.iehover ul, ul#navmenu-v ul ul li.iehover ul { display: block; }
Ну и небольшой JS код для корректности отображения в IE:
navHover = function() { var lis = document.getElementById("navmenu-v").getElementsByTagName("LI"); for (var i=0; i<lis.length; i++) { lis[i].onmouseover=function() { this.className+=" iehover"; } lis[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", navHover);
Вот собственно и все, смотрим что получается.
Спасибо Wincert-у: http://cssor.ru/css/polezno-interesnoe/cssmenu
Скачать >>
CSS горизонтального меню, JS горизонтального меню | CSS вертикального меню, JS вертикального меню
Если лень разбираться во всем этом, есть бесплатный сайт, на котором можно создать себе меню и интегрировать уже готовый код к себе на сайт: http://purecssmenu.com/
