Главная » 2012 » Март » 11 » Всплывающее вверху меню (Javascript)
11.03.2012, 13:03

Всплывающее вверху меню





Меню всплывает, если подвести курсор к верхней части страницы.

Первым делом давайте взглянем на HTML код самого меню:
Code
<div id="hit_area" onmouseover="toggleDown();"></div>
  <div id="menu_holder">
  <div id="nav">
  <ul>
  <li><a href="http://jstween.blogspot.com">jstween</a></li>
  <li><a href="http://ww.2210media.com">2210media</a></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>

Как Вы видите меню помещено в слой под названием "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="hide_menu.js"></script>
  <link href="styles.css" rel="stylesheet" type="text/css" />

Тут мы подключаем таблицу стилей и скрипт. Помним про пути. Внешний вид выпадающего меню Вы можете подстроить под свои нужды. Достаточно только покопаться в CSS коде.
Материал взят с сайта infoscript.ru
Теги: Скачать Всплывающее вверху меню
Скачать "Всплывающее вверху меню"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: ruseller.com
Категория: JavaScript's | Просмотров: 2336 | Добавил: antisept | Рейтинг: 3.5/2 |
Теги: Всплывающее, меню, вверху
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]