http://yur4iksite.at.ua/ARHIV/forum/Menu_Dock.zip (скачать архив) В этом уроке Вы узнаете как сделать красивое меню для сайта, которое будет появляться только при наведении на определенную область страницы.
Данное меню очень красиво будет смотреться на любом сайте. Для его использования нам понадобится всего один javascript файл.
Первым делом давайте взглянем на HTML код самого меню:
Code
<div id="menu_holder">
<div id="nav">
<ul>
<li><a href="http://yur4iksite.at.ua/">Главная</a></li>
<li><a href="http://yur4iksite.at.ua/photo">Фото</a></li>
<li><a href="http://yur4iksite.at.ua/stuff/">Игры</a></li>
<li><a href="http://yur4iksite.at.ua/forum">Форум</a></li>
<li><a href="http://yur4iksite.at.ua/gb">Для гостей</a></li>
</ul>
</div>
</div>
Между этими тегами должно размещаться то, при наведении на что будет появляться наше меню!
(Это может быть шапка сайта )
Code
<div id="hit_area" onmouseover="toggleDown();"> </div>
Как Вы видите меню помещено в слой под названием "hit_area". И этот слой также имеет условие при наведении запускать работу Javascript. Если мы посмотрим в таблицу каскадных стилей, то этот слой имеет высоту 120 пикселей. То есть, как только мышка переходит в эту зону, меню опускается вниз.
Весь остальной контент страницы помещен в слой с id "hit_area2". И как только мышка переходит туда, меню сразу прячется обратно.
Code
<div id="hit_area2" onmouseover="toggleUp();">
<div id="content">
<h1>НАВЕДИТЕ КУРСОР НА ШАПКУ ДЛЯ ПРОСМОТРА ДЕМО</h1>
</div>
</div>
Для верного функционирования меню нам также понадобиться добавить между тегами <head></head> следующий код.
Code
<script type="text/javascript" src="/Menu_Dock/hide_menu.js"></script>
<link href="/Menu_Dock/styles.css" rel="stylesheet" type="text/css" />
Тут мы подключаем таблицу стилей и скрипт. Помним про пути. Внешний вид выпадающего меню Вы можете подстроить под свои нужды. Достаточно только покопаться в CSS коде.
По данному уроку все! Все вопросы и комментарии пишите ниже.
