L'effet de surbrillance du menu est une méthode de conception souvent utilisée dans chaque page Web. Elle peut efficacement permettre aux utilisateurs de connaître la colonne dans laquelle ils se trouvent actuellement. C'est aussi la méthode que j'utilise souvent. Généralement, les pages Web ont au moins deux niveaux de menus. Le premier est le menu de la barre de navigation générale en haut et l'autre est le menu de navigation des catégories à gauche. Il est généralement nécessaire que l'état actuel puisse également être enregistré dans le menu de deuxième niveau lorsque le menu de premier niveau est mis en surbrillance.
Si la zone d'en-tête contenant le menu supérieur est fixe, c'est-à-dire qu'elle n'a pas besoin d'être rechargée à chaque fois, dans ce cas, elle peut être facilement implémentée en utilisant du CSS pur ou du JS, mais aujourd'hui je ne vais pas en parler. Ce dont nous parlons aujourd'hui, c'est que le menu de premier niveau et le menu de deuxième niveau sont chargés dynamiquement dans chaque page , c'est-à-dire qu'ils sont chargés en tant que contrôles utilisateur. Dans ce cas, il est difficile d'enregistrer l'état en surbrillance du menu.
Bien sûr, vous pouvez dire que vous pouvez utiliser des cookies pour enregistrer le dernier état mis en surbrillance enregistré lors du chargement de chaque page. Oui, il peut effectivement être enregistré, mais cette méthode posera des problèmes dans certaines applications complexes contenant de nombreuses sous-pages. beaucoup de confusion et de problèmes pour les utilisateurs. Par exemple, pendant le cycle de vie du cookie, lorsque le projet est rouvert, le cycle de vie du cookie n'est pas complètement terminé. Il enregistre également le dernier état enregistré et l'adresse de la page a changé à ce moment-là, donc le menu actuellement en surbrillance La page pointée. ce n'est pas ce que l'utilisateur veut voir. La pratique a prouvé que quelle que soit la durée du cycle de vie de ce cookie, il ne peut pas résoudre parfaitement le problème des utilisateurs actualisant malicieusement la page. C'est en effet une mauvaise chose !
Alors, existe-t-il une meilleure façon de résoudre cette situation ?
La réponse est oui. Nous savons que le moyen le plus idéal pour résoudre ce problème est de définir explicitement le style de surbrillance du menu actuel en fonction de l'adresse URL de la page lors du chargement de chaque page . Cela résout parfaitement ce type de problème, et de cette façon, peu importe la malveillance avec laquelle l'utilisateur clique sur le bouton d'actualisation, l'état mis en surbrillance reste inchangé. Une fois que vous connaîtrez le principe, il sera beaucoup plus facile à mettre en œuvre.
couche structurelle
Couche de structure de menu de premier niveau :
On constate que dans ce menu de premier niveau, l'adresse du lien n'a généralement aucune valeur de paramètre. La couche structurelle du menu secondaire :
Différent du menu de premier niveau, nous ajoutons deux valeurs de paramètre à l'adresse du lien dans le menu de deuxième niveau. Le paramètre pId pointe vers le numéro de série du menu supérieur de premier niveau et sId est le numéro de séquence du menu. menu lui-même. Nous définissons deux identifiants différents pour le conteneur total ul de ces deux menus. Ils doivent être appelés en JS, ils ne doivent donc pas manquer.
calque de style
Concernant le style, il n'y a en fait rien de spécial. Vous pouvez le définir selon le style que vous souhaitez. La seule chose à noter est que nous devons définir les trois styles d'état de la surbrillance du menu séparément pour l'appel dynamique par JS. .
/*Trois paramètres de style pour le menu de premier niveau*/
#menu li a.normal{background:#fff;}//Style normal
#menu li a.over{background:#00ff00;} //Style de roulement
#menu li a.cur{background:#ff0000;color:#fff;} //Style de surbrillance
/*Trois paramètres de style pour le menu secondaire*/
#othermenu li a.normal{background:#fff;} //Style normal
#othermenu li a.over{background:#AA7F00;color:#fff;} //Style de roulement
#othermenu li a.cur{background:#7F0000;color:#fff;} //Style de surbrillance