Vandret bjælke med svæveeffekt i html5, css3 og bootstrap

Hvad har vi brug for?

En lokal server (jeg har allerede fortalt dig, at jeg bruger Xampp)
·
EN kode editor (brug sublim tekst 3)

Trin 1

Jeg starter med at gå til biblioteket på min lokale server og oprette en ny mappe til at gemme dette projekt, jeg vil kalde det "menu_hover" inde i det og tilføje en anden for at indeholde css -filerne.

FORSTØRRE

FORSTØRRE

Trin 2

Nu i vores kodeditor starter vi med at tilføje en ny html5 -struktur, som jeg vil tilføje de stilark, der svarer til bootstrap fra deres CDN -adresser, for ikke at optage plads på vores server, jeg vil også tilføje et typografiark, kaldet "style .css ", som vil blive gemt i vores" css "-mappe, der blev oprettet tidligere …
Senere gemmer vi denne fil som "menu.html" i mappen "menu_hover" oprettet i trin 1.

FORSTØRRE

Trin 3

Nu tilføjer vi en etiket til vores "menu.html", og vi fastslår, hvordan den vises på skærmen ved at indstille dens egenskaber i filen style.css …

FORSTØRRE

FORSTØRRE

Som du vil se i css, har jeg tilføjet en "baggrundsfarve: grøn", dette er kun vejledende for at se overskriftens størrelse og position på skærmen, du kan lege med størrelser, skrifttype og andre i henhold til din præferencer … ja lige nu ser vi det i vores browser, vi ville have sådan noget …

FORSTØRRE

Trin 4

Jeg vil have, at min menu består af 4 links, for at opnå dette inden for etiketten tilføjer jeg 4Med klassen "box_menu" for at identificere dem vil jeg tilføje til hver en stigende id fra "en" til "fire".

FORSTØRRE

Trin 5

I vores style.css -fil tilføjer vi egenskaberne for klassen "box_menu" og for "et, to, tre og fire" lagene.

Trin 6

Vi vil begynde at definere adfærden for "box_menu" klassen ved at etablere en relativ position, husk at vi i dette tilfælde vil have 4 links, og at det lag, der indeholder dem, det vil sige fylder 80% af skærmen, så vi vil har brug for dem til 4 elementer med box_menu -klassen optager 100% af den ledige plads i den, for dette tager vi 100% og dividerer det med antallet af links eller elementer, som vi vil placere, da der i dette tilfælde er 4 derefter det ville være 100/4 = 25, for så skulle vores klasse "box_menu" have en bredde på 25%. Vi vil også give det et 100% stop og fortælle det at flyde til venstre, så elementerne ses side om side.

FORSTØRRE

Trin 7

Senere vil vi definere den baggrundsfarve, som vi skal vise hvert af elementerne med. I trin 4 tilføjer vi id fra et til fire nu i vores css vil vi definere, hvordan hvert af disse lag vil se ud. til dette vil vi gøre følgende …

FORSTØRRE

Dette vil give os følgende resultat:

FORSTØRRE

Som du kan se, har vi allerede afgrænset mellemrummet for hvert element og dets baggrundsfarve, du kan bruge farvekoderne efter din smag, i dette tilfælde, da det ikke er et websted med et specifikt tema, men en test, jeg har brugt disse som en demonstration …

Trin 8

Lad os gå tilbage til dokumentet "menu.html", da vi forlod det i trin 4, nu vil vi fortsætte med at tilføje ikonerne og den tekst, som vores menu har. Til dette vil vi ikke bruge billeder, men vi går for at hjælpe os selv lidt med bootstrap og Vi vil bruge ikoner fra pakken "Font Awesome", til dette går vi til browseren og får adgang til internettet https: // fortawesome … .o / Font-Awesome / klik på "Kom i gang ”-Menuen og gå ned til“ LETST: BootstrapCDN -sektionen med MaxCDN ”.

FORSTØRRE

Jeg kopierer CDN -linket til typografiarket Font Awesome og indsætter det i overskriften på mit dokument "menu.html"

FORSTØRRE

Med dette kan vi nu bruge Font Awesome -ikonerne i vores design, men nu skal vi vælge, hvilke ikoner vi skal placere, for dette vender vi tilbage til deres websted og finder menuen "Ikoner".

FORSTØRRE

Vi søger på den omfattende liste efter det ikon, der interesserer os, og vi klikker på det.

FORSTØRRE

Når vi klikker, tager det os til et andet vindue, hvor vi kan se koden for at indsætte det ikon i vores design.

FORSTØRRE

Vi kopierer det ganske enkelt og går til vores "menu.html" og indsætter det isom følger …

FORSTØRRE

FORSTØRRE

Vi tilføjer også et navn under det, der er centreret …

FORSTØRRE

Lad os kontrollere, hvordan det ser ud i vores browser …

FORSTØRRE

Vi ser, at vi allerede har tilføjet et ikon og en centreret tekst, så vi gentager dette trin for de resterende 3 elementer.

FORSTØRRE

Trin 9

Ikonerne er ret små, jeg vil øge deres størrelse 3 gange, for dette vil jeg tilføje en klasse "fa-3x".

FORSTØRRE

FORSTØRRE

Trin 10

Nu vil jeg ændre css -filen lidt for at fuldføre effekten, jeg vil starte med at ændre klassen "box_menu", så teksten justeres til midten og giver den et display = "block";

FORSTØRRE

Trin 11

Senere vil jeg skrive en klasse for at kontrollere, hvordan ikonerne vil se ud, hvor jeg vil definere, at de vises i hvidt, at de har en afrundet kant omkring dem, og at de har en overgangsanimation …

FORSTØRRE

Trin 12

Angående teksterne på etiketten

Jeg vil placere dem i hvidt, og jeg vil reducere opaciteten en smule ved også at tilføje en lille nedadgående animationseffekt.

FORSTØRRE

Trin 13

Nu vil jeg definere, hvordan vores elementer vil opføre sig, når de svæver over det, og jeg vil tilføje en lille animation til det for at dæmpe effekten.

FORSTØRRE

Når dette er gjort, kan vi sige, at vi er færdige med at designe effekten, nu mangler vi bare at tilføje linkene på den måde, du ønsker, jeg kommenterer, at denne effekt også kan bruges til at placere billeder, der har beskrivende tekst under dem, som f.eks. For eksempel, en professionel portefølje, et galleri eller et produktkatalog, alt er overladt til din fantasi …
Til sidst Jeg efterlader dig et .zip med kildekodenHvis du kunne lide denne vejledning, skal du efterlade din kommentar. Hvis der var noget, der ikke var klart, så spørg mig, hvis du gerne vil have en vejledning om et bestemt emne, lad mig vide …
Jeg håber dette er nyttigt for dig, hilsen …

Fil med kildekode … Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt