1. Übersicht
Die Verwendung eines Popup-schwimmenden Menüs kann nicht nur den Navigationsinhalt der Website klarer machen, sondern auch den Gesamteffekt der Seite beeinflussen. Führen Sie dieses Beispiel aus, wie in Abbildung 1 gezeigt, wenn sich die Maus zum Titel des Navigationsmenüs der ersten Ebene bewegt, wird das schwimmende Menü angezeigt, um das dem Menü entsprechende Untermenü anzuzeigen. Wenn sich die Maus auszieht, wird das schwimmende Menü versteckt.
2. Technische Punkte
Dieses Beispiel befindet sich hauptsächlich in JavaScript, wodurch der Anzeigeattributwert des Style -Attributs des <Div> -Tag -Objekts dynamisch geändert wird, um das sekundäre Navigationsmenü dynamisch anzuzeigen und auszublenden. Tatsächlich wurde der Inhalt des sekundären Menüs unter jedem Stufe 1 -Menü zum <Div> -Tag der Webseite hinzugefügt, der <div> wird jedoch zu diesem Zeitpunkt festgelegt und wird nicht angezeigt. Wenn die Maus in JavaScript einen Navigationstitel durchgeht, muss sie daher nur das angegebene <div> -Objekt aufrufen und sein Anzeigeattribut dynamisch ändern. Das Anzeigeattribut enthält zwei Attributwerte für die Anzeige und versteckt, nämlich keine (versteckt) und Block (Anzeige).
Zum Beispiel: Auf der Webseite befindet sich ein <div> -Tag mit ID von MyDiv, und dieses <Div> wird so eingestellt, dass sie sich ausblenden. In JavaScript lautet die Schreibmethode zur Steuerung der Anzeige dieses <div> wie folgt:
document.getElementById ("mydiv"). style.display = "block";A. Spezifische Implementierung
(1) Schreiben Sie JavaScript -Methoden zur Anzeige und ausblenden. Das sekundäre Menü wird angezeigt, wenn die Maus den primären Menütitel durchgeht und das sekundäre Menü versteckt wird, wenn sich die Maus auszieht. Der Schlüsselcode lautet wie folgt:
Funktionsänderung (IMG, Submenu, Pfad, Typ) {img.src = "Bilder/"+Path+". Gif"; if (submenu!(2) Fügen Sie auf der Seite den Inhalt des sekundären Menüs in jedem primären Navigationsmenü im <Div> -Tag im Voraus hinzu und legen Sie das <Div> -Tag des sekundären Menüs auf, um sich auszublenden. Der Schlüsselcode lautet wie folgt:
<div id="NUser" style="background-color:#F3FFD5; border:#75A102 1px solid; width:200px; position:absolute; display:none; left:1px; top: 34px;"><table cellpacing="0" cellpadding="0"><tr><td align="center"><a href="#">Browse employee Informationen </a> <a href = "#"> fügen Sie neue Mitarbeiter hinzu </a> </td> </tr> </table> </div> ... // Der Inhalt anderer sekundärer Menüs wird hier weggelassen
(3) Setzen Sie OnmouseOver- und Onmouseout -Ereignisse in der <td> der Tabelle des Primärmenüs, rufen Sie die in Schritt (1) definierte JavaScript -Änderung () -Methode auf und ändern Sie die Anzeige und das Verstecken des sekundären Menüs <div> dynamisch. Der Schlüsselcode lautet wie folgt:
<td onmouseover = "Änderung (imguser, nuser, 'nuser_r', 1)" onmouseout = "Änderung (Imguser, Nuser, 'nuser_b', 0)" style = "cursor: hand; weggelassen </td>
Das obige ist das Popup-schwimmende Menü der vom Herausgeber vorgestellten Navigationsleiste. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!