Страница 1 из 1
Выпадающее меню на javascript
Добавлено:
17 мар 2011, 15:28
megainformatic
В этой теме я прокомментирую найденный пример реализации выпадающего меню реализованный на javascript
Выпадающее меню на javascript - код
Добавлено:
17 мар 2011, 15:30
megainformatic
Берем за основу вот такой код -
=====
<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>
=====
Выпадающее меню на javascript - проверка работы
Добавлено:
17 мар 2011, 15:33
megainformatic
Для проверки работы данного кода - создаем пустой файл с расширением htm или html и сохраняем в кодировке utf-8 без бом. Это удобно сделать с помощью удобного редактора Notepad++.
Открываем любой браузер и переносим файл в его окно. В результате страница откроется, код выполнится и вы сможете воочию увидеть простой пример выпадающего меню.
Теперь перейдем к объяснению некоторых деталей
Выпадающее меню на javascript - детали
Добавлено:
17 мар 2011, 15:35
megainformatic
=====
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
=====
Это шапка нашего html-документа, тут думаю всё понятно.
Обращаю внимание, что если вы укажете другую кодировку, то файл нужно сохранять именно в этой кодировке и все вставляемые извне символы также должны быть в этой же кодировке - иначе - будут всем известные КРАКОЗЯБРЫ
Выпадающее меню на javascript - детали 2
Добавлено:
17 мар 2011, 15:41
megainformatic
=====
<!-- описываем стили для элементов нашего будущего выпадающего меню
в дальнейшем конечно это лучше выносить в отдельный 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>
=====
Выпадающее меню на javascript - детали 3
Добавлено:
17 мар 2011, 16:00
megainformatic
<!-- проще всего меню сверстать таблицами, что мы и сделаем - создаем таблицу, в которой у нас будет всего 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>
Выпадающее меню на javascript - маленький нюанс
Добавлено:
17 мар 2011, 16:08
megainformatic
В нашем примере реализации выпадающего меню есть маленький нюанс, который обязательно надо учитывать.
Вот строки кода, о которых я сейчас буду вести речь -
=====
<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 - то возникает неприятная вещь - пункт подменю невозможно выбрать. Этот момент обязательно учитывайте !!!