Выпадающее меню на javascript
Продолжим серию из цикла создания различных видов меню для Вашего сайта. Сегодня Вы узнаете как сделать красивое меню для сайта, которое будет появляться только при наведении на определенную область страницы.
Для его использования нам понадобится всего один javascript файл. Это выпадающее меню очень просто редактируется,
Вам будет просто подстроить меню под нужды своего проекта. И чтобы убедиться в его функциональности, взгляните на живой пример:
Как Вы смогли убедиться всё прекрасно работает, а рассмотрев все составляющие данного меню, надеюсь поймете, как отредактировать код меню и вписать его в свой сайт.
Первым делом посмотрим на HTML код самого меню:
<div id="hit_area" onmouseover="toggleDown();"></div> <div id="menu_holder"> <div id="nav"> <ul> <li><a href="/">Блог</a></li> <li>2210media</li> <li><a href="http://www.digg.com">Digg</a></li> <li><a href="http://www.cssmania.com">CSS Mania</a></li> <li><a href="http://www.kirupa.com">Kirupa</a></li> </ul> </div> </div> |
Теперь сам принцип работы. Мы видим что меню помещено в слой под названием с id="hit_area". Этот слой имеет условие, при наведении на него запускать работу javascript. В таблице каскадных стилей для этого div-а установлено значение высоты 120px. Это значит, что как только мышка переходит в эту зону, меню появляется, опускаясь вниз из-за верхней границы страницы.
Весь остальной контент страницы помещен в div-контейнер с id="hit_area2". И как только мышка переходит туда, меню плавно скрывается.
<div id="hit_area2" onmouseover="toggleUp();"> <div id="content"> <h1>НАВЕДИТЕ КУРСОР НА ШАПКУ ДЛЯ ПРОСМОТРА ДЕМО</h1> </div> </div> |
Ну и наконец, для достижения работоспособности меню нам важно поместить между тегами <head></head> следующий код:
<script type="text/javascript" src="hide_menu.js"></script> <link href="styles.css" rel="stylesheet" type="text/css" /> |
Этим кодом подключаем таблицу стилей и сам скрипт меню. Обязательно не забываем про пути к файлам. Как я уже говорил, это меню легко настроить под себя, нужно лишь немного повозиться с CSS кодом.
Все очень просто, как говориться: «главное было бы желание».
Источник: http://ruseller.com/
На этом всё. Удачи!
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Отключаем скрипты в браузере. И ничего не видим. Меню не работает. Решение нуждается в доработке.
Дмитрий
Отключаем скрипты в браузере
Для чего отключать скрипты, разве что в целях призрачной безопасности при серфинге, но тогда это совсем другая история. Из названия статьи видно, что меню построено именно с использованием javascript
C отключенными javascript , конечно меню не будет работать, как и весь сайт станет больше походить на текстовую мешанину.