Vodoravna traka s hover efektom u html5, css3 i bootstrapu

Što trebamo?

Lokalni poslužitelj (već sam vam rekao da koristim Xampp)
·
A uređivač koda (koristite uzvišeni tekst 3)

Korak 1

Počet ću tako što ću otići u direktorij svog lokalnog poslužitelja i stvoriti novu mapu za pohranu ovog projekta, nazvat ću ga "menu_hover" unutar njega i dodati još jedan koji će sadržavati css datoteke.

POVEĆAJTE

POVEĆAJTE

Korak 2

Sada ćemo u našem uređivaču koda početi dodavanjem nove html5 strukture u koju ću dodati stilske tablice koje odgovaraju bootstrapu s njihovih CDN adresa kako ne bi zauzele prostor na našem poslužitelju, dodat ću i stilsku tablicu, nazvanu "stil .css "koji će biti pohranjen u našoj ranije stvorenoj mapi" css "…
Kasnije ćemo ovu datoteku spremiti kao "menu.html" u mapu "menu_hover" stvorenu u 1. koraku.

POVEĆAJTE

Korak 3

Sada ćemo dodati oznaku u naš "menu.html" i ustanovit ćemo kako će se prikazivati ​​na ekranu postavljanjem njegovih svojstava u datoteci style.css …

POVEĆAJTE

POVEĆAJTE

Kao što ćete vidjeti u css-u, dodao sam "background-color: green", ovo je samo u svrhe usmjeravanja kako biste vidjeli veličinu i položaj zaglavlja na ekranu, možete se igrati s veličinama, fontom i drugim prema vašem postavke … da, upravo sada kada to vidimo u svom pregledniku, imali bismo nešto poput ovoga …

POVEĆAJTE

Korak 4

Želim da se moj izbornik sastoji od 4 veze, kako bih to postigao unutar oznake, dodat ću 4S klasom "box_menu" za njihovu identifikaciju svakom ću dodati sve veći ID s "jedan" na "četiri".

POVEĆAJTE

Korak 5

U našu datoteku style.css dodat ćemo svojstva za klasu "box_menu" i za slojeve "jedan, dva, tri i četiri".

Korak 6

Ponašanje klase "box_menu" počet ćemo definirati uspostavljanjem relativnog položaja, zapamtite da ćemo u ovom slučaju imati 4 veze i da sloj koji ih sadrži, odnosno zauzima 80% zaslona, ​​pa ćemo trebaju ih da 4 elementa s klasom box_menu zauzimaju 100% raspoloživog prostora unutar nje, za to ćemo uzeti 100% i podijeliti je s brojem veza ili elemenata koje želimo postaviti, jer u ovom slučaju postoje 4 tada to bi bilo 100/4 = 25, jer bi stoga naša klasa "box_menu" trebala imati širinu od 25%. Također ćemo mu dati 100% zaustavljanje i reći mu da pluta ulijevo, tako da se elementi vide jedan pored drugog.

POVEĆAJTE

Korak 7

Kasnije ćemo definirati boju pozadine s kojom ćemo prikazati svaki od elemenata, u koraku 4 dodajemo id od jedan do četiri, sada ćemo u našem css -u definirati kako će svaki od ovih slojeva izgledati. za to ćemo učiniti sljedeće …

POVEĆAJTE

To će nam dati sljedeći rezultat:

POVEĆAJTE

Kao što vidite, već smo ograničili razmake svakog elementa i njegovu boju pozadine, kodove boja možete koristiti prema svom ukusu, u ovom slučaju jer se ne radi o web stranici s određenom temom, već o testu koji sam koristio kao demonstracija …

Korak 8

Pa vratimo se na dokument "menu.html" kakav smo ostavili u koraku 4, sada ćemo nastaviti s dodavanjem ikona i teksta koji će imati naš izbornik. Za to nećemo koristiti slike, već idemo kako bismo si malo pomogli s pokretačkim programom i koristit ćemo ikone iz paketa “Font Awesome”, za to idemo u preglednik i pristupamo webu https: // fortawesome… .o / Font-Awesome / kliknite na “Započni ”I spustite se na“ NAJLAKŠE: BoCDstrap odjeljak MaxCDN -a ”.

POVEĆAJTE

Kopirat ću vezu CDN na tablicu stilova Font Awesome i zalijepiti je u zaglavlje dokumenta "menu.html"

POVEĆAJTE

S ovim sada možemo koristiti ikone Font Awesome u svom dizajnu, ali sada moramo izabrati koje ćemo ikone postaviti, za to se vraćamo na njihovu web stranicu i lociramo izbornik "Ikone".

POVEĆAJTE

Pretražujemo opsežni popis ikona koje nas zanimaju i kliknemo na nju.

POVEĆAJTE

Kad kliknemo, odvest će nas u drugi prozor u kojem možemo vidjeti kôd za umetanje te ikone u naš dizajn.

POVEĆAJTE

Jednostavno ga kopiramo i odlazimo na "menu.html" i zalijepimo ga ukako slijedi …

POVEĆAJTE

POVEĆAJTE

Također ćemo ispod dodati ime koje je centrirano …

POVEĆAJTE

Provjerimo kako to izgleda u našem pregledniku …

POVEĆAJTE

Vidimo da smo već dodali ikonu i centrirani tekst pa ponavljamo ovaj korak za preostala 3 elementa.

POVEĆAJTE

Korak 9

Ikone su prilično male, povećat ću njihovu veličinu 3 puta, za ovo ću dodati razred "fa-3x".

POVEĆAJTE

POVEĆAJTE

Korak 10

Sada ću malo izmijeniti css datoteku kako bih dovršio učinak, počet ću izmjenom klase "box_menu" poravnavajući tekst prema sredini i dajući mu display = "block";

POVEĆAJTE

Korak 11

Kasnije ću napisati razred za kontrolu izgleda ikona, u kojem ću definirati da su prikazane u bijeloj boji, da imaju zaobljen rub oko sebe i da imaju animaciju prijelaza …

POVEĆAJTE

Korak 12

Vezano za tekstove na etiketi

Postavit ću ih u bijelo, a malo ću smanjiti neprozirnost dodavanjem i laganog efekta animacije prema dolje.

POVEĆAJTE

Korak 13

Sada ću definirati kako će se naši elementi ponašati pri lebdenju iznad njega i dodat ću mu malo animacije kako bi ublažio učinak.

POVEĆAJTE

Nakon što to učinimo možemo reći da smo završili s osmišljavanjem efekta, sada samo trebamo dodati veze na način na koji želite, komentiram da se ovaj efekt može koristiti i za postavljanje slika koje imaju opisni tekst ispod sebe, kao što je Na primjer, profesionalni portfelj, galerija ili katalog proizvoda, sve je prepušteno vašoj mašti …
Na kraju Ostavit ću vam .zip s izvornim kodomAko vam se svidio ovaj vodič, ostavite svoj komentar, ako nešto nije jasno, pitajte me, ako želite tutorial o određenoj temi, javite mi …
Nadam se da vam je ovo korisno, pozdrav…

Datoteka s izvornim kodom … Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod