Bara orizontală cu efect de hover în html5, css3 și bootstrap

De ce avem nevoie?

Un server local (v-am spus deja că folosesc Xampp)
·
A editor de cod (utilizați textul sublim 3)

Pasul 1

Voi începe prin a merge la directorul serverului meu local și a crea un folder nou pentru a stoca acest proiect, îl voi numi „menu_hover” în interiorul său și voi adăuga altul pentru a conține fișierele css.

MARI

MARI

Pasul 2

Acum, în editorul de coduri, vom începe prin adăugarea unei noi structuri html5 la care voi adăuga foile de stil corespunzătoare bootstrap-ului de la adresele CDN pentru a nu ocupa spațiu pe serverul nostru, voi adăuga și o foaie de stil, numită „stil .css "care va fi stocat în folderul nostru" css "creat mai devreme …
Mai târziu vom salva acest fișier ca „menu.html” în folderul „menu_hover” creat la pasul 1.

MARI

Pasul 3

Acum vom adăuga o etichetă la „menu.html” și vom stabili cum va fi afișată pe ecran setând proprietățile sale în fișierul style.css …

MARI

MARI

După cum veți vedea în CSS, am adăugat o „culoare de fundal: verde”, aceasta este doar în scop orientativ pentru a vedea dimensiunea și poziția antetului pe ecran, puteți juca cu dimensiunile, fontul și altele în funcție de preferințe … da chiar acum o vedem în browserul nostru am avea așa ceva …

MARI

Pasul 4

Vreau ca meniul meu să fie format din 4 linkuri, pentru a realiza acest lucru în cadrul etichetei voi adăuga 4Cu clasa „box_menu” pentru a le identifica, voi adăuga fiecăruia un id în creștere de la „unu” la „patru”.

MARI

Pasul 5

În fișierul nostru style.css vom adăuga proprietățile pentru clasa „box_menu” și pentru straturile „unu, doi, trei și patru”.

Pasul 6

Vom începe să definim comportamentul clasei „box_menu” stabilind o poziție relativă, amintiți-vă că în acest caz vom avea 4 link-uri și că stratul care le conține, adică ocupă 80% din ecran, așa că vom nevoie de ele până la 4 elemente cu clasa box_menu ocupă 100% din spațiul disponibil din interior, pentru aceasta vom lua 100% și îl vom împărți la numărul de link-uri sau elemente pe care dorim să le plasăm, deoarece în acest caz sunt 4 atunci ar fi 100/4 = 25, pentru că clasa noastră „box_menu” ar trebui să aibă o lățime de 25%. De asemenea, îi vom opri 100% și îi vom spune să plutească spre stânga, astfel încât elementele să fie văzute una lângă alta.

MARI

Pasul 7

Mai târziu vom defini culoarea de fundal cu care vom arăta fiecare dintre elemente, în pasul 4 adăugăm id de la unu la patru acum în CSS-ul nostru vom defini cum va arăta fiecare dintre aceste straturi. pentru aceasta vom face următoarele …

MARI

Acest lucru ne va oferi următorul rezultat:

MARI

După cum puteți vedea, am delimitat deja spațiile fiecărui element și culoarea sa de fundal, puteți utiliza codurile de culoare în funcție de gusturile dvs., în acest caz, deoarece nu este un site web cu o temă specifică, ci un test pe care le-am folosit ca o demonstrație …

Pasul 8

Ei bine, să revenim la documentul „menu.html” așa cum l-am lăsat la pasul 4, acum vom continua să adăugăm pictogramele și textul pe care îl va avea meniul nostru. Pentru aceasta nu vom folosi imagini, ci vom merge să ne ajutăm puțin cu bootstrap și vom folosi pictograme din pachetul „Font Awesome”, pentru aceasta mergem la browser și accesăm web https: // fortawesome …. .o / Font-Awesome / faceți clic pe „Începeți ”Și mergeți la„ EASIEST: BootstrapCDN section by MaxCDN ”.

MARI

Voi copia linkul CDN în foaia de stil Font Awesome și îl voi lipi în antetul documentului meu „menu.html”

MARI

Cu aceasta putem folosi acum pictogramele Font Awesome în designul nostru, dar acum trebuie să alegem ce pictograme vom plasa, pentru aceasta ne întoarcem la site-ul lor și localizăm meniul „Pictograme”.

MARI

Căutăm pe lista extinsă pictograma care ne interesează și facem clic pe ea.

MARI

Când facem clic, ne va duce la o altă fereastră în care putem vedea codul pentru a insera acea pictogramă în designul nostru.

MARI

Pur și simplu îl copiem și mergem la „menu.html” și îl lipim îndupă cum urmează …

MARI

MARI

De asemenea, vom adăuga un nume sub acesta care este centrat …

MARI

Să verificăm cum arată în browserul nostru …

MARI

Vedem că am adăugat deja o pictogramă și un text centrat, așa că repetăm ​​acest pas pentru celelalte 3 elemente.

MARI

Pasul 9

Pictogramele sunt destul de mici, le voi mări dimensiunea de 3 ori, pentru aceasta voi adăuga o clasă "fa-3x".

MARI

MARI

Pasul 10

Acum voi modifica puțin fișierul css pentru a finaliza efectul, voi începe prin modificarea clasei „box_menu” alinierea textului la centru și oferindu-i un display = „bloc”;

MARI

Pasul 11

Mai târziu voi scrie o clasă pentru a controla cum vor arăta icoanele, în care voi defini că sunt afișate în alb, că au o margine rotunjită în jurul lor și că au o animație de tranziție …

MARI

Pasul 12

În ceea ce privește textele de pe etichetă

Le voi așeza în alb și voi reduce puțin opacitatea adăugând și un ușor efect de animație descendentă.

MARI

Pasul 13

Acum voi defini modul în care se vor comporta elementele noastre atunci când trecem peste el și îi voi adăuga puțină animație pentru a atenua efectul.

MARI

Odată ce acest lucru este făcut, putem spune că am terminat de proiectat efectul, acum trebuie doar să adăugăm link-urile în modul dorit, comentez că acest efect poate fi folosit și pentru a plasa imagini care au text descriptiv sub ele, cum ar fi De exemplu, un portofoliu profesional, o galerie sau un catalog de produse, totul este lăsat pe seama imaginației …
La sfarsit Vă voi lăsa un .zip cu codul sursăDacă ți-a plăcut acest tutorial, lasă-ți comentariul, dacă a existat ceva care nu era clar te rog să mă întrebi, dacă vrei un tutorial pe un anumit subiect, anunță-mă …
Sper că acest lucru este util pentru tine, salutări …

Fișier cu cod sursă … Ți-a plăcut și ai ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv