He estado bastante ocupado últimamente y no me he ocupado de mi blog durante varios meses. Ahora seleccionaré un ejemplo de menú creado recientemente en el proyecto y lo compartiré.
El diseño más comúnmente utilizado en el backend o en el sistema OA es a menudo un diseño de pantalla completa, que generalmente es un diseño con tres filas y dos columnas en la parte superior, media e inferior, con un encabezado, pie de página, menú izquierdo y un marco ifame. página de la derecha. Por lo tanto, el menú secundario plegable se usa a menudo. Este ejemplo es para implementar un menú plegable de búfer secundario más general, totalmente compatible y resaltable.
Características :
defecto :
Hablemos brevemente sobre algunas ideas simples y problemas encontrados al crear dicho menú.
Generalmente, al crear un efecto, mi proceso de producción es dibujar primero el contenido de la capa de estructura HTML, luego escribir el estilo y luego agregar algunos efectos de guinda al pastel, como efectos especiales JS, etc. No sé qué modelo de proceso tienen los expertos.
Capa estructural :
La idea de la capa estructural generalmente se basa en una comprensión perceptiva, generalmente con una representación, y en base a esta representación se construye la estructura HTML más concisa. Como se muestra en la imagen de arriba, la primera impresión que aparece es la de utilizar una lista desordenada de UL, pero... esta es una lista anidada de dos niveles. Este es el primer problema que debemos considerar.
Entonces la estructura debería verse así:
Cuando hay un menú de segundo nivel, es una estructura UL anidada. Cuando no hay un menú de segundo nivel, es la siguiente:
<ul clase="menú">
<li><a href="#none">Elementos del menú de primer nivel</a></li>
</ul>
Por supuesto, también puede utilizar el método de lista ordenada dl-dt-dd para crear esta estructura anidada, según su situación real.
Con la capa estructural más original, debes agregar algunos ganchos necesarios para que CSS y JS controlen estilos y efectos. Siempre me he opuesto al método de agregar muchos nombres de clases, lo que aumentará el tamaño de la página, por lo que es lo más. simplificado El enfoque consiste en aplicar uno o dos nombres de clase necesarios al contenedor principal y luego usar el selector secundario (grupo) para establecer varias configuraciones personalizadas en la hoja de estilo. En la estructura anterior, ¿cuántos nombres de clases se le ocurriría utilizar para definir todos los estilos?
Mi enfoque es utilizar sólo tres nombres de clases para controlar todas las visualizaciones de estilos. Uno es el UL de nivel superior, definido como clase = "menú", el otro es el contenedor del menú de segundo nivel, es decir, el UL anidado define una clase = "nivel2" y finalmente el elemento del menú de primer nivel. li define un class="level1" , con estos tres ganchos, puedes manipular el estilo de toda la estructura.
Capa de presentación :
La configuración de la hoja de estilo es muy simple. Lo único a tener en cuenta es que para facilitar que JS controle la visualización y ocultación del menú secundario y registre el estado de resaltado del elemento seleccionado actualmente, no utilizo el pseudo de desplazamiento. -clase para lograr el efecto de deslizamiento hacia adentro y hacia afuera del mouse y use JS para simularlo. Los códigos clave para controlar estilos usando JS son los siguientes:
Estilo de menú de primer nivel
/*Menú de primer nivel con estilo de tres estados, para llamadas JS*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif ) arriba a la izquierda sin repetición;}
.menu li.level1 a.hove{fondo-posición:izquierda -31px;}
.menu li.level1 a.cur{fondo-posición:izquierda -62px;}
Estilo de menú secundario
/*Estilo de tres estados del menú secundario para llamadas JS*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif ) arriba a la izquierda sin repetición;}
.menu li.level1 a.hove{fondo-posición:izquierda -31px;}
.menu li.level1 a.cur{fondo-posición:izquierda -62px;}
Capa de comportamiento :
Como se mencionó anteriormente, no hemos definido el efecto de tres estados del menú en la hoja de estilo, por lo que debemos vincular los eventos onmouseover, onmouseout y onclick a cada elemento del menú para simular este efecto. En la capa de estructura, no definimos el ID de este contenedor total, solo definimos un nombre de clase, por lo que agregamos un método getElementsByClassName() extendido en JS (gracias a mi amigo Situ Zhengmei) para obtener este objeto basado en la clase. nombre. Utilice cierres de bucle para vincular estos tres eventos.
No explicaré el código detallado uno por uno. Los comentarios en la demostración son muy claros. Descárguelo en su computadora local para navegar.
Si tiene alguna pregunta, publíquela y discútala en este blog. ¡Le deseo un feliz uso!
<li><a href="#none">Elementos del menú de primer nivel</a>
<ul>
<li><a href="#none">Elementos del menú de segundo nivel</a></li>
</ul>
</li>