Выпадающее меню на javascript

всё о создании сайтов, программировании на html, css, php, javascript, flash и прочем связанном с созданием и продвижением сайтов

Выпадающее меню на javascript

Сообщение megainformatic » 17 мар 2011, 15:28

В этой теме я прокомментирую найденный пример реализации выпадающего меню реализованный на javascript
Аватара пользователя
megainformatic
 
Сообщения: 163
Зарегистрирован: 05 авг 2010, 19:31

Выпадающее меню на javascript - код

Сообщение megainformatic » 17 мар 2011, 15:30

Берем за основу вот такой код -

=====

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<style type="text/css">
.ids {
position: absolute; border: 1px solid;border-color: black; background-color:#99ccff;
}
.ids a:hover{
text-decoration: underline;
font-size:12px;
font-family: Verdana;
color: black;
background-color:#99ccff;
width: 150;
}
.ids a{
text-decoration: none;
font-size:12px;
font-family: Verdana;
color: blue;
background-color:#99ccff;
width: 150;
}
</style>

</head>

<body>


<!-- главное меню первого уровня -->
<TABLE cellpadding="0" cellspacing="0" border="0" class="ids">
<TR><TD align=center>
<a href="#" style="text-decoration:none" onMouseOut="menu1.style.visibility='hidden';" onMouseOver="menu1.style.visibility='visible';">
<div style="background-color: #99ccff; border: 1px solid; border-color: black; margin: 0 5px;">Форум</div>
</a>
</TD><TD align=center>
<a href="#" style="text-decoration:none" onMouseOut="menu2.style.visibility='hidden';" onMouseOver="menu2.style.visibility='visible';">
<div style="background-color: #99ccff; border: 1px solid;border-color: black; margin: 0 5px;">Новости</div>
</a>
</TD></TR>
<!-- дальше идут подменю -->
<TR><TD>
<TABLE class="ids" width="15%" id="menu1" border=0 style="visibility:hidden;" onMouseOut="menu1.style.visibility='hidden';" onMouseOver="menu1.style.visibility='visible';">
<TR><TD align=center><a href="#">Программирование игр</TD></TR>
<TR><TD align=center><a href="#">Графика</TD></TR>
<TR><TD align=center><a href="#">Музыка и звук</TD></TR>
</TABLE></TD>
<TD>
<TABLE class="ids" width="15%" id="menu2" border=0 style="visibility:hidden;" onMouseOut="this.style.visibility='hidden';" onMouseOver="this.style.visibility='visible';">
<TR><TD align=center><a href="#">Новость1</TD></TR>
<TR><TD align=center><a href="#">Новость2</TD></TR>
<TR><TD align=center><a href="#">Новость3</TD></TR>
</TABLE></TD>
</TR>
</TABLE>
</TABLE>
</DIV>

</body>

</html>


=====
Аватара пользователя
megainformatic
 
Сообщения: 163
Зарегистрирован: 05 авг 2010, 19:31

Выпадающее меню на javascript - проверка работы

Сообщение megainformatic » 17 мар 2011, 15:33

Для проверки работы данного кода - создаем пустой файл с расширением htm или html и сохраняем в кодировке utf-8 без бом. Это удобно сделать с помощью удобного редактора Notepad++.

Открываем любой браузер и переносим файл в его окно. В результате страница откроется, код выполнится и вы сможете воочию увидеть простой пример выпадающего меню.

Теперь перейдем к объяснению некоторых деталей
Аватара пользователя
megainformatic
 
Сообщения: 163
Зарегистрирован: 05 авг 2010, 19:31

Выпадающее меню на javascript - детали

Сообщение megainformatic » 17 мар 2011, 15:35

=====

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

=====

Это шапка нашего html-документа, тут думаю всё понятно.
Обращаю внимание, что если вы укажете другую кодировку, то файл нужно сохранять именно в этой кодировке и все вставляемые извне символы также должны быть в этой же кодировке - иначе - будут всем известные КРАКОЗЯБРЫ :)
Аватара пользователя
megainformatic
 
Сообщения: 163
Зарегистрирован: 05 авг 2010, 19:31

Выпадающее меню на javascript - детали 2

Сообщение megainformatic » 17 мар 2011, 15:41

=====

<!-- описываем стили для элементов нашего будущего выпадающего меню
в дальнейшем конечно это лучше выносить в отдельный css файл. Но поскольку пример у нас простой - мы сделаем
прямо здесь.
-->

<style type="text/css">

/* придумываем новый класс для пунктов меню - ниже по коду посмотрите где встречается фраза ids и сразу догадаетесь */

.ids {
/* позицию задаем абсолютную, чтобы никуда ничего не "съезжало", бордюр сплошной, толщиной 1 пиксель, черного цвета, фон элемента - задан цветом #99ccff */
position: absolute; border: 1px solid;border-color: black; background-color:#99ccff;
}

/* при наведении на данный элемент (ссылку) будем задавать такие свойства - */

.ids a:hover{
text-decoration: underline; /* выведем подчеркивание ссылок */
font-size:12px; /* размер шрифта - 12 пиксель */
font-family: Verdana; /* шрифт Verdana */
color: black; /* цвет букв - черный */
background-color:#99ccff; /* цвет фона аналогичный тому, что был задан для .ids */
width: 150; /* ширина 150 пикселей */
}

/* собственно класс элемента, если он представлен ссылкой (а он и будет ссылкой, т. к. все элементы меню - ссылки и куда-нибудь ведут */

.ids a{
text-decoration: none; /* отключаем подчеркивание текста ссылки */
font-size:12px; /* всё остальное - аналогично предыдущему */
font-family: Verdana;
color: blue;
background-color:#99ccff;
width: 150;
}
</style>

=====
Аватара пользователя
megainformatic
 
Сообщения: 163
Зарегистрирован: 05 авг 2010, 19:31

Выпадающее меню на javascript - детали 3

Сообщение megainformatic » 17 мар 2011, 16:00

<!-- проще всего меню сверстать таблицами, что мы и сделаем - создаем таблицу, в которой у нас будет всего 2 столбца и 2 строки, а внутри размещаем вложенные таблицы
а в качестве оформления как раз указываем описанный ранее класс ids
-->

<TABLE cellpadding="0" cellspacing="0" border="0" class="ids">

<!-- выравниваем содержимое ячейки таблицы по центру - содержимым будет текстовая ссылка, следовательно она будет выравниваться по центру -->
<TR><TD align=center>

<!-- здесь уже начинается самое интересное - начинаются элементы главного меню (1 уровня вложенности)
в качестве ссылки указан символ решетки означающий метку (bookmark) в коде, но в данном случае - имя метки опущено, т. е. ссылка будет, но
будет пустой - это нужно для того, чтобы при наведении на данный пункт появлялись подпункты (2 уровня вложенности)

обратите внимание - onMouseOut - как только происходит это событие javascript для класса menu1 его стиля свойство видимость устанавливается в
в значение hidden - скрытый. Т. е. когда указатель мыши покидает пределы области данного пункта меню элемент помеченный классом menu1 становится
невидим. В противоположность этому - событие onMouseOver - приводит к отображению данного элемента.
Это и есть тот самый код javascript, который отображает/скрывает те элементы нашей таблицы, которые содержат пункты подменю.

Ну а дальше думаю всё итак понятно - для пунктов подменю выполняем аналогичный код - чтобы они соответственно исчезали из
поля зрения, когда указатель мыши вышел за пределы меню и появлялись, когда он возвращался обратно.

-->
<a href="#" style="text-decoration:none" onMouseOut="menu1.style.visibility='hidden';" onMouseOver="menu1.style.visibility='visible';">
<div style="background-color: #99ccff; border: 1px solid; border-color: black; margin: 0 5px;">Форум</div>
</a>
</TD><TD align=center>
<a href="#" style="text-decoration:none" onMouseOut="menu2.style.visibility='hidden';" onMouseOver="menu2.style.visibility='visible';">
<div style="background-color: #99ccff; border: 1px solid;border-color: black; margin: 0 5px;">Новости</div>
</a>
</TD></TR>
<!-- дальше идут подменю -->
<TR><TD>
<TABLE class="ids" width="15%" id="menu1" border=0 style="visibility:hidden;" onMouseOut="menu1.style.visibility='hidden';" onMouseOver="menu1.style.visibility='visible';">
<TR><TD align=center><a href="#">Программирование игр</TD></TR>
<TR><TD align=center><a href="#">Графика</TD></TR>
<TR><TD align=center><a href="#">Музыка и звук</TD></TR>
</TABLE></TD>
<TD>
<TABLE class="ids" width="15%" id="menu2" border=0 style="visibility:hidden;" onMouseOut="this.style.visibility='hidden';" onMouseOver="this.style.visibility='visible';">
<TR><TD align=center><a href="#">Новость1</TD></TR>
<TR><TD align=center><a href="#">Новость2</TD></TR>
<TR><TD align=center><a href="#">Новость3</TD></TR>
</TABLE></TD>
</TR>
</TABLE>
</TABLE>
</DIV>
Аватара пользователя
megainformatic
 
Сообщения: 163
Зарегистрирован: 05 авг 2010, 19:31

Выпадающее меню на javascript - маленький нюанс

Сообщение megainformatic » 17 мар 2011, 16:08

В нашем примере реализации выпадающего меню есть маленький нюанс, который обязательно надо учитывать.

Вот строки кода, о которых я сейчас буду вести речь -

=====
<div style="background-color: #99ccff; border: 1px solid; border-color: black; margin: 0 5px;">Форум</div>


<div style="background-color: #99ccff; border: 1px solid;border-color: black; margin: 0 5px;">Новости</div>
=====

Обратите внимание я пометил синим значение внешнего отступа сверху и снизу у данного пункта меню. Если вы зададите значение отличное от 0, скажем 5px - то возникает неприятная вещь - пункт подменю невозможно выбрать. Этот момент обязательно учитывайте !!!
Аватара пользователя
megainformatic
 
Сообщения: 163
Зарегистрирован: 05 авг 2010, 19:31


Вернуться в Сайтострой

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron