1. Présentation
L'utilisation d'un menu flottant contextuel peut non seulement rendre le contenu de navigation du site Web plus clair, mais n'affecte pas non plus l'effet global de la page. Exécutez cet exemple, comme le montre la figure 1, lorsque la souris passe au titre du menu de navigation de premier niveau, le menu flottant apparaîtra pour afficher le sous-menu correspondant au menu. Lorsque la souris se déplace, le menu flottant sera caché.
2. Points techniques
Cet exemple est principalement dans JavaScript, modifiant dynamiquement la valeur d'attribut d'affichage de l'attribut de style de l'objet <div> tag pour afficher dynamiquement et masquer le menu de navigation secondaire. En fait, le contenu du menu secondaire dans chaque menu de niveau One a été ajouté à la balise <v> de la page Web, mais le <v> est défini pour le moment et ne sera pas affiché. Par conséquent, dans JavaScript, lorsque la souris passe par un titre de navigation, il n'a qu'à appeler l'objet <div> spécifié et à modifier dynamiquement son attribut d'affichage. L'attribut d'affichage contient deux valeurs d'attribut pour l'affichage et caché, à savoir aucune (caché) et le bloc (affichage).
Par exemple: il y a une balise <div> avec ID de MyDiv dans la page Web, et ce <div> est défini pour masquer. Dans JavaScript, la méthode d'écriture pour contrôler l'affichage de ce <v> est la suivante:
document.getElementById ("MyDiv"). Style.display = "Block";3. Implémentation spécifique
(1) Écrivez des méthodes JavaScript pour afficher et masquer. Le menu secondaire sera affiché lorsque la souris passe par le titre du menu principal, et le menu secondaire sera caché lorsque la souris déménagera. Le code clé est le suivant:
Fonction Change (img, subMenu, Path, Type) {img.src = "images /" + path + ". gif"; if (submenu! = null) {if (type == 0) {submenu.style.display = "non";} else {submenu.style.display = "block";;}}}(2) Dans la page, ajoutez le contenu du menu secondaire à chaque menu de navigation primaire dans la balise <v> à l'avance et définissez la balise <v> du menu secondaire à masquer. Le code clé est le suivant:
<div id = "nuser" style = "background-color: # f3ffd5; bordure: # 75a102 1px solide; width: 200px; position: absolu; affichage: aucun; gauche: 1px; top: 34px;"> <table cellpacing = "0" cellpadding = "0"> <tr> Informations </a> <a href = "#"> Ajouter de nouveaux employés </a> </td> </tr> </ table> </div> ... // Le contenu des autres menus secondaires est omis ici
(3) Définissez les événements OnMouseOver et OnMouseout dans le <td> du tableau du menu principal, appelez la méthode JavaScript Change () définie à l'étape (1), et modifiez dynamiquement l'affichage et la cachette du menu secondaire <v>. Le code clé est le suivant:
<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"> ... / omis </td>
Ce qui précède est le menu flottant pop-up de la barre de navigation qui vous a été présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!