Выпадающее меню со временем стало неотъемлемой частью многоструктурированных сайтов, и JavaScript выпадающее меню теперь неактуально. С приходом Web 2.0, меню создается с помощью XHTML и CSS. Это позволяет сделать навигацию сайта кроссбраузерной, независимой от JavaScript, и более четкой, оперативной.
1. Создание структуры выпадающего меню на CSS
Первым этапом в создании меню является построение его структуры. Лучше всего использовать маркированный список, ведь он позволяет реализовать понятное и грамотно структурированное меню.
<ul id="nav">
<li>
<a href="#null">О компании</a>
<ul>
<li><a href="#null">Вакансии</a></li>
<li><a href="#null">Пресс-центр</a></li>
<li><a href="#null">История</a></li>
</ul>
</li>
<li>
<a href="#null">Блог</a>
<ul>
<li><a href="#null">Маркетинг</a></li>
<li><a href="#null">Реклама</a></li>
<li><a href="#null">Мотивация</a></li>
</ul>
</li>
<li>
<a href="#null">Контакты</a>
<ul>
<li><a href="#null">Написать письмо</a></li>
<li><a href="#null">Карта проезда</a></li>
</ul>
</li>
</ul>
2. Прописываем стили CSS и :hover
Весь процесс самого выпадения меню реализуется с помощью любимого "hover" селектора . То есть при наведении на содержимое тега "li" становится виден его дочерний элемент, в нашем случае дочерним элементом является еще один список.
<style type="text/css">
body {
font-family: Arial;
font-size: 13px;
}
a {
text-decoration: none;
color: #000000;
}
#nav li {
list-style-type: none;
margin: 5px;
padding: 3px;
border: 1px solid #999999;
width: 200px;
}
#nav {
padding: 0px;
margin: 0px;
width: 250px;
}
body ul li ul {
display: none;
}
body ul li:hover ul {
padding-top: 0px;
margin-top: 0px;
display: block;
position: absolute;
margin-left: 164px;
margin-top: -24px;
}
#nav li:hover {
background-color: #999999;
border: 1px solid #000000;
}
</style>
3. JavaScript обработчик меню для браузера Internet Explorer 6
В данный момент выпадающее меню не полностью реализуется только с помощью XHTML и CSS, из-за не поддержки IE 6 "li:hover". Ниже приведена функция смены класса элемента, которая автоматически запускается после загрузки страницы и устанавливает события на элементах меню.
<!--[if lte IE 6]>
<script type="text/javascript">
startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("nav");
for (i = 0; i < navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onmouseover = function() { // Функция замены css класса
this.className += " over";
}
node.onmouseout = function() { // Функция замены css класса
this.className = this.className.replace(" over", "");
}
}
}
}
}
window.onload = startList;
</script>
<style type="text/css">
.over ul {
display: block;
}
</style>
<![endif]-->
