Первое объявление:
Хотя я много лет работал в переднем положении Интернета, у меня нет высоких технических требований для этой должности. HTML и CSS используются чаще, и существует очень мало оригинальных JavaScript, и они в основном модифицированы копией. Поэтому, когда я действительно пишу, я обнаружил, что фундамент не был твердым, и я учился и практиковался, и много приобрел.
Изображение воспроизведения:
Нет больше чепухи, пост -код
1. CSS -код
Кода -копия выглядит следующим образом:
A: Link {Color: White; текстовое-нет;}
A: Посещено {Color: White; текстовый-декоративный: нет;}
A: Hover {Color: White; текстовый-декоративный: нет;}
A: Active {Color: White; Text-Decorative: нет;}
li {float: left; дисплей: unline; фоновый цвет:#003366; ширина: 120px; text-align: center; margin: 2px; накладка: 10px 0 5px 0; позиция: относительно;}
.limouseover {фоновый цвет:#0033ff; color: red;}
.limouseout {фоновый цвет:#003366; цвет: черный;}
li ul {display: нет;
li ul li {маржа: 0px auto; border-top: 1px sold #006699;}
2. код JavaScript
Кода -копия выглядит следующим образом:
<сценарий языка = javascript>
Функциональное меню (Menu1) {
// переместить мышь в классную переключение и выключить и отобрать и отображать переключение.
if (document.getElementbyId (menu1)) {
var menu_ul = document.getElementById (Menu1);
if (menu_ul.getelementsbytagname ("li"). Length) {
var menu_li = menu_ul.getelementsbytagname ("li");
для (i in menu_li) {
menu_li [i] .onmouseover = function () {this.classname = "limouseover"; if (this.getelementsbytagname ("ul"). Length) {this.getElementsbytagname ("ul") [0] .style.display = "block";}}}}}}}}}}}}}}}}}
menu_li [i] .onmouseout = function () {this.classname = "limousout"; if (this.getelementsbytagname ("ul"). Length) {this.getElementsbytagname ("ul") [0] .style.display = "нет";}}}}}}}}}}}}}}}
}
}
}
}
</script>
3. HTML -код
Кода -копия выглядит следующим образом:
<ul id = menu1>
<li> <a href = ""> home </a> </li>
<li> <a href = ""> меню 1 меню 1 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> Submenu 2 </a> </li>
</ul>
</li>
<li> <a href = ""> меню 2 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> Submenu 2 </a> </li>
</ul>
</li>
</ul>
<script> var menu1 = новое меню ("Menu1"); </script>
иллюстрировать:
1. Учитывая, что страницы UL и LI используются чаще, вы можете добавлять #Menu1 перед CSS, чтобы ограничить объем стиля меню.
2. JS в основном слушает события движения и удаления мыши, а также переключается на стили Limousover и Limousout; В то же время изменяет атрибуты дисплея подменю для достижения функции отображения скрытых.
3. на той же странице можно называть многократно без конфликта. Код JavaScript в коде HTML является экземпляром вызова. Меню1 в предыдущем является произвольным именем переменной, а меню1 в скобках - это идентификатор на странице HTML.
Недостатки этого примера:
1. Mouseover, Mouseout и Sumenu Li из меню LI одинаковы, то есть, тот же цвет и шрифт, и нет отдельных настройки.
2. Поскольку он совместим с IE6 и IE7, позиция: Absolute используется, и добавляются левые и верхние атрибуты. Верх должен быть установлен в соответствии с общей высотой меню LI.