Un menu déroulant combinant CSS et JS prend en charge les compétences traditionnelles des navigateurs_javascript

Première déclaration :

Bien que j'occupe un poste front-end web depuis de nombreuses années, les exigences techniques du poste ne sont pas élevées. HTML et CSS sont principalement utilisés, mais JavaScript est rarement original et est essentiellement copié et modifié. Par conséquent, lorsque je l'écris, je trouve que les bases ne sont pas solides en même temps, et j'y gagne beaucoup. .

Rendu :

Fin de bêtises, postons le code

1.code css

Copier le code Le code est le suivant :

a:link{color:white;text-decoration:none;}
a:visité{color:white;text-decorative:none;}
a:hover{color:white;text-decorative:none;}
a:active{color:white;text-decorative:none;}
li{float:left;display:inline;background-color:#003366;width:120px;text-align:center;margin:2px;padding:10px 0 5px 0;position:relative;}
.limouseover{background-color:#0033ff;color:red;}
.limouseout{background-color:#003366;color:black;}
li ul{display:none;width:120px;position:absolute;left:0;top:30px;}
li ul li{margin:0px auto;border-top:1px solid #006699;}

2.Code JavaScript

Copier le code Le code est le suivant :

menu de fonctions(menu1){
//Faites entrer et sortir la souris pour masquer le nom de classe et le sous-menu et changer d'affichage.
if (document.getElementById(menu1)){
var menu_ul=document.getElementById(menu1);
if (menu_ul.getElementsByTagName("li").length){
var menu_li=menu_ul.getElementsByTagName("li");
pour (je dans menu_li){
menu_li[i].onmouseover=function(){this.className="limouseover";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display=" bloquer";}}
menu_li[i].onmouseout=function(){this.className="limouseout";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display=" aucun";}}
}
}
}
}

3.code HTML

Copier le code Le code est le suivant :

• Page d'accueil
• Menu 1Menu 1
  • Sous-menu 1Sous-menu 1Sous-menu 1Sous-menu 1
  • Sous-menu 2
• Menu 2
  • Sous-menu 1Sous-menu 1Sous-menu 1Sous-menu 1
  • Sous-menu 2

<script>var menu1=nouveau menu("menu1");</script>

Description :

1. Étant donné que les pages ul et li sont couramment utilisées, vous pouvez ajouter #menu1 avant css pour limiter la portée du style de menu.

2. Le js écoute principalement les événements de déplacement et de suppression de la souris, et passe en conséquence aux styles limouseover et limouseout en même temps, il modifie l'attribut d'affichage du sous-menu pour obtenir la fonction d'affichage et de masquage.

3. La même page peut être appelée à plusieurs reprises sans conflit. Le code JavaScript dans le code html est l'instance appelante. Le menu1 précédent est un nom de variable arbitraire et le menu1 entre parenthèses est l'identifiant dans la page html.

Inconvénients de cet exemple :

1. Le survol et la sortie de la souris du menu li et du sous-menu li ont le même style, c'est-à-dire la même couleur et la même police, et aucun paramètre distinct n'est implémenté.

2. Puisqu'il doit être compatible avec Ie6 et IE7, lorsque position:absolute est utilisé, les attributs left et top sont ajoutés. Le top doit être défini en fonction de la hauteur totale du menu li.