Horizontale balk met zweefeffect in html5, css3 en bootstrap

Wat hebben we nodig?

Een lokale server (ik heb je al verteld dat ik Xampp gebruik)
·
EEN code-editor (gebruik sublieme tekst 3)

Stap 1

Ik zal beginnen door naar de map van mijn lokale server te gaan en een nieuwe map te maken om dit project op te slaan, ik noem het "menu_hover" erin en voeg een andere toe om de css-bestanden te bevatten.

VERGROTEN

VERGROTEN

Stap 2

Nu zullen we in onze code-editor beginnen met het toevoegen van een nieuwe html5-structuur waaraan ik de stijlbladen zal toevoegen die overeenkomen met bootstrap van hun CDN-adressen om geen ruimte op onze server in beslag te nemen. Ik zal ook een stijlblad toevoegen, genaamd "stijl .css" die zal worden opgeslagen in onze "css"-map die eerder is gemaakt …
Later zullen we dit bestand opslaan als "menu.html" in de map "menu_hover" die in stap 1 is gemaakt.

VERGROTEN

Stap 3

Nu zullen we een label toevoegen aan ons "menu.html" en we zullen bepalen hoe het op het scherm zal worden weergegeven door de eigenschappen ervan in het style.css-bestand in te stellen …

VERGROTEN

VERGROTEN

Zoals je in de css zult zien, heb ik een "achtergrondkleur: groen" toegevoegd, dit is alleen voor begeleidingsdoeleinden om de grootte en positie van de kop op het scherm te zien, je kunt spelen met de maten, het lettertype en andere volgens je voorkeuren … ja op dit moment zien we het in onze browser, we zouden zoiets als dit hebben …

VERGROTEN

Stap 4

Ik wil dat mijn menu uit 4 links bestaat, om dit binnen het label te bereiken zal ik 4 . toevoegenMet de klasse "box_menu" om ze te identificeren, zal ik aan elk een oplopend ID toevoegen van "één" naar "vier".

VERGROTEN

Stap 5

In ons style.css-bestand zullen we de eigenschappen voor de "box_menu"-klasse en voor de "één, twee, drie en vier" lagen toevoegen.

Stap 6

We beginnen het gedrag van de klasse "box_menu" te definiëren door een relatieve positie vast te stellen, onthoud dat we in dit geval 4 links hebben en dat de laag die ze bevat, dat wil zeggen 80% van het scherm beslaat, dus we zullen heb ze nodig tot 4 elementen met de klasse box_menu bezetten 100% van de beschikbare ruimte erin, hiervoor nemen we 100% en delen dit door het aantal links of elementen dat we willen plaatsen, want in dit geval zijn er dan 4 het zou 100/4 = 25 zijn, want onze klasse "box_menu" zou dus een breedte van 25% moeten hebben. We zullen het ook een 100% stop geven en zeggen dat het naar links moet zweven, zodat de elementen naast elkaar worden gezien.

VERGROTEN

Stap 7

Later zullen we de achtergrondkleur definiëren waarmee we elk van de elementen gaan tonen, in stap 4 voegen we id toe van één tot vier, nu zullen we in onze css definiëren hoe elk van deze lagen eruit zal zien. hiervoor doen we het volgende…

VERGROTEN

Dit geeft ons het volgende resultaat:

VERGROTEN

Zoals u kunt zien, hebben we de spaties van elk element en de achtergrondkleur ervan al afgebakend, u kunt de kleurcodes naar uw smaak gebruiken, in dit geval omdat het geen website is met een specifiek thema maar een test. Ik heb deze gebruikt als een demonstratie …

Stap 8

Laten we teruggaan naar het document "menu.html" zoals we het in stap 4 hebben achtergelaten, nu gaan we verder met het toevoegen van de pictogrammen en de tekst die ons menu zal hebben. Hiervoor gaan we geen afbeeldingen gebruiken, maar we gaan om onszelf een beetje te helpen met bootstrap en we zullen pictogrammen uit het "Font Awesome" -pakket gebruiken, hiervoor gaan we naar de browser en openen we het web https: // fortawesome… .o / Font-Awesome / klik op de "Aan de slag ” menu en ga naar de “GEMAKKELIJKSTE: BootstrapCDN sectie door MaxCDN ”.

VERGROTEN

Ik zal de CDN-link naar de Font Awesome-stylesheet kopiëren en deze in de kop van mijn document "menu.html" plakken

VERGROTEN

Hiermee kunnen we nu de Font Awesome iconen gebruiken in ons ontwerp, maar nu moeten we kiezen welke iconen we gaan plaatsen, hiervoor gaan we terug naar hun website en zoeken het menu "Icons".

VERGROTEN

We zoeken in de uitgebreide lijst naar het icoon dat ons interesseert en klikken erop.

VERGROTEN

Wanneer we klikken, gaan we naar een ander venster waarin we de code kunnen zien om dat pictogram in ons ontwerp in te voegen.

VERGROTEN

We kopiëren het gewoon en gaan naar ons "menu.html" en plakken het in deals volgt …

VERGROTEN

VERGROTEN

We zullen er ook een naam onder toevoegen die gecentreerd is …

VERGROTEN

Laten we eens kijken hoe het eruit ziet in onze browser …

VERGROTEN

We zien dat we al een pictogram en een gecentreerde tekst hebben toegevoegd, dus we herhalen deze stap voor de resterende 3 elementen.

VERGROTEN

Stap 9

De pictogrammen zijn vrij klein, ik zal hun grootte 3 keer vergroten, hiervoor zal ik een klasse "fa-3x" toevoegen.

VERGROTEN

VERGROTEN

Stap 10

Nu zal ik het css-bestand een beetje aanpassen om het effect te voltooien, ik zal beginnen met het wijzigen van de klasse "box_menu" door de tekst uit te lijnen met het midden en het een display = "block" te geven;

VERGROTEN

Stap 11

Later zal ik een klasse schrijven om te bepalen hoe de pictogrammen eruit zullen zien, waarin ik zal definiëren dat ze in het wit worden weergegeven, dat ze een afgeronde rand om zich heen hebben en dat ze een overgangsanimatie hebben …

VERGROTEN

Stap 12

Over de teksten op het etiket

Ik zal ze in het wit plaatsen en ik zal de dekking een beetje verminderen door ook een licht neerwaarts animatie-effect toe te voegen.

VERGROTEN

Stap 13

Nu zal ik bepalen hoe onze elementen zich zullen gedragen als ze eroverheen zweven en ik zal er een kleine animatie aan toevoegen om het effect te verzachten.

VERGROTEN

Zodra dit is gebeurd, kunnen we zeggen dat we klaar zijn met het ontwerpen van het effect, nu moeten we alleen de links toevoegen op de manier die u wilt, ik merk op dat dit effect ook kan worden gebruikt om afbeeldingen met beschrijvende tekst eronder te plaatsen, zoals zoals Bijvoorbeeld een professionele portfolio, een galerij of een productcatalogus, alles wordt aan uw verbeelding overgelaten…
Uiteindelijk Ik zal je een .zip achterlaten met de broncodeAls je deze tutorial leuk vond, laat dan je reactie achter, als er iets niet duidelijk was, vraag het me dan, als je een tutorial over een specifiek onderwerp wilt, laat het me weten …
Ik hoop dat dit nuttig voor je is, groeten…

Bestand met broncode… Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven