Cet article partage l'effet de la souris JavaScript qui glisse pour afficher le menu secondaire pour votre référence. Le contenu spécifique est le suivant
1. Code de clé: utilisez le commutateur ou si les instructions de jugement pour modifier le mode d'affichage du menu secondaire correspondant à bloquer ou aucun
fonction selectTabMenu (i) {switch (i) {case 71: document.getElementById ("tabMenUcon71"). style.display = "block"; document.getElementById ("TabMenUcon72"). Style.display = "Aucun"; document.getElementById ("tabMenUcon73"). style.display = "Aucun"; document.getElementById ("TabMenUcon74"). Style.display = "Aucun"; document.getElementById ("tabMenUcon75"). style.display = "Aucun"; document.getElementById ("TabMenUcon76"). Style.display = "Aucun"; casser; ...}}2. Événement de liaison de la navigation principale
<ul>
<li> <a href = "#" onMouseover = "selecttabmenu (71)"> home </a> </li>
3. Menu secondaire
<ul id = "tabMenUcon71"> <li> <a href = "#"> annonce </a> </li> <li> << a href = "#"> information </a> </li> </ul>
4. Code complet
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <ititle> Menu de niveau de navigation horizontale </title> <style type = "text / css"> * {padding: 0px; marge: 0px; } .navbar {hauteur: 30px; Color d'arrière-plan: # 2B383E; Texte-aligne: Centre; } ul {list-style: Aucun; } .nav li {float: gauche; } .nav li a {affichage: bloc; rembourrage: 0 20px; hauteur: 30px; hauteur de ligne: 30px; Décoration du texte: aucune; Couleur: #FFF; } .nav li a: hover {background-Color: #ffff; Couleur: # 4DB6E7} .tabmenucon {Clear: les deux; Affichage: aucun; } .Tabmenucon li {affichage: bloc en ligne; } </ style> <script type = "text / javascript"> function selectTabMenu (i) {switch (i) {case 71: document.getElementById ("tabMenUcon71"). style.display = "block"; document.getElementById ("TabMenUcon72"). Style.display = "Aucun"; document.getElementById ("tabMenUcon73"). style.display = "Aucun"; document.getElementById ("TabMenUcon74"). Style.display = "Aucun"; document.getElementById ("tabMenUcon75"). style.display = "Aucun"; document.getElementById ("TabMenUcon76"). Style.display = "Aucun"; Cas 72: document.getElementById ("tabMenUcon71"). style.display = "Aucun"; document.getElementById ("TabMenUcon72"). Style.display = "Block"; document.getElementById ("tabMenUcon73"). style.display = "Aucun"; document.getElementById ("TabMenUcon74"). Style.display = "Aucun"; document.getElementById ("tabMenUcon75"). style.display = "Aucun"; document.getElementById ("TabMenUcon76"). Style.display = "Aucun"; casser; Cas 73: document.getElementById ("TabMenUcon71"). Style.display = "Aucun"; document.getElementById ("TabMenUcon72"). Style.display = "Aucun"; document.getElementById ("TabMenUcon73"). Style.display = "Block"; document.getElementById ("TabMenUcon74"). Style.display = "Aucun"; document.getElementById ("tabMenUcon75"). style.display = "Aucun"; document.getElementById ("TabMenUcon76"). Style.display = "Aucun"; casser; Cas 74: document.getElementById ("TabMenUcon71"). style.display = "Aucun"; document.getElementById ("TabMenUcon72"). Style.display = "Aucun"; document.getElementById ("tabMenUcon73"). style.display = "Aucun"; document.getElementById ("TabMenUcon74"). Style.display = "Block"; document.getElementById ("tabMenUcon75"). style.display = "Aucun"; document.getElementById ("TabMenUcon76"). Style.display = "Aucun"; casser; Cas 75: document.getElementById ("TabMenUcon71"). Style.display = "Aucun"; document.getElementById ("TabMenUcon72"). Style.display = "Aucun"; document.getElementById ("tabMenUcon73"). style.display = "Aucun"; document.getElementById ("TabMenUcon74"). Style.display = "Aucun"; document.getElementById ("TabMenUcon75"). Style.display = "Block"; document.getElementById ("TabMenUcon76"). Style.display = "Aucun"; casser; Cas 76: document.getElementById ("tabMenUcon71"). style.display = "Aucun"; document.getElementById ("TabMenUcon72"). Style.display = "Aucun"; document.getElementById ("tabMenUcon73"). style.display = "Aucun"; document.getElementById ("TabMenUcon74"). Style.display = "Aucun"; document.getElementById ("tabMenUcon75"). style.display = "Aucun"; document.getElementById ("TabMenUcon76"). Style.display = "Block"; casser; }} </ script> </ head> <body> <div> <ul> <li> <a href = "#" onMouseover = "selecttabmenu (71)"> home </a> </li> <li> <a href = "#" onMouseOver = "selectTabMenu (72)"> sur l'association </a> onMouseover = "selectTabMenu (73)"> Association News </a> </li> <li> <a href = "#" onMouseover = "selecttabmenu (74)"> Activités d'association </a> </li> <li> <a href = "#" OnMouseOver = "SelectTabmenu (75)"> membres </a> href="#" onmouseover="selectTabMenu(76)">Resource Space</a></li> </ul> </div> <div id="TabMenuCon"> <ul id="TabMenuCon71"> <li><a href="#">Announcement</a></li> <li><<a href="#">Information</a></li> </ul> <ul id = "tabMenUcon72"> <li> Introduction </li> <li> Information </a> </li> </ul> <ul id = "Tabmenucon72"> <li> Introduction </li> <li> Organisation </li> <li> Articles d'association </li> </ul> <ul ID = "Tabmecon73"> </li> </ul> <ul ID = "Tabmecon73"> </li> </ul> </ul> ID = "TabMenUcon73"> <li> Informations </li> </ul> <ul id = "TabMenUcon73"> <li> Informations </li> </ul> <ul id = "TabMenUcon74"> <li> Mois de maintenance verdatoire </li> <li> Activités de conception graphique </li> </li> Activités de conception de programme </li> <li> id = "TabMenUcon75"> <li> Connexion des membres </li> <li> Enregistrement des membres </li> <li> Frais de membre Pay Fees </li> <li> Gestion de l'information des membres </li> <li> Modifier le mot de passe </li> </ul> <ul Id = "TabmeNon76"> <li> PS Tutorial </li> <li> Flash Tutorial </li> </ul> </div> </ body> </html>Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.