Выпадающее меню со временем стало неотъемлемой частью многоструктурированных сайтов, и JavaScript выпадающее меню теперь неактуально. С приходом Web 2.0, меню создается с помощью XHTML и CSS. Это позволяет сделать навигацию сайта кроссбраузерной, независимой от JavaScript, и более четкой, оперативной.
1. Создание структуры выпадающего меню на CSS
Первым этапом в создании меню является построение его структуры. Лучше всего использовать маркированный список, потому что он позволяет сделать меню неограниченной и понятной иерархии.
<ul id="nav">
<li><a href="#null"> Выпадающее меню на css </a>
<ul>
<li><a href="#null">Этап 1</a></li>
<li><a href="#null">Этап 2</a></li>
<li><a href="#null">Этап 3</a></li>
</ul>
</li>
<li><a href="#null"> Выпадающее меню на css для IE 6 </a>
<ul>
<li><a href="#null">Этап 1</a></li>
<li><a href="#null">Этап 2</a></li>
<li><a href="#null">Этап 3</a></li>
</ul>
</li>
<li><a href="#null"> Кроссбраузерное css меню </a>
<ul>
<li><a href="#null"> Internet Explorer </a></li>
<li><a href="#null"> Opera </a></li>
<li><a href="#null"> Firefox </a></li>
<li><a href="#null"> Safari </a></li>
</ul>
</li>
</ul>
2. Прописываем CSS-селектор для действия выпадения меню
Весь процесс самого выпадения меню реализуется с помощью любимого "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;
}
<!-- событие при котором выпадает css меню -->
body ul li:hover ul {
padding-top: 0px;
margin-top: 0px;
display: block;
position: absolute;
margin-left: 164px;
margin-top: -24px;
}
<!-- выделение элемента css меню -->
#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]-->
