Веб-компас сайтостроителей
Создание выпадающего меню на JavaScript
В этой статье рассмотрим, как создать выпадающее меню при наведении курсора мышки на пункт меню с использованием JavaScript. Пример такого меню можно посмотреть тут. Разберем последовательно все по порядку.
Выполним горизонтальное меню без применения таблиц, для этого будем использовать блоки div и свойство CSS - float (обтекание). Тогда пункты меню достаточно будет записать подряд в блоках div, с классом "punkt". Также заключим все меню в блок с классом "menu", и еще для наглядности все пункты меню поместим в блок с идентификатором "block_menu". То есть на данном этапе получим следующий HTML-код
В итоге получим строчку из пунктов меню. Также мы добавили блок "footer_menu" со свойством CSS - "clear:both;", с помощью которого уберем действие свойства "float" пунктов меню на последующее содержимое странички.
Давайте условно назовем пункты выпадающего меню - подпунктами, чтобы мы не путались в дальнейшем с пунктами меню разного уровня.
Далее, мне представляется возможность сделать выпадающее меню блоком div с абсолютным позиционированием. Тогда нужно обозначить блок div с классом punkt как относительно позиционируемый, и в нем прописать блок div со списком подпунктов, как абсолютно позиционируемый. Для блока div со списком подпунктов определим класс "list_punkts". Этот блок нужно будет сделать невидимым, и лишь при наведении на пункт делать его видимым. Сделать первоначально его невидимым нам поможет свойство display со значением "none". В дальнейшем показывать и убирать его будем при помощи JavaScript-а, управляя все тем же свойством display. Отображаться же будет блок со списком подпунктов ниже пункта меню, и выровнен по левому краю. На данном этапе получим следующий код (для большей наглядности приведу один лишь пункт)
Ну вот, основа уже есть, можно писать и сам скрипт. Для отображения выпадающего меню при наведении курсора мышки на пункт меню будем использовать обработчик событий onMouseOver, которому укажем функцию, делающую наш блок видимым. Для скрытия выпадающего меню при уводе указателя мыши с пункта меню будем использовать обработчик событий onMouseOut, которому укажем функцию, делающую наш блок невидимым. Теперь осталось решить, как получить доступ к пункту меню и блоку со списком подпунктов. Решим эту задачу с помощью DOM (объектная модель документа). Для этого в обработчике событий передадим исполняющей функции объект пункта меню, у нас это div с классом "punkt". Реализуем подобное чудо с помощью ключевого слова "this", которое означает текущий объект, например, если мы напишем
То при вызове функции overPunkt(obj_block){ ... } переменная obj_block будет содержать объект блока div приведенного в примере.
Однако использование DOM потребует заключить текст пункта меню в блок div и повышенного внимания при наборе HTML-кода. Давайте рассмотрим уже готовый к употреблению код, а потом поясню.
Для того чтобы правильно работали функции обработки пункта меню и списка подпунктов, нужно блок пункта меню, блок с названием и блок со списком подпунктов писать без пробелов, при необходимости переносить текст на новую строку можно в теге, следующим образом
Однако подобный способ значительно облегчает написание, как самих функций, так и исключает некоторые действия другого рода.
При наведении пользователем курсора мышки на пункт меню, обработчик событий onMouseOver вызовет функцию overPunkt() и переменной "obj_listPunkt" будет передан объект div с классом "punkt". Согласно записанному нами HTML-коду первым дочерним объектом будет блок div с названием пункта. К нему доступ можно получить, записав следующее
Доступ к блоку div с классом "list_punkts" содержащий список подпунктов (выпадающее меню) можно получить следующим образом
Так как свойство childNodes содержит список потомков узла, и для доступа к какому-нибудь потомку нужно указать номер потомка (отсчет начинается с нуля). Что мы, вообще-то, и применили.
Если Вы знаете каскадные таблицы стилей, то уже догадались, что кроме управления видимостью выпадающего меню, в функциях overPunkt() и outPunkt() также меняется и внешний вид пункта меню, так как в HTML-коде добавлены еще элементы оформления внешнего вида меню.
Как реализовать изменение фона блока подпункта при наведении курсора мыши читайте эту статью.
Выполним горизонтальное меню без применения таблиц, для этого будем использовать блоки div и свойство CSS - float (обтекание). Тогда пункты меню достаточно будет записать подряд в блоках div, с классом "punkt". Также заключим все меню в блок с классом "menu", и еще для наглядности все пункты меню поместим в блок с идентификатором "block_menu". То есть на данном этапе получим следующий HTML-код
Код
<html>
<head>
<style>
.punkt { float:left; }
.footer_menu { clear:both; }
</style>
</head>
<body>
<div class="menu">
<div id=" block_menu ">
<div class="punkt">О проекте</div>
<div class="punkt">Веб-дизайн</div>
<div class="punkt">JavaScript</div>
<div class="punkt">PHP</div>
<div class="punkt">Новости</div>
</div>
<div class="footer_menu"></div>
</div>
</body>
</html>
В итоге получим строчку из пунктов меню. Также мы добавили блок "footer_menu" со свойством CSS - "clear:both;", с помощью которого уберем действие свойства "float" пунктов меню на последующее содержимое странички.
Давайте условно назовем пункты выпадающего меню - подпунктами, чтобы мы не путались в дальнейшем с пунктами меню разного уровня.
Далее, мне представляется возможность сделать выпадающее меню блоком div с абсолютным позиционированием. Тогда нужно обозначить блок div с классом punkt как относительно позиционируемый, и в нем прописать блок div со списком подпунктов, как абсолютно позиционируемый. Для блока div со списком подпунктов определим класс "list_punkts". Этот блок нужно будет сделать невидимым, и лишь при наведении на пункт делать его видимым. Сделать первоначально его невидимым нам поможет свойство display со значением "none". В дальнейшем показывать и убирать его будем при помощи JavaScript-а, управляя все тем же свойством display. Отображаться же будет блок со списком подпунктов ниже пункта меню, и выровнен по левому краю. На данном этапе получим следующий код (для большей наглядности приведу один лишь пункт)
Код
<html>
<head>
<style>
.punkt {float:left; position:relative; }
div.list_punkts { position:absolute; top:26px; left:0px; display:none; }
</style>
</head>
<body>
<div class="menu">
<div id="block_menu">
<div class="punkt">
<div>О проекте</div>
<div class="list_punkts">
<a href="#"><div class="podpunkt">Главная</div></a>
<a href="#"><div class="podpunkt">О нас</div></a>
<a href="#"><div class="podpunkt">Контакты</div></a>
<a href="#"><div class="podpunkt">Карта сайта</div></a>
</div>
</div>
</div>
<div class="footer_menu"></div>
</div>
</body>
</html>
Ну вот, основа уже есть, можно писать и сам скрипт. Для отображения выпадающего меню при наведении курсора мышки на пункт меню будем использовать обработчик событий onMouseOver, которому укажем функцию, делающую наш блок видимым. Для скрытия выпадающего меню при уводе указателя мыши с пункта меню будем использовать обработчик событий onMouseOut, которому укажем функцию, делающую наш блок невидимым. Теперь осталось решить, как получить доступ к пункту меню и блоку со списком подпунктов. Решим эту задачу с помощью DOM (объектная модель документа). Для этого в обработчике событий передадим исполняющей функции объект пункта меню, у нас это div с классом "punkt". Реализуем подобное чудо с помощью ключевого слова "this", которое означает текущий объект, например, если мы напишем
Код
...
<div class="punkt" onMouseOver="overPunkt(this);">
...
То при вызове функции overPunkt(obj_block){ ... } переменная obj_block будет содержать объект блока div приведенного в примере.
Однако использование DOM потребует заключить текст пункта меню в блок div и повышенного внимания при наборе HTML-кода. Давайте рассмотрим уже готовый к употреблению код, а потом поясню.
Код
<html>
<head>
<title>Выпадающее меню на javascript</title>
<style>
body { font-family: verdana, sans-serif; font-size:13px; margin:0px; padding:0px;
background:#ADE7F1;}
.menu { background:#C4C2F8; width:100%; }
#block_menu { margin-left:5px; }
.punkt {float:left; padding: 1px 1px 0px 1px; background:transparent; position:relative; cursor:pointer; }
.punkt div {padding:2px 7px 2px 7px;}
div.list_punkts {background:#C6E0B6; position:absolute; top:26px; left:0px;
display:none; padding:0px; width:180px; border:solid 1px #000; }
div.list_punkts div.kont {padding:0px;margin:3px; /*background:#80FF00;*/ }
div.list_punkts a {text-decoration:none; padding:0px; cursor:pointer; color:#000080;}
div.list_punkts div a div.podpunkt { /*background:#FF8000;*/ width:100%; padding:0px; margin-top:2px; }
div.list_punkts div a div.podpunkt div { width:100%;padding:0px 0px 0px 2px; white-space:pre;}
div.list_punkts div a:hover { background:#7C58DC; }
div.list_punkts div a:hover div.podpunkt { background:#7C58DC; color:#fff; }
.footer_menu { clear:both; }
</style>
</head>
<body>
<script type="text/javascript">
function overPunkt(obj_listPunkt)
{
/* делаем выпадающее меню видимым */
obj_listPunkt.childNodes[1].style.display="block";
/* ставим выпадающее меню ниже пункта меню */
obj_listPunkt.childNodes[1].style.top=obj_listPunkt.offsetHeight;
/*дальше идет оформление пункта меню */
obj_listPunkt.style.background="#8080FF";
obj_listPunkt.style.padding=0;
obj_listPunkt.childNodes[0].style.border="solid 1px #000";
obj_listPunkt.childNodes[0].style.borderBottom="none";
/* запоминаем цвет текста пункта меню, чтоб потом его можно было восстановить */
color_text=obj_listPunkt.style.color;
obj_listPunkt.style.color="#dfd";
}
function outPunkt(obj_listPunkt)
{
/* делаем выпадающее меню невидимым */
obj_listPunkt.childNodes[1].style.display="none";
/* дальше восстанавливаем первоначальный внешний вид пункта меню */
obj_listPunkt.style.background="transparent";
obj_listPunkt.style.padding=1;
obj_listPunkt.style.paddingBottom=0;
obj_listPunkt.childNodes[0].style.border="none";
obj_listPunkt.style.color=color_text;
}
</script>
<div class="menu">
<div id="block_menu">
<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div>О проекте</div
><div class="list_punkts"><div class="kont">
<a href="#"><div class="podpunkt"><div>Главная</div></div></a>
<a href="#"><div class="podpunkt"><div>О нас</div></div></a>
<a href="#"><div class="podpunkt"><div>Контакты</div></div></a>
<a href="#"><div class="podpunkt"><div>Карта сайта</div></div></a>
</div></div>
</div>
<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div>Веб-дизайн</div
><div class="list_punkts"><div class="kont">
<a href="http://www.linedmk.com"><div class="podpunkt"><div>Основы</div></div></a>
<a href="#"><div class="podpunkt"><div>Статьи</div></div></a>
<a href="#"><div class="podpunkt"><div>Литература</div></div></a>
<a href="#"><div class="podpunkt"><div>Приемы и примеры</div></div></a>
<a href="#"><div class="podpunkt"><div>Частые ошибки</div></div></a>
</div></div>
</div>
<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div>JavaScript</div
><div class="list_punkts"><div class="kont">
<a href="#"><div class="podpunkt"><div>Основы</div></div></a>
<a href="#"><div class="podpunkt"><div>Литература</div></div></a>
<a href="#"><div class="podpunkt"><div>Статьи</div></div></a>
<a href="#"><div class="podpunkt"><div>Скачать скрипты</div></div></a>
</div></div>
</div>
<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div>PHP</div
><div class="list_punkts"><div class="kont">
<a href="#"><div class="podpunkt"><div>Основы</div></div></a>
<a href="#"><div class="podpunkt"><div>Литература</div></div></a>
<a href="#"><div class="podpunkt"><div>Статьи</div></div></a>
<a href="#"><div class="podpunkt"><div>Скачать скрипты</div></div></a>
</div></div>
</div>
<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div>Новости</div
><div class="list_punkts"><div class="kont">
<a href="#"><div class="podpunkt"><div>За последнюю неделю</div></div></a>
<a href="#"><div class="podpunkt"><div>За месяц</div></div></a>
<a href="#"><div class="podpunkt"><div>Все</div></div></a>
</div></div>
</div>
</div>
<div class="footer_menu"></div>
</div>
</body>
</html>
Для того чтобы правильно работали функции обработки пункта меню и списка подпунктов, нужно блок пункта меню, блок с названием и блок со списком подпунктов писать без пробелов, при необходимости переносить текст на новую строку можно в теге, следующим образом
Код
<div class="punkt" onMouseOver="overPunkt(this);"
onMouseOut="outPunkt(this);"><div>PHP</div
><div class="list_punkts">
Однако подобный способ значительно облегчает написание, как самих функций, так и исключает некоторые действия другого рода.
При наведении пользователем курсора мышки на пункт меню, обработчик событий onMouseOver вызовет функцию overPunkt() и переменной "obj_listPunkt" будет передан объект div с классом "punkt". Согласно записанному нами HTML-коду первым дочерним объектом будет блок div с названием пункта. К нему доступ можно получить, записав следующее
Код
obj_listPunkt.childNodes[0]
Доступ к блоку div с классом "list_punkts" содержащий список подпунктов (выпадающее меню) можно получить следующим образом
Код
obj_listPunkt.childNodes[1]
Так как свойство childNodes содержит список потомков узла, и для доступа к какому-нибудь потомку нужно указать номер потомка (отсчет начинается с нуля). Что мы, вообще-то, и применили.
Если Вы знаете каскадные таблицы стилей, то уже догадались, что кроме управления видимостью выпадающего меню, в функциях overPunkt() и outPunkt() также меняется и внешний вид пункта меню, так как в HTML-коде добавлены еще элементы оформления внешнего вида меню.
Как реализовать изменение фона блока подпункта при наведении курсора мыши читайте эту статью.
- Статью добавил пользователь
- Категория
- Дата размещения 08.07.2008, просмотров 81707
Еще статьи из данной категории
Предыдущие статьи
- нет
Новости сайта
-
05.05.2022Уважаемые пользователи, наш сайт переехал на новый домен, но все материалы останутся без изменений.
-
06.04.2020Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
-
12.10.2012С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.
и если не сложно подскажите чего надо изменить чтобы меню стали вертикальным и выпадающая вкладка вылазила справа.
заранее спасибо.
.menu {
background:#fff;
width:70%;
height:50px;
margin:100px 15% 0px;
}
Хочу только не могу поменять вид всплывающего меню, обвести его в рамку и изменить цвет.
Подскажите, как это сделать.
Спасибо.
Натали
Ответьте пожалуйста
http://www.wonderwebware.com/css-menu/
Я вот его кручу со всех сторон, но никак не получается сделать вертикальное меню, чтобы подпункты меню выпадали снизу пунктов.
Что необходимо указать в коде?
div.list_punkts { position:absolute; top:26px; left:0px; display:none; }
на
div.list_punkts { position:absolute; top:0px; right:0px; display:none; }
не проверял, но должно работать так.
1 строка 1 столбец там картинка и т.п.
и 2 строка 5 столбцов (это типо меню)
в каждой картинка хочу зделать выпадающее меню на первых 2 картинках
они в разных столбцах т.е. надо делать 2 меню
так вот 1 меню делаю все ок и в EI пашет ,но вот 2 меню в EI не пашет
пытался линковать 2 ксс таблицы писал каждому айди свое но 2 меню не выпадает (
Помогите уже все излазил не могу не че зделать
вот эти 2 столбца
<ul id="cssmenu">
<li><a href="#"><center><img border="0" src="картинки/Главная/Биография.jpg" width="238" height="36"></center></a>
<ul dynamicoutline>
<li><a href="biog.html">Краткая хронология</a></li>
<li><a href="детство.html">Детство</a></li>
<li><a href="Mos.html">Путешествие в Москву</a></li>
<li><a href="#">Петербурская Академия</a></li>
<li><a href="#">Ломоносов за границей</a></li>
<li><a href="#">Труды в Академии наук</a></li>
</li>
</td>
<td height="25" width="250">
<ul id="csssmenu">
<li><a href="#"><img border="0" src="картинки/Главная/Произведения1.jpg" width="252" height="36"></a>
<ul>
<li><a href="#">Стихотворения</a></li>
<li><a href="#">Трагедии</a></li>
<li><a href="#">Письма</a></li>
<li><a href="#">Критика и публицистика</a></li>
<li><a href="#">Научные труды</a></li>
</ul>
</li>
onMouseOver="overPunkt(this);"
onMouseOut="outPunkt(this);
по аналогии с первым меню.
<html>
<head>
<title>Выпадающее меню на javascript</title>
<style>
body { font-family: verdana, sans-serif; font-size:13px; margin:0px; padding:0px;
background:#ADE7F1;}
.menu { background:#C4C2F8; width:100%; }
#block_menu { margin-left:5px; }
.mnu
{
float:left;
width:auto;
height:auto;
display:block;
margin-left:20px;
}
.mnu_popup
{
display:block;
position:absolute;
height:auto;
display:none;
background-color:#096;
}
.mnu_popup a
{
display:block;
width:auto;
height:auto;
}
.mnu_popup a:hover
{
background-color:#999;
}
</style>
</head>
<body>
<script type="text/javascript">
function over_m(sender,n)
{
document.getElementById("m"+n).style.display="block";
}
function out_m(sender,n)
{
document.getElementById("m"+n).style.display="none";
}
</script>
<div class="menu">
<div id="block_menu">
<div class="mnu" onMouseOver="over_m(this,1);" onMouseOut="out_m(this,1);">
<a href="">Веб-дизайн</a><BR>
<div class="mnu_popup" id="m1">
<a href="http://www.linedmk.com">Основы</a>
<a href="#">Статьи</a>
<a href="#">Литература</a>
<a href="#">Приемы и примеры</a>
<a href="#">Частые ошибки</a>
</div>
</div>
<div class="mnu" onMouseOver="over_m(this,2);" onMouseOut="out_m(this,2);">
<a href="">Веб-дизайн</a><BR>
<div class="mnu_popup" id="m2">
<a href="http://www.linedmk.com">Основы</a>
<a href="#">Статьи</a>
<a href="#">Литература</a>
<a href="#">Приемы и примеры</a>
<a href="#">Частые ошибки</a>
</div>
</div>
</div>
<div class="footer_menu"></div>
</div>
</body>
</html>
Меню появляется, и сразу же исчезает, если попытаться подвинуть стрелочку вниз.
Только у меня такая проблема...между пунктом и подпунктом почему-то отображается зазор (т.е. расстояние), из-за чего при переходе на подпункт, указатель попадает на пустое место и выпадающее меню сразу закрывается...как это исправить? Подскажите кто-нибудь, плиз!!!