Mit Hilfe von kompetentem HTML-Code und einfachen CSS-Regeln können Sie ein Popup-Menü erstellen, ergänzen und modifizieren. Durch die Verwendung der Cascading Tables und Markup Language Tools können Sie sicherstellen, dass das Menü selbst in allen Browsern korrekt funktioniert.
Anleitung
Schritt 1
Halten Sie zunächst die Grundmenüleiste fest. Erstellen Sie eine spezielle nummerierte Liste mit einem Untermenü in einem Texteditor. Normalerweise wird für diese Zwecke "Notepad" verwendet. Das Untermenü fungiert als Element der übergeordneten Liste. Zum Beispiel: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
Schritt 2
Speichern Sie diese Liste in einer separaten HTML-Datei. Erstellen Sie dann eine.css-Datei. Geben Sie alle erforderlichen Stylesheet-Parameter ein. Tun Sie dies sehr vorsichtig, denn ein Fehler und das Popup-Menü wird nicht richtig angezeigt oder funktioniert überhaupt nicht.
Schritt 3
Entfernen Sie alle Aufzählungszeichen und Auffüllungen, die in der Aufzählungsliste angewendet wurden. Legen Sie die Breite des Menüs mit CSS-Tools fest: ul -style: none; width: 200px; }
Schritt 4
Markieren Sie die relative Position aller Elemente in der Liste mit einem Attribut namens position: ul li: relative; }
Schritt 5
Ordnen Sie dann das Untermenü an, dessen Elemente aus dem übergeordneten Menü nach rechts erscheinen, wenn sich der Mauszeiger über dem Element befindet: li ul: absolut; links: 199px; oben: 0; Anzeige: keine; }
Schritt 6
Das linke Attribut ist ein Pixel weniger als die Breite des Menüs selbst. Auf diese Weise können Popup-Elemente korrekt positioniert werden, ohne doppelte Ränder zu erstellen. Das Anzeigeattribut dient dazu, das Untermenü beim Öffnen der Seite auszublenden.
Schritt 7
Gestalten Sie die Links nach Bedarf mit den entsprechenden CSS-Optionen. Fügen Sie den Parameter display: block ein, damit die Links den gesamten für sie reservierten Platz einnehmen. Um das Menü erscheinen zu lassen, wenn sich der Mauszeiger darüber bewegt, geben Sie den folgenden Code ein: li: hover ul: block; }
Schritt 8
Legen Sie nach Bedarf zusätzliche Optionen für die Anzeige von Listenelementen und Links fest. Fügen Sie ein Attribut in die.html-Datei ein. Das Popup-Menü ist einsatzbereit.
