Das Menü wird verwendet, um dem Benutzer die Navigation durch die Abschnitte der Website zu erleichtern. Um die Aufmerksamkeit des Besuchers zu erregen, sollte das Menü funktional, einfach zu bedienen und gleichzeitig mit dem Design der gesamten Ressource kombinierbar sein.
Anweisungen
Schritt 1
Bevor Sie ein Menü erstellen, entscheiden Sie sich für dessen Typ. Sie können ein horizontales oder vertikales Dropdown-Feld erstellen, das dem Benutzer angezeigt wird, wenn der Benutzer mit dem Mauszeiger darüber fährt. Bei der Auswahl eines bestimmten Menüs können Sie sich davon leiten lassen, wie bequem es für die Besucher ist und wie es mit dem Design kombiniert wird.
Schritt 2
Nachdem Sie einen Menütyp ausgewählt haben, öffnen Sie Ihre Seitendatei mit dem Texteditor, den Sie zum Bearbeiten von HTML verwenden. Navigieren Sie zu dem gewünschten Codeabschnitt, in den Sie Ihr Schnittstellenelement einfügen möchten.
Schritt 3
Erstellen Sie danach eine Liste mit Optionen, indem Sie einen Block erstellen und eine nummerierte Liste mit zugewiesener ID erstellen. Beispielsweise:
- Link 1
- Verbindung 2
- Link 3
In diesem Beispiel habe ich eine Liste mit drei Elementen mit Aufzählungszeichen erstellt und in einer Div-Ebene mit der ID-Panel-ID platziert.
Schritt 4
Gehen Sie zum Abschnittsblock Ihrer Seite und erstellen Sie das entsprechende Cascading Stylesheet-Menü. Wenn Sie ein horizontales Menü erstellen möchten, können Sie das Inline-Attribut für die resultierende Liste einschließen:
#panel ul li {display: inline; }
Schritt 5
Um eine horizontale Linie über die gesamte Länge der Seite zu erstellen, können Sie den folgenden Code verwenden:
#panel ul {Rand-links: 0; Polsterung: 2px 0; }
Schritt 6
Dann können Sie die visuelle Aufteilung in Rechtecke vornehmen:
#panel ul li a {margin-left: 3px; Rand: 1px; Polsterung: 2px 3px; Hintergrund: blau; }
Dieser Code legt Texteinzüge von Rahmenelementen durch die Attribute margin-left und padding fest und legt außerdem eine Hintergrundfarbe für jedes der Listenelemente fest. In diesem Beispiel ist die Farbe blau, aber Sie können sie nach eigenem Ermessen ändern.
Schritt 7
Um auf das in der Registerkarte ausgewählte Element auf der aktuellen Seite zu verweisen, legen Sie die entsprechenden Parameter auf die offene Klasse fest:
#menu ul li a # öffnen {Hintergrund: rot; Rand-unten: 1px; }
Die aktuell im Panel ausgewählte Seite wird nun rot dargestellt.
Schritt 8
Speichern Sie die Änderungen an der Datei und überprüfen Sie die Funktionalität des geschriebenen Codes, indem Sie Ihre Seite über einen Browser öffnen. Um zusätzliche Anzeigeoptionen festzulegen, können Sie jederzeit CSS oder HTML hinzufügen, um das Erscheinungsbild des Objekts zu verbessern.
