Reines CSS / HTML-Dropdown-Menü

Reines CSS / HTML-Dropdown-Menü In diesem Tutorial erstellen wir ein klassisches horizontales Menü...
Wir animieren das horizontale Menü beim Zeigen.
Beschreiben Sie das Dropdown-Menü CSS / HTML

Reines CSS / HTML-Dropdown-Menü
In diesem Tutorial erstellen wir ein klassisches horizontales Menü für reines CSS. Es hat Symbole in den Listen. Wenn Sie auf ein Element zeigen, ändert sich die Farbe der Schaltfläche reibungslos und dem Text wird ein Schatten hinzugefügt. Dropdown-Listen können mehrstufig erstellt werden und die Hauptsache ist ganz einfach in reinem CSS3 implementiert.
Die Fortsetzung dieser Lektion hier - Teil 2 MOBILE VERSION horizontales Menü ".
Siehe den Stift POyzbW von Denis ( @ Dwstroy ) am Codepen .
In der Lektion verwenden:
Anzeige: Flex;
Übergang verwenden;
positioniere die Elemente mit position.

HTML horizontale Menüstruktur

Schreiben Sie zuerst das Markup unter das horizontale Menü. Wir öffnen unsere Entwicklungsumgebung in meinem Fall, das ist PhpStorm, erstellen eine index.html-Datei, schreiben den Frame html: 5 vor und ersetzen lang durch ru.

Alle Metas außer der Kodierung werden gelöscht, ich werde meinen Titel " Tom-Menü " registrieren.

Zwischen dem Body schreiben wir das Header-Tag und darin befindet sich ein Block mit der Klasse .dws-menu, der unser Menü enthält. Als nächstes wird die Struktur wie folgt sein, wir werden Listen in Höhe von fünf Stück erstellen. In jeder Liste gibt es einen Link mit dem Attribut href = "#". Dann gehe ich zum Icon mit der Klasse .fa .fa-

Wir drücken, um uns zu bewerben.

Notieren Sie sich den Namen der Menüelemente ( Startseite, Produkte, Dienste, Nachrichten, Kontakte ).

Wählen Sie als Nächstes die Symbole aus und verbinden Sie sie. Gehen Sie zur Site, wir wählen die Symbole für diese Menüpunkte aus:

Laden Sie das Archiv von der Site mit Symbolen herunter, extrahieren Sie den Inhalt auf Ihren Computer, kopieren Sie den Zeichensatzordner und den CSS-Ordner in Ihre Entwicklungsumgebung.

Der Ordner "fonts" enthält Symbolschriften und der Ordner "css" enthält deren Stile. Komprimierte Stile können entfernt werden font-awesome.min, verbinden wir die unkomprimierte font-awesome.css.

In index.html verbinden wir Symbole und registrieren jeden Artikel mit einem eigenen Symbolstil ( Startseite , Einkaufswagen , Zahnräder , Th-Liste , Umschlag offen ).

Wir haben den Hauptrahmen erstellt, erstellen nach der Beschreibung des Hauptstils ein Untermenü und erstellen nun eine Datei, in der wir die Hauptstile des horizontalen Menüs style.css beschreiben und mit index.html verbinden. Um zu überprüfen, ob die Stile miteinander verbunden sind, erstellen Sie einen IMG-Ordner. In diesem Ordner platziere ich ein beliebiges Bild auf dem Hintergrund. Schreiben wir die Bildverbindung mit Hintergrund.

body {background-image: url ("../ img / ep_naturalwhite.png"); }

Wie wir sehen, wurde alles angezeigt und dann werden wir mit der Beschreibung der Stile fortfahren.

Lassen Sie uns zunächst alle Einrückungen zurücksetzen, die von verschiedenen Browsern standardmäßig festgelegt werden können:

.dws-menu * {margin: 0; Polsterung: 0; }

Stellen Sie den Header auf 200 Peaks ein. und weisen Sie zu, welche Sie herunterladen und separat auf der Website mit sich verbinden können, nur für den Fall, dass Sie zusätzliche Schriftarten schreiben.

Header {Rand: 200px; Schriftfamilie: Cuprum, Arial, Helvetica, serifenlos; }

Blenden Sie die Markierungen in den Listen aus:

.dws-menu ul, .dws-menu ol {Listenstil: keine; }

Die Listen werden horizontal mit display: flax angezeigt, und wir werden es in der Mitte tun:

.dws-menu> ul {display: flex; Rechtfertigungsinhalt: Mitte; }

In der Kopfzeile werden wir nur den oberen Rand einrücken, wir werden einen oberen Rand schreiben.

Header { Rand oben: 200px; Schriftfamilie: Cuprum, Arial, Helvetica, serifenlos; }

Lassen Sie uns unser Menü entwerfen, die Farbe der Schaltflächen, die Schriftart usw. einstellen.

Wählen Sie links nav> ul li und machen Sie sie zu Blockelementen. Stellen Sie den Menühintergrund ein, schreiben Sie Einrückungen, geben Sie die Größe und Farbe an, entfernen Sie den Unterstrich und setzen Sie die Überschriften in Großbuchstaben.

.dws-menu> ul li a {display: block; Hintergrund: #ececed; Auffüllen: 15px 30px 15px 40px; Schriftgröße: 14px; Farbe: # 454547; Textdekoration: keine; Text-Transformation: Großbuchstaben; }

Positionieren Sie dann die Symbole, und weisen Sie die Listen den folgenden Positionen zu: relative; zur weiteren Ausrichtung der Icons:

.dws-menu> ul li {position: relative; }

Als nächstes wählen wir Symbole aus, positionieren sie absolut, rücken sie bei 15 Peaks von oben ein, von den linken 12 Peaks vergrößern wir sie auf 18 Peaks.

.dws-menu> ul li> a i.fa {position: absolute; oben: 15px; links: 12px; Schriftgröße: 18px; }

Ordnen Sie den Listen das Trennzeichen in Form eines Rahmens zu, markieren Sie das erste LI-Element, setzen Sie den Rahmen. Wir wählen das letzte Element LI aus und weisen ihm einen ähnlichen Rand zu.

.dws-menu> ul li: erstes Kind {border-left: 1px solid # b2b3b5; } .dws-menu> ul li: letztes Kind {border-right: 1px solid #babbbd; }

Trennzeichen für LI-Listen erstellen:

.dws-menu> ul li {position: relative; Rand rechts: 1px durchgehend # c7c8ca; }

Hat das Menü das Aussehen erhalten, können Sie mit der Beschreibung der Stile fortfahren, während Sie den Mauszeiger bewegen.

Wir animieren das horizontale Menü beim Zeigen.

Wählen Sie Links aus, weisen Sie dem Block eine Farbe zu und weisen Sie die Farbe des Links selbst mit dem Symbol Weiß zu. Fügen wir noch einen dunklen Schatten hinzu. Mit Hilfe des Übergangs in 0,3 Sekunden werden wir einen reibungslosen Auftritt machen:

.dws-menu li a: hover {Hintergrund: # 454547; Farbe: #ffffff; Kastenschatten: 1px 5px 10px -5px Schwarz; Übergang: alle 0,3s leicht; }

Und damit dieser Effekt reibungslos verschwindet, fügen Sie den folgenden Stil dem Link hinzu:

.dws-menu> ul li a {display: block; Hintergrund: #ececed; Auffüllen: 15px 30px 15px 40px; Schriftgröße: 14px; Farbe: # 454547; Textdekoration: keine; Text-Transformation: Großbuchstaben; Übergang: alle 0,3s leicht; }

Das Hauptmenü ist beendet und Sie können mit der Beschreibung des Untermenüs und der darin eingebetteten Untermenüs fortfahren.

Beschreiben Sie das Dropdown-Menü CSS / HTML

Über öffnen wir index.html und fügen beispielsweise ein zusätzliches Menü zu den Produkten hinzu. Fügen Sie das UL zwischen die LI-Listen ein und platzieren Sie fünf Listen darin, die Links mit dem Attribut herf = "#" enthalten.

ul> li * 5> a [href = "#"]

Wir drücken, um uns zu bewerben, schreiben den Namen der Gegenstände ( Kleidung, Elektronik, Lebensmittel, Werkzeuge, Leben. Chemie ).

<ul> <li> <a href="#"> Kleidung </a> </ li> <li> <a href="#"> Elektronik </a> </ li> <li> <a href = "#"> Lebensmittel </a> </ li> <li> <a href="#"> Werkzeuge </a> </ li> <li> <a href="#"> Leben. Chemie </a> </ li> </ ul>

Öffnen Sie dann style.css und beschreiben Sie die Stile des Untermenüs.

Wir wählen die zweite Liste aus und weisen sie zu: absolut; Stellen wir die minimale Breite auf 150 Peaks ein.

/ * Untermenü * / .dws-Menü li ul {Position: absolut; Mindestbreite: 150px; }

Schreiben wir in die Grenzlisten bei 1 Peak.

.dws-menu li> ul li {border: 1px solid # c7c8ca; }

Für die Links im Untermenü setzen wir Einrückungen auf 10 Spitzen. Entfernen Sie die Textumwandlung und machen Sie den Hintergrund ein paar Töne dunkler Hintergrund: # e4e4e5; .

.dws-menu li> ul li a {padding: 10px; Texttransformation: keine; Hintergrund: # e4e4e5; }

Dann legen Sie ein weiteres Untermenü an. Gehen Sie zur Markup-Datei und zum Beispiel im "Elektronik" -Formular per Analogiemenü wie zuvor. Wir beschreiben die Überschriften der Artikel ( Kameras, Computer, Telefone ) und speichern.

<li> <a href="#"> Elektronik </a> <ul> <li> <a href="#"> Kameras </a> </ li> <li> <a href="#"> Computer </a> </ li> <li> <a href="#"> Telefone </a> </ li> </ ul> </ li>

Sie wurden herausgebracht, aber unter dem Hauptmenü versteckt, jetzt Position: absolut; Verschachteltes UL, und verschieben Sie es auf die Spitze 150. zur Seite:

.dws-menu li> ul li ul {Position: absolut; rechts: -150px; oben: 0; }

Als nächstes lassen wir das Untermenü erscheinen, wenn wir auf die Hauptelemente des Hauptmenüs zielen. Dazu fügen wir Anzeige hinzu: keine; und dabei alle internen Punkte verstecken.

/ * Untermenü * / .dws-Menü li ul {Position: absolut; Mindestbreite: 150px; Anzeige: keine; }

Und für ihr Aussehen werden wir die Listen beim Hover auswählen und sie mit Hilfe von display anzeigen: block; .

.dws-menu li: hover> ul {display: block; }

Jetzt können Sie mehrstufige Menüs hinzufügen, indem Sie einfach den UL-Block kopieren und seine Elemente ändern.

<ul> <li> <a href="#"> Startseite </a> </ li> <li> <a href="#"> Produkte </a> <ul> <li> <a href="#"> Kleidung </a> <ul> <li> <a href = "#"> Schuhe </a> </ li> <li> <a href="#"> Jacken </a> </ li> <li> <a href="#"> Hosen </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronik </a> <ul> <li> <a href="#"> Kameras </a> </ li> <li> <a href="#"> Computer </a> </ li> <li> <a href="#"> Telefone </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Lebensmittel </a> </ li> <li> <a href="#"> Werkzeuge </ h a> </ li> <li> <a href="#"> Gen. Chemie </a> </ li> </ ul> </ li> <li> <a href="#"> Dienstleistungen </a> <ul > <li> <a href="#"> Service 1 </a> </ li> <li> <a href="#"> Service 2 </a> </ li> <li> <a href = "#"> Service 3 </a> </ li> </ ul> </ li> <li> <a href="#"> Nachrichten </a> </ li> <li> <a href="#"> Kontakte </a> </ li> </ ul>

Dann lassen Sie uns die Tasten mit den Tasten beenden. Ich benutze, ich habe mehrere Presets erstellt, Sie können Ihre eigenen erstellen, in meinem Fall kopiere ich einfach diesen Code und platziere ihn an der Stelle im Hintergrund, die ich zuvor geschrieben habe.

.dws-menu> ul li a {display: block; / * Permalink - this gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Alte Browser * / Hintergrund: -moz-linear-gradient (oben, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / Hintergrund: -webkit-linear-gradient (oben, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / Hintergrund: linearer Farbverlauf (nach unten, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / padding: 15px 30px 15px 40px; Schriftgröße: 14px; Farbe: # 454547; Textdekoration: keine; Text-Transformation: Großbuchstaben; Übergang: alle 0,3s leicht; } .dws-menu li a: hover {/ * Permalink - this gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / background: # e0e1e5; / * Alte Browser * / Hintergrund: -moz-linear-gradient (oben, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / Hintergrund: -webkit-linear-gradient (oben, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / Hintergrund: linearer Farbverlauf (nach unten, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / color: #ffffff; Kastenschatten: 1px 5px 10px -5px Schwarz; Übergang: alle 0,3s leicht; }

Wenn Sie möchten, kann dieses Menü auf den Stil abgestimmt werden, den wir auf der Website für Sie haben. Es reicht aus, nur eine Farbe zu generieren und diese im Code zu ersetzen. Es entstand ein einfaches und gleichzeitig schönes horizontales Menü, das in reinem CSS erstellt wurde.

Reines CSS / HTML-Dropdown-Menü

HTML horizontale Menüstruktur

Wir animieren das horizontale Menü beim Zeigen.

Beschreiben Sie das Dropdown-Menü CSS / HTML

Hinterlasse einen Kommentar: