Déclare d'abord:
Bien que j'aie travaillé en position frontale du Web depuis de nombreuses années, je n'ai aucune exigence technique élevée pour le poste. Le HTML et le CSS sont utilisés plus souvent, et il y a très peu de JavaScript original, et ils sont essentiellement modifiés en copie. Donc, quand j'écris vraiment, j'ai trouvé que la fondation n'était pas solide, et j'ai appris et pratiqué, et j'ai gagné beaucoup.
Image de reproduction:
Plus de non-sens, code postal
1. Code CSS
La copie de code est la suivante:
a: lien {couleur: blanc; text-décoration: aucun;}
A: Visité {couleur: blanc; text-décoratif: aucun;}
A: Hover {couleur: blanc; text-décoré: aucun;}
A: actif {couleur: blanc; text-décoratif: aucun;}
li {float: gauche; affichage: en ligne; fond-couleur: # 003366; largeur: 120px; texte-adign: centre; marge: 2px; padding: 10px 0 5px 0; position: relative;}
.limouseOver {fond de fond: # 0033ff; couleur: rouge;}
.liMouseout {fond-couleur: # 003366; couleur: noir;}
li ul {affichage: aucun; largeur: 120px; position: absolue; gauche: 0; top: 30px;}
li ul li {margin: 0px auto; border-top: 1px solide # 006699;}
2. Code javascript
La copie de code est la suivante:
<Script Language = JavaScript>
menu de fonction (menu1) {
// Déplacez la souris dans et hors de la classe de classe bascule et masquez et affichez la baisse.
if (document.getElementById (menu1)) {
var menu_ul = document.getElementById (menu1);
if (menu_ul.getElementsByTagName ("li"). Longueur) {
var menu_li = menu_ul.getElementsByTagName ("li");
pour (i dans 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 = "limouseout"; if (this.getElementsByTagName ("ul"). Length) {this.getElementsByTagName ("ul") [0] .style.display = "None";}}
}
}
}
}
</cript>
3. Code html
La copie de code est la suivante:
<ul id = menu1>
<li> <a href = ""> Accueil </a> </li>
<li> <a href = ""> menu 1 menu 1 </a>
<ul>
<li> <a href = ""> submenu1SubMenu1SubMenu1SubMenu1SubMenu1SubMenu1 </a> </li>
<li> <a href = ""> Sous-menu 2 </a> </li>
</ul>
</li>
<li> <a href = ""> menu 2 </a>
<ul>
<li> <a href = ""> submenu1SubMenu1SubMenu1SubMenu1SubMenu1SubMenu1 </a> </li>
<li> <a href = ""> Sous-menu 2 </a> </li>
</ul>
</li>
</ul>
<cript> var menu1 = nouveau menu ("menu1"); </cript>
illustrer:
1. Étant donné que les pages UL et Li sont utilisées plus souvent, vous pouvez ajouter # menu1 avant CSS pour limiter la portée du style de menu.
2. JS écoute principalement les événements de mouvement et de suppression de la souris, et passe aux styles LimouseOver et Limouseout; Dans le même temps, modifie les attributs d'affichage du sous-menu pour atteindre la fonction de l'affichage caché.
3. La même page peut être appelée à plusieurs reprises sans conflit. Le code JavaScript dans le code HTML est une instance d'appel. Le menu1 dans le précédent est un nom de variable arbitraire, et le menu1 dans les supports est l'ID de la page HTML.
Inconvénients de cet exemple:
1. La souris, la souris et le sous-menu de menu Li sont les mêmes, c'est-à-dire la même couleur et la même police, et il n'y a pas de paramètre séparé.
2. Puisqu'il est compatible avec IE6 et IE7, Position: Absolute est utilisé et les attributs gauche et supérieur sont ajoutés. Le haut doit être réglé en fonction de la hauteur globale du menu Li.