Ноя 21

Выпадающее меню. Качественная реализация.

При работе над проектами часто возникает необходимость создания выпадающего меню. Существует большое количество скриптов, реализующих этот функционал. Но при их практическом применении необходимо чтобы скрипт соответствовал следующим требованиям:

Кроссбраузерность - корректная работа скрипта в необходимых браузерах.
Правильное позиционирование меню при изменении разрешения экрана (особенно актуально при резиновой верстке).
Стабильное поведение меню при наведении курсора.
Простая смена оформления через редактирование CSS.
Легкость добавления новых пунктов.
Семантика (это сейчас модно).
Простая настройка дополнительных параметров (временных задержек, дополнительных эффектов и т.д.)

Я изучил большое количество скриптов выпадающего меню. Наиболее качественная и практичная реализация (на мой взгляд) представлена здесь . Очень просто интегрируется в верстку.
Пример:

PLAIN TEXT

HTML:

<p class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
</ul>
<p id="dropmenu1" class="dropmenudiv"> <a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<p id="dropmenu2" class="dropmenudiv" style="width: 150px"> <a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

Содержимое выпадающего меню находится в дивах div id="dropmenu1",id="dropmenu2". К конкретному пункту меню привязывается строкой rel="dropmenu1" (показывает div id="dropmenu1"). Настройку оформления производим в css файле. Также возможно настроить задержку сворачивания меню, подключить эффекты и анимацию.
Этот скрипт использовал при верстке сайта http://mntk.rosenergoatom.ru/ и других проектах.