Horizontales Dropdown-Menü zum Selbermachen mit CSS und HTML. Wunderschönes horizontales Menü in voller Breite. Bootstrap 4 dehnt das Menü auf die volle Breite aus

Abschnitte der Website

Die Wahl des Herausgebers:

Ein ziemlich häufiges Layout eines Site-Menüs, wenn der Container damit die gesamte auf der Seite verfügbare Breite einnimmt. In diesem Fall grenzt das erste Element an den linken Rand und das letzte an den rechten Rand und der Abstand zwischen allen Elementen ist gleich. Heute verraten wir Ihnen, wie das geht.

Wir bieten Ihnen ein Beispiel für die Implementierung eines Gummimenüs mithilfe von CSS für Ihre Ressource. In diesem Menü befinden sich die Elemente in einer Zeile. Es wird kein Javascript verwendet. Der Inhalt des Menüs wird in einer regulären Liste zusammengefasst. Das Hauptmerkmal eines solchen Menüs ist seine Vielseitigkeit, die sich darin ausdrückt, dass sowohl die Anzahl als auch die Länge der Elemente beliebig sein kann.

Wie kann man das umsetzen?

Jeder Programmierer kann seinen eigenen Weg zur Lösung eines bestimmten Problems anbieten. Es hängt alles von seiner Vorstellungskraft, seinem Professionalitätsgrad und seinen Fähigkeiten ab. Die häufigste Lösung für dieses Problem ist die Verwendung einer Tabelle. Außerdem würden viele die Verwendung von Javascript vorschlagen. Ich beeile mich, diejenigen zu enttäuschen, die vorschlagen würden, die Anzeigeeigenschaft mit der Wertetabelle oder Tabellenzelle zu verwenden. Diese Methode ist nicht ausreichend browserübergreifend kompatibel.

Unsere Lösung

Unser Angebot basiert auf einer soliden Grundlage aus HTML5- und CSS3-Kenntnissen.

Der Kern des Prozesses basiert auf der text-align-Eigenschaft mit dem justify-Wert. Für diejenigen, die es vergessen haben, erinnere ich Sie daran: Diese Eigenschaft richtet die Textausrichtung über die gesamte Breite des Containers aus.

Beim Einsatz unserer Lösung sind zwei zwingende Regeln zu beachten. Die erste besteht darin, dass die Breite des Menüelementcontainers kleiner als der Text sein sollte. Das heißt, nicht in einer Zeile. Die zweite wichtige Regel ist, dass Wörter gleichmäßig gestreckt werden, unabhängig davon, ob sie zum selben Punkt gehören oder nicht.

Unten finden Sie Code, der als Beispiel für die Erstellung eines Gummimenüs dient:

HTML

< ul> < li>< a href= "#" >heim< li>< a href= "#" >Blog< li>< a href= "#" >Nachricht< li>< a href= "#" >Beliebt< li>< a href= "#" >Neue Dinge

ul ( text- align: justify; overflow: versteckt; /* beseitigt die Nebenwirkungen der Methode */ height: 20px; /* beseitigt auch unnötige */cursor: default ; /* legt die anfängliche Form des Cursors fest */ margin : 50px 100px 0 100px; Hintergrund: #eee; padding: 5px; ) li ( display: inline; /* macht Menüelemente zum Text */ ) li a ( display: inline- block; /* eliminiert Wortumbrüche im Menü */ color: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* Bilden der zweiten Zeile zum Ausarbeiten der Methode */ content: "1" ; margin- left: 100 %; height: 1px; Überlauf: versteckt; Anzeige: Inline-Block;

Um im guten alten Internet Explorer zu arbeiten, müssen Sie zusätzlich den folgenden Code zum CSS hinzufügen

ul ( z- index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( margin-left: 100%; ) * html ul ( /* brauche nur ie6 */ height: 30px; )

Nachdem wir die erforderlichen Eigenschaftswerte und den Code angegeben haben, erhalten wir dieses Gummimenü:

Nachteile der Methode

Volumencode

Der aktive Zustand eines Elements kann nicht über einen Klassenselektor bestimmt werden. Dies geschieht aufgrund von Wortumbrüchen in Absätzen (falls vorhanden). Die Lösung für dieses Problem besteht darin, innerhalb der Listenelemente einen weiteren Container hinzuzufügen.

Für das Dropdown-Menü müssen Sie den Code aufgrund der negativen Auswirkungen von overflow anpassen.

In welchen Browsern funktioniert es?


6.0+	6.0+	10.5+	5.0+	3.6+	-	-

Guten Tag!

Oft ist es notwendig, ein horizontales Menü zu erstellen, das sich über die gesamte Breite des übergeordneten Blocks erstreckt, unabhängig davon, wie viele Elemente es enthält.

Heute möchte ich Ihnen zeigen, wie Sie ein solches Menü erstellen.

Unser Menü wird also wie folgt aussehen:

Es ist auf die volle Breite gedehnt und sticht hervor, wenn man mit der Maus darüber fährt. Die Speisekarte ist an den Seiten abgerundet.

HTML-MARKUP

...

heim

Interessante Neuigkeiten

Ein weiterer Menüpunkt!

Um das Menü in voller Breite darzustellen, habe ich Tabellen mit 100 % Breite verwendet. Jede Tabelle verfügt über einen Menüelement-Div-Container. Je nachdem, ob der erste, letzte oder mittlere Menüpunkt ein Div ist, wird die entsprechende Klasse zugewiesen.

Jeder Div-Container verfügt über 2 Seitenränder mit absoluter Positionierung, die für die korrekte Anzeige notwendig sind. Wenn Sie Standardränder verwenden, springt der Text beim Wechseln von Menüelementen um 1-2 Pixel, was gut ist.

Die aktive Klasse ist für den ausgewählten Menüpunkt verantwortlich und hebt ihn hervor.

In jedem Artikel haben wir ein Bild und einen Text. Damit das alles streng in der Mitte vertikal ausgerichtet ist, verwenden wir eine Tabelle. Dank der Eigenschaft der vertikalen Ausrichtung werden unsere Menüpunkte immer reibungslos angezeigt und verschwinden nicht.

CSS-REGELN

Legen wir zunächst Stile für die allgemeine Anzeige des Menüs fest:

Menu_container ( padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px; ) .menu_container td ( Vertical-Align: Middle; /* Vertical Alignment */ ) .last_point_menu, .first_point_menu, .middle_point_menu ( width: 100%; height: 1px solid #dadbda; position: relative; border-left: none; .inner_table td ( padding: 0px; vertikale Ausrichtung: Mitte; Rand: keine; Textausrichtung: links; Breite: 150px; padding-left: 4px; ) .td.inner_table_title ( padding-top: 4px; Schriftstärke: fett; ) .td.inner_table_img ( width: 40px!important; ) .inner_table_menu ( height: 100%; padding: 0px; vertikale Ausrichtung: Mitte; Rand: keine; Textausrichtung: links; ) .inner_table_title ( padding-left: 10px; padding-right: 10px; text-transform: Großbuchstaben; line-height: 13px; ) .inner_table_menu td.inner_table_img ( width: 30px!important; padding-left: 15px; )

Lassen Sie uns der Schönheit halber die Ecken an den Seiten der Speisekarte abrunden:

First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-unten-left-radius: 5px; border-right: 1px solid #dadbda; -webkit-border-top-right-radius: 5px; -webkit-border -bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; ; )

Jetzt hat unsere Speisekarte ein schöneres Aussehen:

Bisher hat der erste Punkt keinen linken Rand. Wir werden es etwas später beheben.

Fügen wir nun Hover-Effekte für das Menü hinzu.

Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( Hintergrundfarbe: #CAE285; Hintergrundbild: -moz-linear- Farbverlauf (oben, #CAE285, #9FCB56); Hintergrundbild: -webkit-gradient(linear, 0 0, 0 100 %, von (#CAE285), bis (#9FCB56)); -gradient(top, #CAE285, #9FCB56); Hintergrundbild: -o-linear-gradient(top, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: 5000; ;). :hover ( border: 1px solid #9FCB56; border-left: none; Rahmenfarbe: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( border-left: none; )

Jetzt sieht unser Menü viel schöner aus, aber wir haben vorerst keine Rahmen für die hervorgehobenen Menüpunkte. Lasst uns das beheben!

/* Stile für Seitenränder */ .borderLeftSecond, .borderRightSecond ( display: none; position: absolute; width: 1px; height: 47px; background-color: #9fbb62; top: 0px; z-index: 1000; ) /* absolute Offsets für Ränder */ .borderLeftSecond ( left: 0px; , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* behandelt die Fälle von das erste und letzte Element */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )

Das ist alles!

Wir haben ein hervorragendes Menü erhalten, das sich über die gesamte Breite des Hauptblocks erstreckt! Die Elemente überlappen sich nicht, wenn Sie mit der Maus darüber fahren, und das Layout springt nicht.

Hallo. Ich habe schon sehr lange keine Beiträge mehr zum Thema HTML/CSS-Arbeit geschrieben. Kürzlich habe ich gerade angefangen, ein neues Layout zusammenzustellen, und dabei bin ich auf einen interessanten Trick gestoßen, mit dem man das Menü flexibel gestalten kann (man kann neue Elemente hinzufügen und die Größe wird nicht größer, sondern bleibt immer 100 % der übergeordneter Block). Deshalb werden wir heute ein Gummimenü mit CSS implementieren.

Wenn Sie zu faul sind, den Artikel zu lesen, können Sie sich dieses Video ansehen. Der Autor erklärt auch alles sehr gut:

Rubber-Menü mit CSS – Schritt 1

Der erste Schritt ist immer HTML-Markup. Was wären wir ohne es? Aber in unserem Fall wird alles einfach sein:

Block-Wrapper für Menü

das Menü selbst, angezeigt durch eine Liste mit Aufzählungszeichen (ul-Tag)

Nun, die Menüpunkte sind drinnen und dementsprechend bereits verlinkt

Alles ist klar, hier ist mein Markup-Code:

Es sieht alles normal aus, etwa so:

Jetzt bringen wir alles in die gewünschte Form, CSS macht sich an die Arbeit.

Schritt 2 – Grundstile

Als Nächstes füge ich Stile zum Wrapper-Block hinzu. Ich stelle nämlich die maximale Breite auf 600 Pixel ein (nur um es einfacher zu machen, einen Screenshot zu machen, damit das Menü passt) und zentriere den Block auch.

Wickeln(
Hintergrund: #fff;
maximale Breite: 600 Pixel;
Rand: 0 automatisch;
}

Schritt 3 – Gummi anbringen

Kommen wir nun zum Menü selbst. Ich werde die Markierungen daraus entfernen (das ul-Tag), einen linearen Hintergrundverlauf erstellen und, was am wichtigsten ist, die Eigenschaft display:table-row verwenden, damit sich der Container für das Menü wie eine Tabellenzeile verhält. Dies ist für weitere Manipulationen wichtig.

R-Menü(
Hintergrund: linearer Farbverlauf (nach rechts, #b0d4e3 0 %, #88bacf 100 %);
Anzeige: Tabellenzeile;
Listenstil: keiner;
}

Wie Sie sehen können, hat der obige Code einfach alles gelöst, worüber ich geschrieben habe. Übrigens ist es praktisch, Farbverläufe mit dem Ultimate CSS Gradient Generator-Tool zu generieren. Ich werde eines Tages wieder über ihn schreiben.

R-Menü(
vertikal ausrichten: unten;
Anzeige: Tabellenzelle;
Breite: automatisch;
Textausrichtung: Mitte;
Höhe: 50px;
border-right: 1px solid #222;
}

Vertical-Align: Bottom – Diese Eigenschaft ist notwendig, damit der Text in einem Menüelement, wenn er zwei Zeilen umfasst, gleichmäßig angezeigt wird. Wenn wir das Menü erstellen, können Sie diese Eigenschaft entfernen, hineinzoomen, sodass die Elemente komprimiert werden und der Text auf zwei Zeilen verschoben wird, und Sie werden ein Anzeigeproblem sehen. Geben Sie die Immobilie zurück und alles wird gut.
display: table-cell – Da wir das Anzeigemenü selbst als Tabellenzeile festlegen, wäre es logisch, seine Elemente so festzulegen, dass sie als Zellen in einer Tabelle angezeigt werden. Das ist notwendig.
width: auto – die Breite wird automatisch berechnet, abhängig von der Länge des Textes im Absatz
text-align: center – dies dient nur dazu, den Text darin zu zentrieren
Höhe: 50 Pixel – Stellen Sie die Höhe auf 50 Pixel ein
Nun, border-right ist nur ein Rand auf der rechten Seite, ein Trennzeichen für Elemente

Bisher sieht die Speisekarte unansehnlich aus, aber das ist in Ordnung, es ist Zeit, sich daran zu erinnern.

Als letztes müssen Sie die Links innerhalb der Elemente formatieren. Hier habe ich diesen Code:

R-Menü li a(
Textdekoration: keine;
Breite: 1000px;
Höhe: 50px;
vertikal ausrichten: Mitte;
Anzeige: Tabellenzelle;
Farbe: #fff;
Schriftart: normal 14px Verdana;
}

Und so sieht das Menü jetzt aus:

Lassen Sie mich noch einmal einige Zeilen erklären:

Die Eigenschaft text-decoration überschreibt die Standardunterstreichung für Links
width: 1000px ist vielleicht die wichtigste Zeile. Sie müssen die Links auf ungefähr diese Breite einstellen, vielleicht weniger, aber auf jeden Fall größer als der breitestmögliche Menüpunkt. Die Links werden nicht 1000 Pixel breit sein, da die Breite durch das li-Menüelement begrenzt wird, dessen Breite auf „Auto“ eingestellt ist. Dadurch kann jedoch sichergestellt werden, dass sie für jede beliebige Anzahl von Elementen im Menü immer 100 beträgt Prozent der Breite.
Vertical-Align: Middle und Display: Table-Cell – der erste richtet den Text vertikal zur Mitte aus und der zweite zeigt auch Links als Zellen an. Beide Eigenschaften werden benötigt.
Schriftart – nun, das ist nur eine Reihe von Einstellungen für die Schriftart. Lesen Sie in diesem Artikel mehr über CSS-Eigenschaften für Schriftarten.

Schritt 4 (optional) Sie können Interaktivität hinzufügen

Zum Beispiel, damit sich die Farbe eines Menüpunkts ändert, wenn man mit der Maus darüber fährt. Dies kann ganz einfach mit der Hover-Pseudoklasse implementiert werden:

R-Menü li:hover(
Hintergrundfarbe: #6bba70;
}

Testen Sie das Menü auf Gummiigkeit

Toll, die Menüs sind fertig, aber das Wichtigste haben wir noch nicht überprüft – wie gummiartig es ist, wie ich versprochen habe. Nun, ich werde dem Menü noch zwei weitere Elemente hinzufügen:

Das Menü bleibt 600 Pixel breit. Die restlichen Artikel wurden einfach ein wenig geschrumpft, um 2 neue unterzubringen.

Ich füge noch einen langen Punkt hinzu:

Wie Sie sehen, ist das Menü etwas kleiner geworden und der lange Eintrag wird ganz normal angezeigt. Und wenn es nicht die Eigenschaft Vertical-Align: Bottom gäbe, von der ich Ihnen erzählt habe, würde das Menü schlechter aussehen.

Ich werde die Speisekarte auf drei Punkte reduzieren.

Die Elemente sind deutlich freier geworden, das Menü selbst hat sich in der Breite jedoch nicht verändert. Also haben wir ein Menü aus 100 % Gummi zusammengestellt!

Wie passt man es an?

Wenn Sie den Wrapper-Block nicht auf eine feste, sondern auf eine maximale Breite einstellen, muss er im Prinzip nicht einmal angepasst werden. In meinem Fall habe ich die Eigenschaft max-width: 600px und wenn die Breite weniger als 600 Pixel beträgt, wird der Block einfach zusammen mit dem Bildschirm verkleinert, ohne dass ein horizontaler Bildlauf entsteht.

Nun, wenn Sie das Menü auf mobilen Geräten oder Breitbildschirmen irgendwie ändern oder korrigieren möchten, dann helfen Ihnen Medienabfragen! Viel Glück beim Erstellen der Website!

Wir setzen die Serie mit einer Lektion über Dropdown-Menüs fort. Als nächstes folgt ein Do-it-yourself-horizontales Dropdown-Menü mithilfe von CSS.

Wenn Sie zufällig hierher gekommen sind oder nach einer anderen Implementierung des Dropdown-Menüs gesucht haben, empfehle ich Ihnen, zum übergeordneten Bereich zu gehen.

In diesem Abschnitt wird ein horizontales Dropdown-Menü in CSS und HTML beschrieben.

Seitennavigation:

Also, unsere Aufgabe:

Erstellen Sie ein horizontales Menü mit einem Dropdown-Listen-CSS (auf Ul-Li-Listen), ohne jQuery und Javascript zu verwenden und auch ohne Tabellen

im Code.

Horizontales Dropdown-Menü HTML

Bevor wir mit dem Schreiben von Code beginnen, müssen wir zunächst eine HTML-Vorlage für das Menü erstellen.

Da wir ein universelles Menü erstellen, möchte ich es der WordPress-Menüausgabe so ähnlich wie möglich machen. Meiner Meinung nach ist dies einer der einfachsten und vielseitigsten HTML-Menücodes. Es sieht aus wie das:

heim
Über uns
Unsere Dienstleistungen
- Unser Service Nr. 1
- Unser Service Nr. 2
- Unser Service Nr. 3
- Unser Service Nr. 4
- Dienst 5
Nachricht
Kontakte

Wie Sie dem Code entnehmen können, wird unser Dropdown-Menü in den Listen ul und li implementiert. So sieht das Menü ohne CSS-Styling aus:

Seien wir ehrlich, es sieht hässlich aus, wie eine normale Liste. Als nächstes müssen wir dieses Menü mit CSS-Stilen dekorieren.

Horizontales Dropdown-Menü in CSS

CSS-Stile für Dropdown-Menüs und mehr sind ebenso notwendig wie Air. Schließlich basiert die Dropdown-Registerkarte auf der Pseudoklasse:hover.

Für ein horizontales Dropdown-Menü benötigen wir folgende Stile:

#menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100 %; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul::after( display:block; width:100%; height:0px; clear:both; content:" "; ) menu1 ul li( position:relative; display:block; float:left; width:auto; height:auto; ) #menu1 ul li a( display:block; padding:9px 25px 0px 25px; Schriftgröße:14px; Schriftart- family:Arial, sans-serif; line-height:1.3em; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( Hintergrund:#EBBD5B; Farbe:#2B45E0; )

Dies ist noch nicht das Ende, sondern nur ein Teil des CSS für das horizontale Hauptmenü. Als nächstes schreiben wir Stile für die Menü-Dropdown-Liste:

#menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*diese Zeile implementiert Drop-Out-Mechanismus*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 25px; width: 100%; box-sizing:border-box; border-top:1px solid #ffffff ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: schweben (Hintergrund:#FDDC96; Farbe:#6572BC; )

Das ist es jetzt. Der Drop-Out-Mechanismus selbst ist in einer Zeile implementiert.

Sehen Sie sich den Skin mit diesem Menü an:

Reis. 2 (horizontales Dropdown-Menü)

Nachfolgend finden Sie eine Demo zur Funktionsweise des Dropdown-Menüs sowie einen Link zum Herunterladen der Quellen. (Die Demo wird mit einem Dropdown-Menü oben auf dieser Seite geöffnet, Sie müssen nicht auf „In neuem Fenster öffnen“ 🙂 oder das Mausrad klicken)

Horizontales Dropdown-Menü in voller Breite

Die meisten von Ihnen können mir vorwerfen, dass solche Menüs, wie ich sie oben gezeigt habe, ein Hallo aus der Vergangenheit sind, und teilweise haben Sie Recht, obwohl ich neuere Layouts mit solchen Menüs gesehen habe.

Ich hoffe, Sie haben das obige Beispiel heruntergeladen. Unser HTML bleibt gleich, aber wir werden das CSS komplett ändern. Sie können einfach den CSS-Code von hier nehmen und ihn in das heruntergeladene Beispiel einfügen oder im Demomodus sehen, wie er funktioniert.

#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; Schriftgröße:1px; Zeilenhöhe:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( :relative; display:inline-block; width:auto; Vertical-align:top; :14px; Schriftfamilie:Arial, Sans-Serif; Textgröße:Keine; Textgröße: :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( Hintergrund:#EBBD5B; Farbe:#2B45E0; ) #menu1 ul li ul( Position:absolute; oben:36px; links :0px; Anzeige:keine; Breite:auto; Hintergrund:#EBBD5B; Leerraum:nowrap; ) #menu1 ul li:last-child ul(/*das letzte Element wird am rechten Rand angehängt*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this line implementiert den Dropout-Mechanismus*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; width:100% ; box-sizing:border-box; border-top:1px solid #ffffff ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: schweben (Hintergrund: #FDDC96; Farbe:#6572BC; )

Dieses Beispiel unterscheidet sich vom ersten auch dadurch, dass sich das Dropdown-Menü, das Dropdown selbst, abhängig von der Breite aller Menüpunkte ausdehnt.

Bei sehr langen Menüpunkten ist diese Option möglicherweise nicht sehr praktisch, da sie den Rahmen sprengen. Um diese Eigenschaft zu deaktivieren, suchen Sie einfach die Eigenschaft „white-space:nowrap;“ am Selektor #menu1 ul li ul, und löschen Sie es.

Unten können Sie sich eine Demo ansehen oder die Quellen des horizontalen Dropdown-Menüs herunterladen:

Ohne Trennzeichen sieht dieses Menü mittelmäßig aus. Trennzeichen können manuell zu HTML hinzugefügt werden. Wenn Sie jedoch über ein CMS wie WordPress verfügen, ist das manuelle Hinzufügen dieser Trennzeichen nicht sehr praktisch.

Horizontales Dropdown-Menü mit Trennwänden

Es gibt mehrere Dutzend Optionen zum Hinzufügen eines Streifens (Trennzeichens) zwischen Menüelementen mithilfe von reinem CSS. Ich werde die Optionen, die::before oder::after verwenden, oder viel einfacher border-left, border-right, nicht duplizieren.

Es gibt Situationen, in denen das Layout so wunderbar aufgebaut ist, dass man auf JQuery nicht verzichten kann.

Unser HTML-Code bleibt derselbe, wir fügen lediglich die jQuery-Bibliothek und die Datei, die sie verwendet, ganz am Anfang ein:

Sofort nach .

Wie Sie wissen, müssen Sie eine Datei erstellen script-menu-3.js und füge dort diesen kleinen Code hinzu:

$(document).ready(function())( $("#menu1 > ul > li:not(:last-child)").after(" "); ));

Die CSS-Stile für ein solches Menü sollten unverändert bleiben. + Fügen Sie diesen Teil am Ende hinzu:

#menu1 ul li.razd( Höhe:28px; Breite:1px; Hintergrund:#ffffff; Rand oben:4px; )

Ein horizontales Dropdown-Menü mit Trennzeichen in jQuery sieht folgendermaßen aus:

Sie können die horizontale Menüvorlage unten im Demomodus ansehen oder herunterladen:

Die Vorteile dieser Lösung sind:

das Menü wird dynamisch gezeichnet;
die Einzüge vom Trennzeichen zum Absatz sind überall gleich;
schöneres und flexibleres Design.

Horizontales mehrstufiges Dropdown-Menü CSS+HTML

Da es sich um Dropdown-Menüs mit mehreren Ebenen beim Hover handelt, lohnt es sich wahrscheinlich, sie in Untergruppen zu unterteilen:

mit einem VIP-Pad, wenn man zur Seite zeigt

mit einem Popup-Dropdown der dritten Ebene

In meinen Beispielen werde ich ein mehrstufiges CSS-Menü mit 3 Ebenen zeigen, dann wird es meiner Meinung nach nicht schwer sein zu erraten, was zu tun ist.

Mehrstufiges Dropdown-Menü mit einer Seitenleiste beim Hover

Zuerst müssen wir unseren HTML-Code leicht korrigieren. Für Level 3 werden dort ein paar Zeilen hinzugefügt:

heim
Über uns
Unsere Dienstleistungen
- Unser Service Nr. 1
  - Ergänzung zur Leistung 1
  - Ergänzung zur Leistung 2
- Unser Service Nr. 2
  - Ergänzung zur Leistung 3
  - Ergänzung zur Leistung 4
- Unser Service Nr. 3
- Unser Service Nr. 4
- Dienst 5
Nachricht
Kontakte
- Straßenkarte
  - Karten-Add-on
  - Ergänzung für Karte 2
- Feedback-Formular

#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; Schriftgröße:1px; Zeilenhöhe:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( :relative; display:inline-block; width:auto; Vertical-align:top; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; Schriftgröße:14px; Schriftfamilie:Arial, serifenlos; Farbe:#ffffef; Zeilenhöhe:1,3 em; text-decoration:none; text-transform:uppercase:36px; (Hintergrund:#EBBD5B; Farbe:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 > ul > li:last-child > ul(/*das letzte Element wird am rechten Rand angehängt*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*diese Zeile implementiert den Drop-out-Mechanismus* / #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box -sizing:border-box ; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( Hintergrund:#FDDC96; Farbe:#6572BC; ) #menu1 ul li ul li ul( top:0px; links:100%; display:none; Hintergrund:#fddc96; ) #menu1 > ul > li:last-child > ul ul(left:auto; right:100%;) #menu1 ul li ul li ul a(color:#F38A01;)

Wir kopieren die Dateien für jQuery so, wie sie aus dem vorherigen Beispiel waren. Ich habe beschlossen, die Trennwände wegzulassen, damit die Speisekarte zumindest etwas besser aussieht. Natürlich geht es auch ohne.

So ist es passiert:
Ich habe 2 Skins in einem gemacht, um zu zeigen, wie der Tropfen rechts und in der Mitte aussieht.

Unten können Sie sich eine Demo ansehen und ein Beispiel herunterladen:

Mehrstufiges Dropdown-Menü mit Popup-Pad beim Hover

Der Titel enthält ein wenig Öl, aber es wird funktionieren, Hauptsache der Code.

Der Kern dieses Beispiels besteht darin, ein horizontales Dropdown-Menü in voller Breite mit einem Dropdown-Menü in voller Breite und mehreren Ebenen zu erstellen.

Den HTML-Code werde ich nicht ändern; er kann dem vorherigen Beispiel entnommen werden. Wir belassen auch Trennzeichen in jQuery.

Nur das CSS wird sich komplett ändern:

#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; Schriftgröße:1px; Zeilenhöhe:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( :relative; display:inline-block; width:auto; Vertical-align:top; #menu1 > ul > li.razd( height :28px; width:1px; background:#ffffff; margin-top:4px; serif; color:#ffffef; text-decoration:none; text-sizing:36px; a:hover, #menu1 ul li:hover > a( Hintergrund:#EBBD5B; Farbe:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none; width:100%; height:0px; content:" "; li( display :block; width:30%; float:left; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box- sizing:border -box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( Hintergrund: #FDDC96; Farbe:#6572BC; ) #menu1 ul li ul li ul( oben:0px; links:100%; Anzeige:keine; Hintergrund:#fddc96; z-index:15; ) #menu1 ul li ul li ul li (display: block; float:none; width:100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px solid #ffffff; )

So sieht das Menü aus: Der einzige Punkt ist, dass die Seite über genügend Platz verfügen muss, da der letzte Eintrag auf der rechten Seite keinen Platz für ein Dropdown bietet. Dieses Problem kann durch:nth-child gelöst werden, aber ich habe mich nicht darum gekümmert.

Sehen Sie sich die Demo des horizontalen Dropdown-Menüs mit mehreren Ebenen an:

Wie Sie vielleicht bemerkt haben: Auch die untere Matrize hat die volle Breite. So entstehen Drops in mehreren Blöcken.

Das ist alles für mich, ich hoffe, dass mindestens eines meiner Beispiele zu Ihnen passt. Vielen Dank für Ihre Aufmerksamkeit.

Es wird sowohl ihnen als auch mir zugute kommen :)

Wenn Sie den gesamten Beitrag gelesen haben, aber nicht herausgefunden haben, wie Sie Ihr eigenes horizontales Dropdown-Menü in CSS erstellen können, stellen Sie eine Frage in den Kommentaren oder verwenden Sie die Site-Suche.

Außerdem empfehle ich Ihnen, die übergeordnete Seite https://site/vypadayushhee-menu/ zu besuchen. Dort sind alle Beispiele und Arten von Dropdown-Menüs gesammelt.

Ein horizontales Menü ist eine Liste von Website-Abschnitten, daher ist es logischer, es innerhalb des Elements zu platzieren

Standardmäßig sind alle Listenelemente vertikal angeordnet und nehmen die gesamte Breite des Containerelements ein, das wiederum die gesamte Breite seines Containerblocks einnimmt.

HTML-Markup für die horizontale Navigation

Menüpunkt
Menüpunkt
Menüpunkt

Ein horizontales Menü, das sich innerhalb eines Tags befindet, kann zusätzlich innerhalb des ... und/oder ...-Elements platziert werden. Dadurch erhält das HTML-Markup eine semantische Bedeutung und bietet zudem eine zusätzliche Möglichkeit zur Formatierung des Menüblocks.

Es gibt verschiedene Möglichkeiten, sie horizontal zu platzieren. Zunächst müssen Sie die Standardbrowserstile für Navigationselemente zurücksetzen:

Ul ( list-style: none; /*Listenmarkierungen entfernen*/ margin: 0; /*den oberen und unteren Rand entsprechend 1em entfernen*/ padding-left: 0; /*den linken Abstand entsprechend 40px entfernen*/ ) a (Textdekoration: keine; /*Unterstreichung des Linktextes entfernen*/)

Listenelemente in Kleinbuchstaben umwandeln. Dadurch werden sie horizontal positioniert, wobei auf der rechten Seite zwischen ihnen ein Abstand von 0,4 cm hinzugefügt wird (berechnet relativ zur Schriftgröße). Um es zu entfernen, fügen Sie einen negativen rechten Rand für li li (margin-right: -4px;) hinzu. Als nächstes gestalten wir die Links nach unseren Wünschen.

Listenelemente schweben lassen. Dadurch sind sie horizontal positioniert. Die Höhe des Containerblocks ul wird Null. Um dieses Problem zu lösen, fügen wir (overflow: versteckt;) zu ul hinzu, erweitern es und ermöglichen so, dass es schwebende Elemente enthält. Fügen Sie für Links einen (display: block;) hinzu und gestalten Sie sie nach Ihren Wünschen.

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

Machen Sie die UL-Liste mithilfe von zu einem flexiblen Container. Dadurch werden die Listenelemente horizontal angeordnet. Wir fügen einen (display:block;) für die Links hinzu und formatieren sie wie gewünscht.

Lesen:

Beliebt:

Multimediatests in der Informatik

Neu

So stellen Sie den Menstruationszyklus nach der Geburt wieder her:

Wie reinige ich eine Maus von einem Computer?

Ein moderner Personalcomputer ohne ein lustiges „Tier“ namens Maus ist kaum vorstellbar. Mit seiner Hilfe können viele...

Detaillierte Anweisungen zum Installieren eines beliebigen Skripts auf jedem Hosting. Installieren von Skripten in Safari

Bei der Arbeit im Internet sind Benutzer ständig mit der Präsenz verschiedener Dienste auf Websites konfrontiert, die von Registrierungs- und Einreichungsformularen bis hin zu Formularen reichen.

Videoaufzeichnungen aller Vorlesungen der Yandex School of Design werden auf unserer Seite „Wie man Schulmaterialien richtig wahrnimmt“ veröffentlicht

School of Design, im Sommer 2015 eröffnet – Kursteilnehmer können nacheinander alle Bereiche der Schule durchlaufen und dabei Vorlesungen von Yandex-Mitarbeitern hören und...

So richten Sie einen Selfie-Stick auf Android ein: Anleitung, Anwendungen, Problemlösung

Noch vor wenigen Jahrzehnten hatten viele von uns keine Ahnung, dass man mit etwas anderem als einer herkömmlichen Kamera fotografieren kann. ZU...

PC-Einstellungen, Updates, Wartung, Einstellungen

RSS