Главная » 2012 » Март » 16 » JavaScript's: Всплывающее вверху меню
16:07 JavaScript's: Всплывающее вверху меню | ||||||||||||
Всплывающее вверху менюСоветуем посмотреть: src="http://pagead2.googlesyndication.com/pagead/show_ads.js">  Меню всплывает, если подвести курсор к верхней части страницы. Первым делом давайте взглянем на 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 Теги: Скачать Всплывающее вверху меню
| ||||||||||||