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>