Erstellen einer Navigationsleiste. Navigationsleisten mit CSS Wie man eine HTML-Navigation macht

Ein einfach zu bedienendes Navigationssystem ist für jede Website sehr wichtig.

Mit CSS können Sie langweilige HTML-Menüs in großartig aussehende Navigationsleisten verwandeln.

Navigationsleisten = Linkliste

Die Navigationsleiste verwendet Standard-HTML als Basis.

In unseren Beispielen werden wir eine Navigationsleiste aus einer regulären HTML-Liste erstellen.

Die Navigationsleiste ist im Wesentlichen eine Liste von Links, verwendet also Elemente

ganz logisch:

Beispiel

Kommentar: Geben Sie für Elemente immer eine Breite an in der vertikalen Navigationsleiste. Wenn Sie die Breite weglassen, zeigt IE6 möglicherweise unerwartete Ergebnisse an.

Horizontale Navigationsleiste

Es gibt zwei Möglichkeiten, eine horizontale Navigationsleiste zu erstellen. Verwendungszweck eingebettet oder schwebend Artikel auflisten.

Beide Methoden funktionieren hervorragend, aber wenn Sie möchten, dass alle Links dieselbe Größe haben, müssen Sie die Float-Methode verwenden.

Eingebaute Listenelemente

Eine Möglichkeit, eine horizontale Navigationsleiste zu erstellen, besteht darin, Elemente zu erstellen

Inline, zusätzlich zum obigen "Standard" -Code:

Beispiel Erklärung:

Anzeige: Inline; - Standardartikel
sind gesperrt. Hier entfernen wir Zeilenumbrüche vor und nach jedem Listenelement, um sie in derselben Zeile anzuzeigen.

Schwebende Listenelemente

Beispiel

li
{
Schwimmer:links;
}
a
{
Bildschirmsperre;
Breite: 80px;
Hintergrundfarbe:#dddddd;
}

Einer der am schwierigsten anzupassenden Teile einer Website ist die Navigation. Dieser Teil ist sehr wichtig für die Benutzerfreundlichkeit der Website, da er eine der Möglichkeiten ist, wie Benutzer von Seite zu Seite navigieren.

Es gibt viele Möglichkeiten, eine ansprechende Site-Navigation zu erstellen, und mehrere jQuery-Plug-ins sind sogar in der Lage, dies sofort zu tun.

Anstatt jedoch eine vorgefertigte Lösung zu verwenden, gehen wir in diesem Tutorial durch den Prozess des Erstellens einer einfachen Navigation von Grund auf mit CSS3-Medienabfragen und ein wenig, um sie auf einem kleinen Smartphone-Bildschirm richtig hinzubekommen.

Fangen wir also an.

HTML

Stile

In diesem Abschnitt wenden wir Stile auf die Navigation an. Der Stil hier ist rein dekorativ, Sie können beliebige Farben wählen. Aber in diesem Fall hat der Körper eine zarte cremige Farbe.

Körper ( Hintergrundfarbe : #ece8e5 ; )

Das nav-Tag, das die Navigation definiert, wird im Browserfenster zu 100 % in voller Breite angezeigt, während die ul, die unsere Hauptmenü-Links enthält, 600 Pixel breit ist.

Nav (Höhe: 40px; Breite: 100 % ; Hintergrund : # 455868 ; Schriftgröße: 11pt Schriftfamilie : "PT Sans" , Arial, serifenlos ; Schriftdicke: fett ; Position : relativ ; Rand unten : 2px solide # 283744 ; ) nav ul ( padding : 0 ; margin : 0 auto ; width : 600px ; height : 40px ; )

Wir wenden dann die left float-Eigenschaft auf die Menü-Links an, sodass sie horizontal in einer Reihe stehen, aber die Anwendung dieser Eigenschaft auf ein Element führt dazu, dass das übergeordnete Element zusammenfällt.

Nav li ( display : inline ; float : left ; )

Wie Sie anhand des obigen HTML-Markups bemerken, haben wir der Klasseneigenschaft für nav und ul bereits einen Clearfix hinzugefügt, um Platz zu schaffen, wenn wir Elemente darin mit dem CSS-Clearfix-Hack schweben lassen. Lassen Sie uns also die folgenden Stilregeln zum Stylesheet hinzufügen.

Clearfix :before , .clearfix :after ( Inhalt : " " ; Anzeige : Tabelle; ) .clearfix :after ( clear : both ; ) .clearfix ( *zoom: 1 ; )

Da wir sechs Menü-Links haben und dem Container auch eine Breite von 600 Pixel gegeben haben, ist jeder Menü-Link 100 Pixel breit.

Nav a ( color : #fff ; display : inline-block ; width : 100px ; text-align : center ; text-decoration : none ; line-height : 40px ; text-shadow : 1px 1px 0px # 283744 ; }

Die Menülinks werden mit Ausnahme des letzten durch einen rechten Rand von 1 Pixel getrennt. Unter Berücksichtigung des Box-Modells aus dem letzten Tutorial wird die Breite des Menülinks durch das Hinzufügen des Rahmens um 1 Pixel erhöht, sodass er 101 Pixel beträgt. Daher ändern wir hier das Box-Sizing-Modell in Border-Box, um es beizubehalten die Menülinkbreite bei 100px.

Nav li a (Rand rechts: 1px solid # 576979 ; box-sizing:border-box ; -moz-box-sizing:border-box ; -webkit-box-sizing:border-box ; ) nav li:last-child a ( border-right : 0 ; )

Nav a:hover , nav a:active ( Hintergrundfarbe : #8c99a4 ; )

Nav a#pull ( Anzeige : keine ; )

An diesem Punkt gestalten wir nur den Navigationsblock, und es passiert nichts, wenn wir die Größe des Browserfensters ändern. Kommen wir also zum nächsten Schritt.

Medien-Anfragen

Menüanzeige

An diesem Punkt ist das Menü immer noch ausgeblendet und wird nur sichtbar, wenn es benötigt wird, nachdem auf den Menü-Link getippt oder geklickt wurde, und wir können diesen Effekt mit slideToggle() von jQuery erzielen.

$(function() ( var pull = $("#pull" ) ; menu = $("nav ul" ) ; menuHeight = menu.height () ; $(pull) .on ("click" , function(e) ( e.preventDefault () ; menu.slideToggle () ; ) ) ; ) );

Wenn Sie jedoch die Größe des Fensters auf einem kleinen Bildschirm direkt nach dem Ein- und Ausblenden des Menüs ändern, wird das Menü ausgeblendet, da der von jQuery generierte display: none -Stil immer noch auf das Element angewendet wird.

Also müssen wir diesen Stil entfernen, wenn wir die Größe des Fensters wie folgt ändern:

$(window) .resize (function() ( var w = $(window) .width () ; if(w > 320 && menu.is (":hidden" ) ) ( menu.removeAttr ("style" ) ; ) ) ) ;

Das ist alles, das ist alles, was wir an Code benötigen. Jetzt können wir den Navigationsblock über die folgenden Links anzeigen, und wir empfehlen, ihn mit einem Design-responsiven Tool wie dem Responsinator zu testen, damit Sie ihn sehen können verschiedene Varianten gleichzeitig seine Breite.

Bonus: Alternativer Weg

Wie bereits in diesem Tutorial erwähnt, gibt es andere Möglichkeiten, dies zu tun, und mit JavaScript Die SelectNav.js-Bibliotheken sind eine der einfachsten Möglichkeiten. Das reines JavaScript, die nicht von anderen Bibliotheken von Drittanbietern wie jQuery abhängt.

Grundsätzlich wird dadurch Ihre Menüliste dupliziert und in umgewandelt wird den Standard verwenden Benutzeroberfläche das Gerät selbst.

Übersetzung - Schreibtisch

Horizontales Menü ist eine Liste von Abschnitten der Website, daher ist es logischer, innerhalb des Elements zu markieren

So erstellen Sie ein horizontales Menü: Markup- und Designbeispiele

HTML-Markup und grundlegende Stile für das horizontale Menü

Standardmäßig werden alle Listenelemente lokalisiert vertikal, die die gesamte Breite des Behälterelements überspannt, das wiederum die gesamte Breite seines Behälterblocks überspannt.

HTML-Markup für die horizontale Navigation

Menüpunkt
Menüpunkt
Menüpunkt

Ein innerhalb des Tags befindliches horizontales Menü kann zusätzlich innerhalb des Elements platziert werden

...

zusätzliche Möglichkeit

Es gibt mehrere Möglichkeiten, sie zu platzieren horizontal. Zuerst müssen Sie die Standardbrowserstile für Navigationselemente zurücksetzen:

Ul ( list-style: none; /*listenmarkierungen entfernen*/ margin: 0; /*den oberen und unteren Rand von 1em entfernen*/ padding-left: 0; /*den linken Abstand von 40px entfernen*/ ) a ( text-decoration: none; /*Unterstreichung des Linktextes entfernen*/)

Methode 1. li (Anzeige: inline;)

Machen Sie Listenelemente inline. Als Ergebnis werden sie horizontal angeordnet, auf der rechten Seite wird zwischen ihnen ein Abstand von 0,4 em hinzugefügt (berechnet relativ zur Schriftgröße). Um es zu entfernen, fügen Sie li li einen negativen rechten Rand hinzu (margin-right: -4px;) . Gestalten Sie als Nächstes die Links nach Ihren Wünschen.

Methode 2. li (float: left;)

Wir machen die Elemente der Liste schwebend. Dadurch sind sie horizontal angeordnet. Die Höhe des ul-Containerblocks wird Null. Um dieses Problem zu lösen, fügen wir (overflow: hidden;) zu ul hinzu, erweitern es und erlauben es so, schwebende Elemente zu enthalten. Fügen Sie für Links ein (Anzeige: Block;) hinzu und gestalten Sie sie nach Ihren Wünschen.

Methode 3. li (Anzeige: Inline-Block;)

Listenelemente inline-blockieren. Sie sind horizontal angeordnet, auf der rechten Seite entsteht wie im ersten Fall eine Lücke. Fügen Sie für Links ein (Anzeige: Block;) hinzu und gestalten Sie sie nach Ihren Wünschen.

Methode 4. ul (Anzeige: flex;)

Die ul-Liste mithilfe der .ul-Liste zu einem flexiblen Container machen. Dadurch werden die Elemente der Liste horizontal angeordnet. Fügen Sie ein (Anzeige: Block;) für Links hinzu und gestalten Sie sie nach Ihren Wünschen.

1. Responsives Menü mit Unterstreichungseffekt beim Bewegen der Maus über einen Link

2. Responsives Menü für eine Hochzeitswebsite

3. Responsive Menü mit Jakobsmuscheln

4. Reaktionsschnelles Menüband

5. Responsives Menü mit einem Logo in der Mitte

6. Responsives Menü mit Logo auf der linken Seite

Navigation ist auf jeder guten Website vorhanden, auch wenn es sich um eine einseitige Website handelt. Je nach Situation können Navigationslinks zu verschiedenen Abschnitten der Website führen oder zu einem Lesezeichen (Anker) senden, das sich auf der aktuellen Seite befindet. Eine kompetente Zusammenstellung der Navigation, bei der der Benutzer nicht verwirrt wird, erfordert gewisse Kenntnisse und Erfahrungen. Auch das Design der Navigationsleiste muss mit Bedacht angegangen werden, und in diesem Tutorial zeigen wir Ihnen, wie Sie ein komfortables Navigationsmenü erstellen.

Navigation erstellen

Was ist Navigation? Dies ist eine Reihe von Links, die oft nach Bedeutung geordnet und gruppiert sind. Ein Navigationsmenü wird oft mit einem HTML-Listen-Tag erstellt.

enthält einen Link . HTML5 hat ein separates Tag für die Navigation eingeführt
, wo Sie einfach Link-Tags setzen können. Nachdem Sie den HTML-Frame erstellt haben, können Sie ihn mit CSS gestalten, wo Sie definieren können, wie Ihr Menü aussehen soll – vertikal, horizontal, Dropdown usw.

Nehmen wir an, wir haben eine einfache Navigation mit fünf Links, die in HTML aus einer Liste mit Aufzählungszeichen erstellt wurde:
- Heim
- Um
- Galerie
- Nachrichten
- Kontakte
Anfangs sieht unsere Navigation ohne Stile wie eine normale Liste aus:

Damit dieses Element mehr wie eine Navigationsleiste aussieht, müssen einige obligatorische Schritte ausgeführt werden. Erstens werden Markierungen in der Nähe der Menüpunkte nicht benötigt, und zweitens können die vom Browser für die Liste festgelegten Standardwerte für Rand und Auffüllung stören, daher setzen wir sie auf Null. Das Ergebnis ist folgendes:
Menü ( list-style-type: none; margin: 0; padding: 0; )

Tatsächlich werden identische Aktionen in Bezug auf Listen von der Style-Reset-Datei durchgeführt zurücksetzen.css, daher kann der obige Code weggelassen werden, wenn Sie ihn auf Ihrer Website verwenden.

Nach dem Zurücksetzen der Standard-Listenstile können Sie direkt mit dem Erstellen von Stilen für die Navigation fortfahren. Wir zeigen Ihnen, wie Sie vertikale und horizontale Paneele erstellen.

Vertikales Menü

Das Erstellen einer vertikalen Navigationsleiste gilt als einfacher als das Erstellen eines horizontalen Menüs. Hauptsächlich, weil die horizontale Position der Links nicht eingestellt werden muss. Es ist nur eine vertikale Liste der Seiten der Site. Und doch müssen einige wichtige Stile angewendet werden.

Links blockieren
Zuerst müssen Sie alle Tags erstellen Blockelemente:
Menü a ( Anzeige: sperren; )
Dafür gibt es mehrere Gründe:

Menübreite

Als nächstes müssen wir die Breite des Menüs festlegen. Wenn Sie die Breite der Navigationsleiste nicht vorgegeben haben und sie sich nicht in einem Container befindet, der sie begrenzt, wird das Menü auf die volle Breite des Fensters ausgedehnt (wie in unserem obigen Beispiel), da sich ein Element auf Blockebene so verhält standardmäßig. Sie können die gewünschte Breite für das .menu-Element festlegen, zum Beispiel:
Menü ( Breite: 300px; )
Stattdessen können Sie die Breite für die Elemente festlegen
oder für Links - Der visuelle Effekt kann derselbe sein, aber bedenken Sie, dass in diesem Fall die Breite des .menu-Elements immer noch 100 % beträgt.

Trennung von Absätzen

Um Menüpunkte optisch zu trennen, können Sie jedem einen unteren oder oberen Rahmen geben. Je nachdem, welches Sie verwenden, fehlt oben oder unten im Menü ein Rahmen. Dies kann behoben werden, indem dem .menu-Block selbst ein weiterer Rand hinzugefügt wird:
Menü a (Rand oben: 1 Pixel durchgehend blau; ) .menu (Rand unten: 1 Pixel durchgehend blau; )
Elementhöhe und vertikale Ausrichtung

Im Moment sehen die Menülinks zu niedrig aus, zu nahe beieinander. Wenn der Text jedes Links nicht mehr als eine Zeile einnehmen wird, können Sie seine Höhe erhöhen und gleichzeitig den Text vertikal zentriert halten, indem Sie die Eigenschaften height und line-height verwenden:
Menü a (Höhe: 30 Pixel; Zeilenhöhe: 30 Pixel; ) GIF
Wie Sie in der Animation sehen können, beeinflusst die Eigenschaft height die Höhe des Links, und der Zeilenabstand line-height ändert bereits die Höhe der Textzeile selbst. Stellen Sie sicher, dass Sie für diese beiden Eigenschaften die gleichen Werte festlegen, wenn Sie möchten, dass der Linktext vertikal zentriert wird.

Horizontales Menü

Die Hauptaufgabe beim Erstellen der horizontalen Navigation besteht darin, die Menüpunkte in einer Zeile anzuordnen. Dies kann auf mehrere Arten erfolgen.

Methode eins

Die erste Option besteht darin, die Anzeigeeigenschaft der Listenelemente auf inline oder inline-block zu setzen:
Menü li ( Anzeige: inline; )
Gleichzeitig Tags Innerhalb
kann nicht verblockt werden, da sonst die Gegenstände nicht mehr horizontal ausgerichtet sind, sondern wieder in vertikaler Position stehen. Links können auch auf Inline oder Inline-Block gesetzt werden. Wählen Sie die zweite Option, wenn Sie später Links einrücken möchten.

Danach können Sie mit dem Linkaufbau beginnen. Du könntest es zum Beispiel so stylen:
Menü a ( Textdekoration: keine; Schriftfamilie: Sans-Serif; Farbe: #5757a0; Anzeige: Inline-Block; Polsterung: 10px 20px; Hintergrundfarbe: Lavendel; Rand unten: 5px solide #5757a0; )
Wir haben jedem Link eine Hintergrundfarbe und einen unteren Rahmen hinzugefügt und ihn mit padding größer gemacht. Beachten Sie, dass es kleine Lücken zwischen den Menüpunkten gibt, obwohl wir sie nicht gestaltet haben. Sie treten auf, weil der Browser das Wagenrücklaufzeichen zwischen dem schließenden und dem öffnenden Tag als solches behandelt.
. Diese Lücken können entfernt werden, indem der HTML-Code der Liste in eine einzelne Zeile geschrieben wird:
- Heim
- Um
- Galerie
Dies ist jedoch umständlich, da diese Änderungen manuell im HTML vorgenommen werden müssen und der Code schwer lesbar ist. Daher können Sie versuchen, Lücken mit einem negativen Margin-Right-Wert zu beseitigen:
Menü li ( Rand rechts: -5px; )
Dieser Code entfernt die Lücken nicht, sondern überdeckt sie, indem er die Elemente um fünf Pixel nach links verschiebt. Diese Methode kann nicht als sehr zuverlässig bezeichnet werden, da die Größe der Lücke je nach anderen Stilen variieren kann.

Wenn die Abstände zwischen den Absätzen in Ihrem Design nicht geplant sind, ist es besser, die zweite Methode zum horizontalen Aneinanderreihen von Elementen zu verwenden.

Methode zwei

Sie haben vielleicht schon erraten, dass die zweite Option zum Erstellen eines horizontalen Menüs die Verwendung der Float-Eigenschaft ist. Fügen Sie dazu einen Stil für die Tags hinzu
:
Menü li (float: left; )
Wie Sie sehen können, gibt es keine Lücken zwischen den Punkten. Alle anderen Stile funktionieren wie zuvor. Aber wenn Sie nach der Navigation ein weiteres HTML-Element hinzufügen (sagen wir
), dann ist es vom Umbruch betroffen und wird in der gleichen Zeile wie die Menüpunkte platziert. Sie können diese Aktion abbrechen, indem Sie der Kopfzeile die Eigenschaft clear: left hinzufügen. Wenn Sie jedoch eine Website mit einer großen Anzahl verschiedener Seiten entwickeln, kann es schwierig werden, den Überblick zu behalten, ob Sie vergessen haben, diese Eigenschaft irgendwo anzugeben. Es ist viel einfacher, die Umhüllung auf der Navigationsseite rückgängig zu machen. Dieser Eintrag hilft:
Menü ( Überlauf: ausgeblendet; )
Dies hilft auch dabei, die normale Höhe des übergeordneten Elements des schwebenden Elements zurückzugeben. Wir haben dieses Problem bereits in früheren Tutorials angesprochen, aber dann haben wir es durch einen speziellen Hack mit dem Pseudo-Element :after gelöst. Das obige Beispiel ist eine weitere Möglichkeit, das Problem der fehlenden Containerhöhe zu lösen.
Notiz: Wenn Sie einen Hintergrund für ein .menu-Element festlegen, sehen Sie ihn erst, wenn Sie overflow:hidden darauf anwenden. Das macht Sinn, denn wie kann man den Hintergrund eines Elements sehen, dessen Höhe Null ist?

In der nächsten Lektion gehen wir näher auf die Fähigkeiten von Attributselektoren ein, mit denen Sie festlegen können

Vom Autor: Willkommen auf unserem Blog zum Erstellen von Websites. Dies ist eine Reihe von Artikeln, die der neuen Spezifikation gewidmet sind, und heute möchte ich Ihnen sagen, wie Sie ein Menü in HTML5 erstellen und wie sich dieser Prozess von demselben unterscheidet vorherige Versionen Sprache.

Was sind die Unterschiede

Zunächst möchte ich sagen, dass die Spezifikation nicht so neu ist - sie begann bereits 2009 mit ihrer Entstehung. Tatsächlich hat es seitdem eine ständige Entwicklung gegeben - neue Funktionen erscheinen in HTML5, moderne Browser unterstützen genau diese Funktionen immer mehr, so dass wir bald über die volle Unterstützung dieser Technologie sprechen können, obwohl es sich nicht um etwas Einheitliches handelt ist vielmehr eine Reihe neuer Funktionen, von denen jede unabhängig ist.

Nun, was ist der Unterschied zwischen dem Erstellen der Hauptnavigation (Menü), da Sie einen Artikel zu diesem Thema lesen, dann muss es definitiv einige Unterschiede geben. Nun, wie wurde das Menü vorher erstellt? Üblicherweise dafür verwendet Aufzählungsliste, die in einem zusätzlichen Container für die gesamte Navigation platziert wurde - ein reguläres div.

Mit dem Aufkommen neuer Tags können Sie es jetzt richtiger machen - anstelle des div-Tags packen Sie das Menü in nav - ein neues semantisches Element, das speziell erstellt wurde, um die wichtigsten Links darin zu sammeln und zu gruppieren.

Sie können sowohl eine Liste als auch nur eine Reihe von Links in das Navigationssystem einfügen. Mir scheint, dass dies eine noch einfachere und korrektere Lösung ist, obwohl Sie in vielen Vorlagen immer noch die Implementierung des Menüs mit ul, li, a-Tags sehen können.

Interessanterweise ist der Nav-Container speziell für Prioritätslinks auf der Seite konzipiert. Tatsächlich kann es mehr als einen solchen Container auf einer Seite geben, aber es lohnt sich, nur die Links darin zu platzieren, die wirklich die Hauptnavigation bilden (z. B. das obere Hauptmenü und sein Duplikat in der Fußzeile der Seite).

Wie erstelle ich ein horizontales Menü mit HTML5

Heimat Dienstleistungen Kontakte Bewertungen

Sie brauchen nicht einmal einen Rahmen in der Liste, alles wird zunächst in einer Zeile angezeigt, da Links Inline-Elemente sind.

Eine andere Sache ist, dass sie aufgrund ihrer Inline-Eigenschaften im Design sehr begrenzt sind. Sie können nur mit folgenden Eigenschaften arbeiten: Farbe, Schriftgröße, Ränder. Wenn Sie eine bestimmte Hintergrundfarbe festlegen, Trennzeichen erstellen und Einzüge hinzufügen (oder die Größe jedes Menüpunkts bestimmen) möchten, funktioniert dies mit dem String nicht.

Hier müssen wir unsere Artikel in Blockelemente umwandeln. Dazu müssen sie eine Eigenschaft schreiben:

Bildschirmsperre ;

Jetzt gehen sie von oben nach unten, das heißt, unsere Navigation ist vertikal geworden. Um es wieder in ein horizontales zu verwandeln, müssen Sie bestimmte Eigenschaften hinzufügen. Definieren Sie beispielsweise anstelle eines Blocktyps einen Blocklinientyp für sie oder setzen Sie sie auf (float: left). Lesen Sie mehr über diese Methoden.

Vertikale Navigation

Normalerweise zu tun vertikales Menü html5 verwendet eine Liste, aber das Markup, das ich Ihnen oben gegeben habe, ist in Ordnung. Wie Sie gesehen haben, reihen sich die Links, wenn Sie sie in Blocklinks umwandeln, automatisch von oben nach unten aneinander, da zwei Blöcke nicht auf derselben Linie stehen können.

Nun können Sie die gewünschten Gestaltungsregeln darauf anwenden. Blöcke haben viel mehr Eigenschaften als Inline-Elemente, sodass Sie viel mehr Optionen haben. Weitere Möglichkeiten. Zum Beispiel habe ich diese hinzugefügt:

a( Textdekoration: keine; Farbe: #fff; Polsterung: 5 Pixel; Schriftgröße: 22 Pixel; Anzeige: Block; Hintergrund: linearer Farbverlauf (nach rechts, rgba(96,108,136,1) 0 %, rgba(63,76,107 ,1) 100%); Breite: 200px; Textausrichtung: Mitte )

Textdekoration: keine;
Farbe : #fff;
Polsterung: 5px
Schriftgröße : 22px ;
Bildschirmsperre ;
Hintergrund : Linear - Verlauf ( nach rechts , rgba ( 96 , 108 , 136 , 1 ) 0 % , rgba ( 63 , 76 , 107 , 1 ) 100 % ) ;
Breite: 200px
text - ausrichten : zentrieren