1. Descripción general
El uso de un menú flotante emergente no solo puede aclarar el contenido de navegación del sitio web, sino que tampoco afecta el efecto general de la página. Ejecute este ejemplo, como se muestra en la Figura 1, cuando el mouse se mueve al título del menú de navegación de primer nivel, el menú flotante aparecerá para mostrar el submenú correspondiente al menú. Cuando el mouse se mueva, el menú flotante estará oculto.
2. Puntos técnicos
Este ejemplo se encuentra principalmente en JavaScript, cambiando dinámicamente el valor de atributo de visualización del atributo de estilo del objeto de etiqueta <div> para mostrar y ocultar dinámicamente el menú de navegación secundaria. De hecho, el contenido del menú secundario en cada menú de nivel Uno se ha agregado a la etiqueta <div> de la página web, pero el <div> se establece en este momento y no se mostrará. Por lo tanto, en JavaScript, cuando el mouse pasa a través de un título de navegación, solo necesita llamar al objeto <div> especificado y modificar dinámicamente su atributo de visualización. El atributo de visualización contiene dos valores de atributo para la pantalla y oculto, a saber, ninguno (oculto) y bloque (pantalla).
Por ejemplo: hay una etiqueta <div> con ID de MyDiv en la página web, y esto <Div> está configurado para ocultar. En JavaScript, el método de escritura para controlar la visualización de este <div> es el siguiente:
document.getElementById ("myDiv"). style.display = "bloque";3. Implementación específica
(1) Escriba métodos JavaScript para mostrar y ocultar. El menú secundario se mostrará cuando el mouse pase a través del título del menú principal, y el menú secundario se ocultará cuando el mouse se mueva. El código clave es el siguiente:
cambio de función (img, submenu, ruta, tipo) {img.src = "imágenes/"+path+". gif"; if (submenu! = null) {if (type == 0) {submenu.style.display = "none";} else {submitu.style.display = "bloque";}}}}(2) En la página, agregue el contenido del menú secundario a cada menú de navegación primaria en la etiqueta <Div> Ante la etiqueta, y configure la etiqueta <Div> del menú secundario para ocultar. El código clave es el siguiente:
<div id = "nuser" style = "de fondo de fondo:#f3ffd5; borde:#75a102 1px sólido; ancho: 200px; posición: absoluto; visual Información </a> <a href = "#"> Agregar nuevos empleados </a> </td> </tr> </table> </div> ... // El contenido de otros menús secundarios se omite aquí
(3) Configure los eventos de OnMouseOver y OnMouseOut en la <td> de la tabla del menú primario, llame al método JavaScript Change () definido en el paso (1) y cambie dinámicamente la pantalla y ocultación del menú secundario <VIV>. El código clave es el siguiente:
<td onMouseOver = "Change (imguser, nuser, 'nuser_r', 1)" onMouseOut = "Change (imguser, nuser, 'nuser_b', 0)" style = "cursor: hand;"> <img id = "imguser" src = "images/nuser_b.gif"> ... // the <siv> el código secundario del código de secundaria es omitido </td>
Lo anterior es el menú flotante emergente de la barra de navegación presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!