Zuerst deklarieren:
Obwohl ich seit vielen Jahren in der Front-End-Position des Webs gearbeitet habe, habe ich keine hohen technischen Anforderungen für die Position. HTML und CSS werden häufiger verwendet, und es gibt nur sehr wenige originelle JavaScript, und sie werden im Grunde genommen kopieren modifiziert. Als ich wirklich schreibe, stellte ich fest, dass die Stiftung nicht solide war und ich gelernt und praktizierte und viel gewann.
Reproduktionsbild:
Kein Unsinn mehr, Postleitzahl
1. CSS -Code
Die Codekopie lautet wie folgt:
A: Link {Farbe: Weiß; Textdekoration: Keine;}
A: besucht {Farbe: weiß; Textdekorative: Keine;}
A: Hover {Farbe: Weiß; Textdekorativ: Keine;}
A: Active {Color: White; Text-Decorativ: Keine;}
li {float: links; Anzeige: Inline; Hintergrundfarbe:#003366; Breite: 120px; Text-Align: Mitte; Rand: 2px; Padding: 10px 0 5px 0; Position: Relativ;}
.Limouseover {Hintergrundfarbe:#0033ff; Farbe: rot;}
.Limouseout {Hintergrundfarbe:#003366; Farbe: schwarz;}
li ul {display: keine; width: 120px; Position: absolut; links: 0; ober: 30px;}
li ul li {margin: 0px auto; border-top: 1px fest #006699;}
2. JavaScript -Code
Die Codekopie lautet wie folgt:
<script Language = JavaScript>
Funktionmenü (Menü1) {
// Schalten Sie die Maus ein- und aus dem Klassenname ein und verstecken Sie und anzeigen Sie um.
if (document.getElementById (Menü1)) {
var mseu_ul = document.getElementById (Menü1);
if (Menü_ul.getElementsByTagName ("li"). Länge) {
var mseu_li = mseu_ul.getElementsByTagName ("li");
für (i in Menü_li) {
Menus_li [i] .onmouseover = function () {this.className = "limouseover"; if (this.getElementsByTagName ("ul"). Länge) {this.getElementsByTagName ("ul") [0] .style.display = "Block";}}}}}}}}
menu_li[i].onmouseout=function(){this.className="limouseout";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="none";}}
}
}
}
}
</script>
3. HTML -Code
Die Codekopie lautet wie folgt:
<ul id = Menü1>
<li> <a href = ""> home </a> </li>
<li> <a href = ""> Menü 1 Menü 1 </a>
<ul>
<li> <a href = ""> submenu1subMenu1SubMenu1SubMenu1SubMenu1SubMenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
<li> <a href = ""> Menü 2 </a>
<ul>
<li> <a href = ""> submenu1subMenu1SubMenu1SubMenu1SubMenu1SubMenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
</ul>
<Script> var mseu1 = neues Menü ("Menü1"); </script>
veranschaulichen:
1. In Anbetracht der Tatsache, dass die UL- und Li -Seiten häufiger verwendet werden, können Sie #Menü1 vor CSS hinzufügen, um den Umfang des Menüstils zu begrenzen.
2. JS hört hauptsächlich auf Mausereignisse und Entfernungsereignisse zu und wechselt auf Limouseover- und Limouseout -Stile. Gleichzeitig ändert sich die Anzeigeattribute des Untermenus, um die Funktion der Versteckung anzuzeigen.
3. Die gleiche Seite kann wiederholt ohne Konflikt aufgerufen werden. Der JavaScript -Code im HTML -Code ist eine Anrufinstanz. Das Menü1 im vorherigen ist ein willkürlicher Variablenname, und das Menü1 in den Klammern ist die ID auf der HTML -Seite.
Nachteile dieses Beispiels:
1. Die Mausover, Mausout und Untermenü von Menü li sind die gleichen, dh dieselbe Farbe und Schriftart, und es gibt keine separate Einstellung.
2. Da es mit IE6 und IE7 kompatibel ist, wird Position: Absolute verwendet und die linken und oberen Attribute werden hinzugefügt. Die Oberseite sollte gemäß der Gesamthöhe des Menüs li eingestellt werden.