Este artículo comparte el efecto de JavaScript Mouse deslizando para mostrar el menú secundario para su referencia. El contenido específico es el siguiente
1. Código de clave: Use el interruptor o si las declaraciones de juicio para cambiar el modo de visualización del menú secundario correspondiente para bloquear o ninguno
función selecttabmenu (i) {switch (i) {case 71: document.getElementById ("tabmenucon71"). style.display = "bloque"; document.getElementById ("tabmenucon72"). style.display = "none"; document.getElementById ("tabmenucon73"). style.display = "none"; document.getElementById ("tabmenucon74"). style.display = "none"; document.getElementById ("tabmenucon75"). style.display = "none"; document.getElementById ("tabmenucon76"). style.display = "none"; romper; ...}}2. Evento de enlace de navegación principal
<ul>
<li> <a href = "#" onMouseOver = "SELECTTABMENU (71)"> Inicio </a> </li>
3. Menú secundario
<ul id = "tabmenucon71"> <li> <a href = "#"> anuncio </a> </li> <li> << a href = "#"> Información </a> </li> </ul>
4. Código completo
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> menú de nivel de sello horizontal </title> <style type = "text/css"> *{padding: 0px; margen: 0px; } .navbar {altura: 30px; Color de fondo: #2B383E; Text-Align: Center; } ul {list-style: none; } .nav li {float: izquierda; } .nav li a {display: block; relleno: 0 20px; Altura: 30px; Línea de altura: 30px; Decoración de texto: ninguna; Color: #fff; } .nav li a: hover {background-color: #ffff; color: #4db6e7} .tabmenucon {claro: ambos; Pantalla: ninguno; } .Tabmenucon li {display: inline-block; } </style> <script type = "text/javaScript"> función selecttabmenu (i) {switch (i) {case 71: document.getElementById ("tabmenucon71"). style.display = "bloque"; document.getElementById ("tabmenucon72"). style.display = "none"; document.getElementById ("tabmenucon73"). style.display = "none"; document.getElementById ("tabmenucon74"). style.display = "none"; document.getElementById ("tabmenucon75"). style.display = "none"; document.getElementById ("tabmenucon76"). style.display = "none"; Caso 72: document.getElementById ("tabmenucon71"). style.display = "none"; document.getElementById ("tabmenucon72"). style.display = "bloque"; document.getElementById ("tabmenucon73"). style.display = "none"; document.getElementById ("tabmenucon74"). style.display = "none"; document.getElementById ("tabmenucon75"). style.display = "none"; document.getElementById ("tabmenucon76"). style.display = "none"; romper; Caso 73: document.getElementById ("TabMenucon71"). style.display = "Ninguno"; document.getElementById ("tabmenucon72"). style.display = "none"; document.getElementById ("tabmenucon73"). style.display = "bloque"; document.getElementById ("tabmenucon74"). style.display = "none"; document.getElementById ("tabmenucon75"). style.display = "none"; document.getElementById ("tabmenucon76"). style.display = "none"; romper; Caso 74: document.getElementById ("tabmenucon71"). style.display = "none"; document.getElementById ("tabmenucon72"). style.display = "none"; document.getElementById ("tabmenucon73"). style.display = "none"; document.getElementById ("tabmenucon74"). style.display = "bloque"; document.getElementById ("tabmenucon75"). style.display = "none"; document.getElementById ("tabmenucon76"). style.display = "none"; romper; Caso 75: document.getElementById ("TabMenucon71"). style.display = "Ninguno"; document.getElementById ("tabmenucon72"). style.display = "none"; document.getElementById ("tabmenucon73"). style.display = "none"; document.getElementById ("tabmenucon74"). style.display = "none"; document.getElementById ("tabmenucon75"). style.display = "bloque"; document.getElementById ("tabmenucon76"). style.display = "none"; romper; Caso 76: document.getElementById ("tabmenucon71"). style.display = "none"; document.getElementById ("tabmenucon72"). style.display = "none"; document.getElementById ("tabmenucon73"). style.display = "none"; document.getElementById ("tabmenucon74"). style.display = "none"; document.getElementById ("tabmenucon75"). style.display = "none"; document.getElementById ("tabmenucon76"). style.display = "bloque"; romper; }} </script> </head> <body> <div> <ul> <li> <a href = "#" onMouseOver = "selectTabMenu (71)"> home </a> </li> <li> <a href = "#" #MouseOver = "selecttabMenu (72)"> sobre la asociación </a> </li> <li> <a href = "#" onMouseOver = "selectTabMenu (73)"> Noticias de la asociación </a> </li> <li> <a href = "#" onMouseOver = "selecttabmenu (74)"> Actividades de asociación </a> </li> <li> <a href = "#" onMouseover = "selecttabmenu (75)"> miembros </a> </li> <li> <li> <li> <li> <li> href = "#" onMouseOver = "selectTabMenu (76)"> Espacio de recursos </a> </li> </ul> </div> <divi id = "tabmenucon"> <ul id = "tabmenucon71"> <li> <a href = "#"> anuncio </a> </li> <li> << a href = "#"#"#" </ul> <ul id="TabMenuCon72"> <li>Introduction</li> <li>Information</a></li> </ul> <ul id="TabMenuCon72"> <li>Introduction</li> <li>Organization</li> <li>Association Articles</li> </ul> <ul id="TabMenuCon73"> <li>Information</li> </ul> <ul id = "TabMenucon73"> <li> Información </li> </ul> <ul id = "TabMenucon73"> <li> Información </li> </ul> <ul Id = "Tabmenucon74"> <li> Mes de mantenimiento verdatorio </li> <li> Actividades de diseño gráfico </li> <li> Actividades de diseño de programas </li> <li> Outdoor Expansion </li> id = "TabMenucon75"> <li> Inicio de sesión de miembro </li> <li> Registro de miembros </li> <li> Tarifas de miembro de pago </li> <li> Gestión de la información del miembro </li> <li> Modifique la contraseña </li> </ul> <ul Id = "TabMenucon76"> <li> Tutorial de PS </li> <li> Tutorial de flash </li> </ul> </div> </body> </html>Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.