Inhaltsverzeichnis
Was brauchen wir?
Ein lokaler Server (ich habe Ihnen bereits gesagt, dass ich Xampp verwende)
·
EIN Code-Editor (verwenden Sie erhabenen Text 3)
Schritt 1
Ich beginne, indem ich in das Verzeichnis meines lokalen Servers gehe und einen neuen Ordner zum Speichern dieses Projekts erstelle. Ich nenne es "menu_hover" darin und füge einen weiteren hinzu, der die CSS-Dateien enthält.
VERGRÖSSERN
VERGRÖSSERN
Schritt 2
Jetzt beginnen wir in unserem Code-Editor mit dem Hinzufügen einer neuen HTML5-Struktur, zu der ich die Stylesheets hinzufüge, die dem Bootstrap von ihren CDN-Adressen entsprechen, um keinen Platz auf unserem Server zu belegen. Ich füge auch ein Stylesheet namens "style ." hinzu .css", die in unserem zuvor erstellten "css"-Ordner gespeichert wird …
Später speichern wir diese Datei als "menu.html" im Ordner "menu_hover", der in Schritt 1 erstellt wurde.
VERGRÖSSERN
Schritt 3
Jetzt fügen wir unserer "menu.html" ein Label hinzu und legen fest, wie es auf dem Bildschirm angezeigt wird, indem wir seine Eigenschaften in der Datei style.css festlegen …
VERGRÖSSERN
VERGRÖSSERN
VERGRÖSSERN
Schritt 4
Ich möchte, dass mein Menü aus 4 Links besteht, um dies innerhalb des Etiketts zu erreichen, füge ich 4 hinzuMit der Klasse "box_menu", um sie zu identifizieren, werde ich jedem eine aufsteigende ID von "eins" auf "vier" hinzufügen.
VERGRÖSSERN
Schritt 5
In unserer Datei style.css werden wir die Eigenschaften für die Klasse "box_menu" und für die Layer "eins, zwei, drei und vier" hinzufügen.
Schritt 6
Wir beginnen, das Verhalten der Klasse "box_menu" zu definieren, indem wir eine relative Position festlegen. Denken Sie daran, dass wir in diesem Fall 4 Links haben und dass die Ebene, die sie enthält, dh 80% des Bildschirms einnimmt, also werden wir brauchen sie 4 Elemente mit der Klasse box_menu nehmen 100% des verfügbaren Platzes ein, dafür nehmen wir 100% und teilen es durch die Anzahl der Links oder Elemente, die wir platzieren möchten, da es in diesem Fall 4 gibt es wäre 100/4 = 25, denn unsere Klasse "box_menu" sollte also eine Breite von 25% haben. Wir geben ihm auch einen Stopp von 100 % und weisen ihn an, nach links zu schweben, damit die Elemente nebeneinander zu sehen sind.
VERGRÖSSERN
Schritt 7
Später werden wir die Hintergrundfarbe definieren, mit der wir jedes der Elemente anzeigen werden. In Schritt 4 fügen wir die ID von eins bis vier hinzu. Jetzt definieren wir in unserem CSS, wie jede dieser Ebenen aussehen wird. dafür werden wir folgendes tun …
VERGRÖSSERN
VERGRÖSSERN
Schritt 8
Nun gehen wir zurück zum Dokument "menu.html", wie wir es in Schritt 4 verlassen haben, jetzt werden wir die Symbole und den Text hinzufügen, den unser Menü haben wird. Dafür werden wir keine Bilder verwenden, aber wir gehen um uns ein wenig mit Bootstrap zu helfen und Wir werden Symbole aus dem Paket „Font Awesome“ verwenden, dafür gehen wir zum Browser und greifen auf das Web zu https: // fortawesome… .o / Font-Awesome / klicken Sie auf „Erste Schritte “-Menü und gehen Sie zum Abschnitt „EINFACHSTE: BootstrapCDN-Sektion von MaxCDN“.
VERGRÖSSERN
VERGRÖSSERN
VERGRÖSSERN
VERGRÖSSERN
VERGRÖSSERN
VERGRÖSSERN
VERGRÖSSERN
VERGRÖSSERN
VERGRÖSSERN
VERGRÖSSERN
Schritt 9
Die Icons sind ziemlich klein, ich werde ihre Größe dreimal erhöhen, dafür werde ich eine Klasse "fa-3x" hinzufügen.
VERGRÖSSERN
VERGRÖSSERN
Schritt 10
Jetzt werde ich die CSS-Datei ein wenig ändern, um den Effekt zu vervollständigen. Ich beginne damit, die Klasse "box_menu" zu ändern, den Text an der Mitte auszurichten und ihm ein display = "block";
VERGRÖSSERN
Schritt 11
Später werde ich eine Klasse schreiben, um zu steuern, wie die Symbole aussehen, in der ich definieren werde, dass sie weiß dargestellt werden, dass sie eine abgerundete Kante haben und dass sie eine Übergangsanimation haben …
VERGRÖSSERN
Schritt 12
Zu den Texten auf dem Etikett
Ich werde sie in Weiß platzieren und die Deckkraft etwas reduzieren, indem ich auch einen leichten Animationseffekt nach unten hinzufüge.
VERGRÖSSERN
Schritt 13
Jetzt definiere ich, wie sich unsere Elemente verhalten, wenn sie mit der Maus darüber fahren, und füge eine kleine Animation hinzu, um den Effekt abzuschwächen.
VERGRÖSSERN
Schließlich Ich werde Ihnen eine .zip mit dem Quellcode hinterlassenWenn Ihnen dieses Tutorial gefallen hat, hinterlassen Sie Ihren Kommentar, wenn etwas nicht klar war, fragen Sie mich bitte, wenn Sie ein Tutorial zu einem bestimmten Thema wünschen, lassen Sie es mich wissen …
Ich hoffe, das ist hilfreich für Sie, Grüße…
