Horisontell stapel med sveveffekt i html5, css3 och bootstrap

Vad behöver vi?

En lokal server (jag har redan berättat att jag använder Xampp)
·
A kodredigerare (använd sublim text 3)

Steg 1

Jag börjar med att gå till katalogen på min lokala server och skapa en ny mapp för att lagra detta projekt, jag kommer att kalla det "menu_hover" inuti det och lägga till en annan för att innehålla css -filer.

FÖRSTORA

FÖRSTORA

Steg 2

Nu i vår kodredigerare börjar vi med att lägga till en ny html5 -struktur som jag kommer att lägga till formatmallar som motsvarar bootstrap från deras CDN -adresser för att inte uppta utrymme på vår server, jag kommer också att lägga till ett formatmall, kallat "stil .css "som kommer att lagras i vår" css "-mapp som skapades tidigare …
Senare kommer vi att spara den här filen som "menu.html" i mappen "menu_hover" som skapades i steg 1.

FÖRSTORA

Steg 3

Nu lägger vi till en etikett i vår "menu.html" och vi fastställer hur den kommer att visas på skärmen genom att ange dess egenskaper i filen style.css …

FÖRSTORA

FÖRSTORA

Som du kommer att se i css har jag lagt till en "bakgrundsfärg: grön", detta är endast för vägledning för att se huvudets storlek och position på skärmen, du kan spela med storlekar, teckensnitt och andra enligt din inställningar … ja just nu ser vi det i vår webbläsare vi skulle ha något liknande …

FÖRSTORA

Steg 4

Jag vill att min meny ska bestå av 4 länkar, för att uppnå detta inom etiketten lägger jag till 4Med klassen "box_meny" för att identifiera dem kommer jag att lägga till ett ökande id från "ett" till "fyra".

FÖRSTORA

Steg 5

I vår style.css -fil lägger vi till egenskaperna för klassen "box_menu" och för "ett, två, tre och fyra" skikten.

Steg 6

Vi kommer att börja definiera beteendet för "box_meny" -klassen genom att upprätta en relativ position, kom ihåg att i detta fall kommer vi att ha 4 länkar och att lagret som innehåller dem, det vill säga upptar 80% av skärmen, så vi kommer att behöver dem till 4 element med box_menu -klassen upptar 100% av det tillgängliga utrymmet i den, för detta tar vi 100% och delar det med antalet länkar eller element som vi vill placera, eftersom det i det här fallet finns 4 då det skulle vara 100/4 = 25, för så borde vår klass "box_meny" ha en bredd på 25%. Vi kommer också att ge det ett 100% stopp och säga till det att flyta till vänster så att elementen syns sida vid sida.

FÖRSTORA

Steg 7

Senare kommer vi att definiera den bakgrundsfärg som vi ska visa vart och ett av elementen, i steg 4 lägger vi till id från ett till fyra nu i vår css kommer vi att definiera hur vart och ett av dessa lager kommer att se ut. för detta kommer vi att göra följande …

FÖRSTORA

Detta ger oss följande resultat:

FÖRSTORA

Som du kan se har vi redan avgränsat utrymmena för varje element och dess bakgrundsfärg, du kan använda färgkoderna efter din smak, i det här fallet eftersom det inte är en webbplats med ett specifikt tema utan ett test jag har använt dessa som en demonstration …

Steg 8

Låt oss gå tillbaka till dokumentet "menu.html" som vi lämnade det i steg 4, nu fortsätter vi att lägga till ikonerna och texten som vår meny kommer att ha. För detta kommer vi inte att använda bilder men vi går för att hjälpa oss lite med bootstrap och Vi kommer att använda ikoner från paketet "Font Awesome", för detta går vi till webbläsaren och går till webben https: // fortawesome … .o / Font-Awesome / klicka på "Kom igång ”-Menyn och gå ner till avsnittet” LÄTST: BootstrapCDN -sektionen med MaxCDN ”.

FÖRSTORA

Jag kommer att kopiera CDN -länken till typsnittet Font Awesome och klistra in den i rubriken i mitt dokument "menu.html"

FÖRSTORA

Med detta kan vi nu använda Font Awesome -ikonerna i vår design, men nu måste vi välja vilka ikoner vi ska placera, för detta återgår vi till deras webbplats och hittar menyn "Ikoner".

FÖRSTORA

Vi söker i den omfattande listan efter ikonen som intresserar oss och vi klickar på den.

FÖRSTORA

När vi klickar tar det oss till ett annat fönster där vi kan se koden för att infoga ikonen i vår design.

FÖRSTORA

Vi kopierar den helt enkelt och går till vår "menu.html" och klistrar in den isom följer …

FÖRSTORA

FÖRSTORA

Vi kommer också att lägga till ett namn under det som är centrerat …

FÖRSTORA

Låt oss kontrollera hur det ser ut i vår webbläsare …

FÖRSTORA

Vi ser att vi redan har lagt till en ikon och en centrerad text så vi upprepar detta steg för de återstående tre elementen.

FÖRSTORA

Steg 9

Ikonerna är ganska små, jag kommer att öka deras storlek 3 gånger, för detta lägger jag till en klass "fa-3x".

FÖRSTORA

FÖRSTORA

Steg 10

Nu kommer jag att ändra css -filen lite för att slutföra effekten, jag börjar med att ändra klassen "box_meny" och anpassa texten till mitten och ge den en display = "block";

FÖRSTORA

Steg 11

Senare kommer jag att skriva en klass för att styra hur ikonerna kommer att se ut, där jag kommer att definiera att de visas i vitt, att de har en rundad kant runt dem och att de har en övergångsanimation …

FÖRSTORA

Steg 12

Angående texterna på etiketten

Jag kommer att placera dem i vitt och jag kommer att minska opaciteten lite genom att lägga till en liten nedåtgående animeringseffekt också.

FÖRSTORA

Steg 13

Nu kommer jag att definiera hur våra element kommer att bete sig när de svävar över det och jag kommer att lägga till en liten animation för att mjuka upp effekten.

FÖRSTORA

När detta är gjort kan vi säga att vi har designat effekten färdigt, nu behöver vi bara lägga till länkarna på det sätt du vill, jag kommenterar att denna effekt också kan användas för att placera bilder som har beskrivande text under sig, som t.ex. Till exempel, en professionell portfölj, ett galleri eller en produktkatalog, allt är överlämnat till din fantasi …
I slutet Jag lämnar dig ett .zip med källkodenOm du gillade denna handledning, lämna din kommentar, om det var något som inte var klart, fråga mig, om du vill ha en handledning om ett specifikt ämne, låt mig veta …
Jag hoppas att detta är användbart för dig, hälsningar …

Fil med källkod … Gillade och hjälpte du den här självstudien?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng