Horizontaler Balken mit Hover-Effekt in HTML5, CSS3 und Bootstrap

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

Wie Sie im CSS sehen werden, habe ich eine "Hintergrundfarbe: Grün" hinzugefügt, dies dient nur zur Orientierung, um die Größe und Position der Kopfzeile auf dem Bildschirm zu sehen. Sie können mit den Größen, Schriftarten und anderen nach Ihren Wünschen spielen Einstellungen … ja gerade sehen wir es in unserem Browser wir hätten so etwas …

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

Dadurch erhalten wir folgendes Ergebnis:

VERGRÖSSERN

Wie Sie sehen, haben wir die Leerzeichen jedes Elements und seine Hintergrundfarbe bereits abgegrenzt. Sie können die Farbcodes nach Ihrem Geschmack verwenden, in diesem Fall handelt es sich nicht um eine Website mit einem bestimmten Thema, sondern um einen Test, den ich als verwendet habe eine Demonstration …

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

Ich kopiere den CDN-Link in das Font Awesome-Stylesheet und füge ihn in die Kopfzeile meines Dokuments "menu.html" ein.

VERGRÖSSERN

Damit können wir jetzt die Font Awesome Icons in unserem Design verwenden, aber jetzt müssen wir auswählen, welche Icons wir platzieren wollen, dafür kehren wir zu ihrer Website zurück und suchen das Menü "Icons".

VERGRÖSSERN

Wir durchsuchen die umfangreiche Liste nach dem Symbol, das uns interessiert und klicken darauf.

VERGRÖSSERN

Wenn wir darauf klicken, gelangen wir zu einem anderen Fenster, in dem wir den Code sehen können, um dieses Symbol in unser Design einzufügen.

VERGRÖSSERN

Wir kopieren es einfach und gehen zu unserer "menu.html" und fügen es in diewie folgt …

VERGRÖSSERN

VERGRÖSSERN

Wir werden auch einen Namen darunter hinzufügen, der zentriert ist …

VERGRÖSSERN

Schauen wir uns an, wie es in unserem Browser aussieht …

VERGRÖSSERN

Wir sehen, dass wir bereits ein Symbol und einen zentrierten Text hinzugefügt haben, also wiederholen wir diesen Schritt für die verbleibenden 3 Elemente.

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

Sobald dies erledigt ist, können wir sagen, dass wir den Effekt fertig entworfen haben, jetzt müssen wir nur noch die Links wie gewünscht hinzufügen. Ich bemerke, dass dieser Effekt auch verwendet werden kann, um Bilder mit beschreibendem Text darunter zu platzieren, wie z Zum Beispiel ein professionelles Portfolio, eine Galerie oder ein Produktkatalog, alles bleibt Ihrer Fantasie überlassen …
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…

Datei mit Quellcode… Hat dir dieses Tutorial gefallen und dir geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben