Mit Hilfe von gutem HTML-Code und einfachen CSS-Regeln können Sie ein schönes Popup-Menü erstellen, das sich leicht ändern und ergänzen lässt. Durch die Verwendung von Auszeichnungssprache und Cascading Style Sheets können Sie sicherstellen, dass Menüs in allen Browsern korrekt funktionieren.
Anweisungen
Schritt 1
Bauen Sie zunächst die Grundstruktur Ihres Menüs auf. Öffnen Sie einen Texteditor und erstellen Sie eine nummerierte Liste mit einem Untermenü, das als übergeordnetes Listenelement fungiert. Beispielsweise:
-
Erstes Element
- Dropdown-Element
- Dropdown2
Schritt 2
Speichern Sie die generierte Liste in einer separaten HTML-Datei. Erstellen Sie als Nächstes eine Datei mit der Erweiterung.css und geben Sie alle Stylesheet-Parameter ein.
Schritt 3
Entfernen Sie alle Auffüllungen und Aufzählungszeichen, die in der Aufzählungsliste gelten, und legen Sie die Menübreite mit CSS-Tools fest: ul {list-style: none;
Breite: 200px; }
Schritt 4
Stellen Sie die relative Position aller Elemente in der Liste mit dem Positionsattribut ein: ul li {position: relative; }
Schritt 5
Als nächstes müssen Sie ein Untermenü entwerfen, dessen Elemente in dem Moment, in dem sich der Mauszeiger auf dem Element befindet, rechts neben dem übergeordneten Menü erscheinen: li ul {position: absolut;
links: 199px;
oben: 0;
Anzeige: keine; } Das linke Attribut ist ein Pixel weniger als die Breite des Menüs selbst. Dadurch können die Popup-Elemente intelligent positioniert werden, ohne doppelte Ränder zu erzeugen. Das Anzeigeattribut wird verwendet, um das Untermenü beim Öffnen der Seite auszublenden.
Schritt 6
Gestalten Sie die Links wie gewünscht mit den entsprechenden CSS-Optionen. Fügen Sie den Parameter display: block ein, damit jeder Link den gesamten dafür reservierten Platz einnimmt.
Schritt 7
Damit das Menü in dem Moment erscheint, in dem sich der Cursor darüber befindet (Hover), müssen Sie den Code eingeben: li: hover ul {display: block; }
Schritt 8
Legen Sie nach Bedarf zusätzliche Optionen zum Anzeigen von Links und Listenelementen fest.
Schritt 9
Das Popup-Menü ist fertig. Jetzt muss noch das Attribut in die.html-Datei aufgenommen werden: Popup-Menü
