El efecto de resaltado del menú es un método de diseño que se utiliza a menudo en todas las páginas web. Puede permitir a los usuarios saber de forma eficaz en qué columna se encuentran actualmente. Este es también el método que uso a menudo. Generalmente, las páginas web tienen al menos dos niveles de menús. El primero es el menú de la barra de navegación general en la parte superior y el otro es el menú de navegación de categorías a la izquierda. Generalmente se requiere que el estado actual también se pueda registrar en el menú de segundo nivel cuando el menú de primer nivel está resaltado.
Si el área del encabezado que contiene el menú superior es fija, es decir, no es necesario recargarlo cada vez, en este caso se puede implementar fácilmente usando CSS o JS puro, pero hoy no voy a hablar de esto. De lo que estamos hablando hoy es de que el menú de primer nivel y el menú de segundo nivel se cargan dinámicamente en cada página , es decir, se cargan como controles de usuario. En este caso, es difícil registrar el estado resaltado del menú.
Por supuesto, puede decir que puede usar cookies para registrar el último estado resaltado registrado cuando se carga cada página. Sí, de hecho se puede registrar, pero este método causará problemas en algunas aplicaciones complejas que contienen muchas subpáginas. Mucha confusión y problemas para los usuarios. Por ejemplo, durante el ciclo de vida de la cookie, cuando se vuelve a abrir el proyecto, el ciclo de vida de la cookie no ha finalizado por completo. También registra el último estado guardado y la dirección de la página ha cambiado en este momento, por lo que el menú actualmente resaltado La página señalada. to no es lo que el usuario quiere ver. La práctica ha demostrado que no importa cuánto tiempo establezca el ciclo de vida de esta cookie, no puede resolver perfectamente el problema de que los usuarios actualicen la página de forma maliciosa. ¡Esto es realmente algo malo!
Entonces, ¿existe una mejor manera de resolver esta situación?
La respuesta es sí. Sabemos que la forma más ideal de resolver este problema es establecer explícitamente el estilo de resaltado del menú actual de acuerdo con la dirección URL de la página cuando se carga cada página . Esto resuelve perfectamente este tipo de problemas y, de esta manera, por muy maliciosamente que el usuario haga clic en el botón de actualización, el estado resaltado permanece sin cambios. Una vez que conozca el principio, será mucho más fácil de implementar.
capa estructural
Capa de estructura de menú de primer nivel:
Se puede ver que en este menú de primer nivel, la dirección del enlace generalmente no tiene valor de parámetro. La capa estructural del menú secundario:
A diferencia del menú de primer nivel, agregamos dos valores de parámetro a la dirección del enlace en el menú de segundo nivel. El parámetro pId apunta al número de serie del menú superior de primer nivel, y sId es el número de secuencia del. menú en sí. Configuramos dos ID diferentes para el contenedor ul total de estos dos menús. Deben llamarse en JS, por lo que no deben faltar.
capa de estilo
Con respecto al estilo, en realidad no tiene nada de especial. Puede configurarlo con el estilo que desee. Lo único que debe tenerse en cuenta es que debemos configurar los tres estilos de estado del menú resaltado por separado para la llamada dinámica por parte de JS. .
/*Tres configuraciones de estilo para el menú de primer nivel*/
#menu li a.normal{fondo:#fff;}//Estilo normal
#menu li a.over{background:#00ff00;} //Estilo rodante
#menu li a.cur{background:#ff0000;color:#fff;} //Estilo de resaltado
/*Tres configuraciones de estilo para el menú secundario*/
#othermenu li a.normal{fondo:#fff;} //Estilo normal
#othermenu li a.over{background:#AA7F00;color:#fff;} //Estilo rodante
#othermenu li a.cur{background:#7F0000;color:#fff;} //Estilo de resaltado