Ispravan dizajn menija u html5 css3. CSS - horizontalni meni za početnike

Od autora: Dobrodošli na naš blog za izradu web stranica. Ovo je serija članaka posvećenih novoj specifikaciji, a danas bih vam htio reći kako napraviti meni u html5 i po čemu se ovaj proces razlikuje od istog u prethodnim verzijama jezika.

Koje su razlike

Prije svega, želio bih reći da specifikacija nije tako nova - počela je da se formira još 2009. godine. Zapravo, od tada postoji konstantan razvoj - pojavljuju se nove funkcije u html5, moderni pretraživači sve više podržavaju upravo te mogućnosti, tako da ćemo uskoro moći govoriti o punoj podršci ove tehnologije, iako to nije nešto objedinjeno, već je prije skup novih karakteristika, od kojih je svaka nezavisna.

Pa, koja je razlika između kreiranja glavne navigacije (menija), pošto čitate članak na ovu temu, onda svakako mora postojati neke razlike. Pa, kako je jelovnik kreiran prije? Obično se za to koristila lista sa nabrajanjem, koja je bila smještena u dodatni kontejner za svu navigaciju - običan div.

Dakle, s pojavom novih oznaka, sada to možete učiniti ispravnije - umjesto div oznake, umotajte meni u nav - novi semantički element koji je kreiran posebno da prikupi najvažnije veze u njega, grupiše ih zajedno.

Možete staviti i listu i samo skup linkova u navigaciju. Čini mi se da je ovo još jednostavnije i ispravnije rješenje, iako se u mnogim šablonima još uvijek može vidjeti implementacija menija pomoću ul, li, oznaka.

Zanimljivo je da je navigacijski kontejner dizajniran posebno za prioritetne veze na stranici. Zapravo, na stranici može biti više od jednog takvog kontejnera, ali vrijedi u njih staviti samo one veze koje stvarno čine glavnu navigaciju (na primjer, gornji glavni izbornik i njegov duplikat u podnožju stranice).

Kako napraviti horizontalni meni koristeći html5

Ne treba vam čak ni okvir na listi, sve će u početku biti prikazano u jednom redu, pošto su veze inline elementi.

Druga stvar je da su oni vrlo ograničeni u dizajnu zbog svojih inline svojstava. Moći ćete raditi samo sa takvim svojstvima kao što su: boja, veličina fonta, margine. Ako želite da postavite određenu boju pozadine, napravite separatore i dodate uvlake (ili odredite veličinu svake stavke menija), onda ovo neće raditi sa nizom.

Ovdje ćemo morati pretvoriti naše stavke u blok elemente. Da bi to učinili, moraju napisati svojstvo:

displej : blok ;

Sada idu odozgo prema dolje, odnosno naša navigacija je postala okomita. Da biste ga vratili u horizontalni, morate dodati određena svojstva. Na primjer, umjesto tipa bloka, definirajte za njih tip blok-linije ili ih postavite na (float: lijevo). Pročitajte više o ovim metodama.

Vertikalna navigacija

Obično se za pravljenje vertikalnog menija u html5 koristi lista, ali i oznaka koju sam vam dao iznad je takođe dobra za nas. Kao što ste vidjeli, ako konvertujete veze u blok veze, one će se automatski nizati jedna za drugom od vrha do dna, jer dva bloka ne mogu stajati na istoj liniji.

Sada na njih možete primijeniti željena pravila dizajna. Blokovi imaju mnogo više svojstava od inline elemenata, tako da imate mnogo više opcija. Na primjer, dodao sam ove:

a( dekoracija teksta: nema; boja: #fff; padding: 5px; veličina fonta: 22px; prikaz: blok; pozadina: linearni gradijent(na desno, rgba(96,108,136,1) 0%,rgba(63,76,107) ,1) 100%); širina: 200px; poravnanje teksta: centar )

tekst - dekoracija: nema;

boja : #fff;

padding: 5px

font-size : 22px ;

displej : blok ;

pozadina: linearni gradijent (na desno, rgba (96, 108, 136, 1) 0 %, rgba (63, 76, 107, 1) 100 %);

širina: 200px

tekst - poravnaj : centar

Horizontalni meni je lista sekcija stranice, pa je logičnije označiti unutar elementa

Kako napraviti horizontalni meni: primjeri označavanja i dizajna

HTML oznake i osnovni stilovi za horizontalni meni

Podrazumevano se nalaze sve stavke liste vertikalno, obuhvata cijelu širinu elementa kontejnera, koji zauzvrat pokriva cijelu širinu njegovog bloka kontejnera.

HTML oznake za horizontalnu navigaciju

Stavka menija
Stavka menija
Stavka menija

Horizontalni meni koji se nalazi unutar oznake može se dodatno postaviti unutar elementa

...

dodatna prilika

Postoji nekoliko načina da ih postavite horizontalno. Prvo morate resetirati zadane stilove pretraživača za elemente navigacije:

Ul ( stil liste: nema; /*ukloni oznake liste*/ margina: 0; /*ukloni gornju i donju marginu 1em*/ padding-left: 0; /*ukloni lijevi padding od 40px*/ ) a (dekoracija teksta: nema; /*uklonite podvlačenje teksta linka*/)

Metoda 1. li (prikaz: inline;)

Stavite stavke liste inline. Kao rezultat toga, oni su raspoređeni horizontalno, na desnoj strani, između njih se dodaje razmak od 0,4em (izračunato u odnosu na veličinu fonta). Da biste je uklonili, dodajte negativnu desnu marginu li li (margin-desno: -4px;) . Zatim stilizirajte veze kako želite.

Metoda 2. li (float: lijevo;)

Elemente liste činimo plutajućim. Kao rezultat toga, oni su raspoređeni vodoravno. Visina bloka kontejnera ul postaje nula. Da bismo riješili ovaj problem, dodamo (prelijevanje: skriveno;) u ul, proširujući ga i tako mu omogućavajući da sadrži plutajuće elemente. Za veze dodajte (prikaz: blok;) i stilizirajte ih kako želite.

Metoda 3. li (prikaz: inline-block;)

Pravljenje stavki liste inline-blok. Oni su raspoređeni vodoravno, na desnoj strani se formira jaz, kao u prvom slučaju. Za veze dodajte (prikaz: blok;) i stilizirajte ih kako želite.

Metoda 4. ul (prikaz: flex;)

Pretvaranje ul liste u fleksibilan kontejner pomoću . Kao rezultat toga, elementi liste su postavljeni horizontalno. Dodajte (prikaz: blok;) za veze i stilizirajte ih kako želite.

1. Responzivni meni sa efektom podvlačenja kada pređete mišem preko veze

2. Responzivni meni za web stranicu za vjenčanje

3. Odaziv meni sa jakom kapicom

4. Responsive Ribbon Menu

5. Responsivan meni sa logom u sredini

6. Responzivni meni sa logom na lijevoj strani

Prije svega, hajde da shvatimo čemu služi meni i čemu služi.

meni sajta- ovo je lista stranica ili sekcija sajta, postavljenih na istaknuto mesto, i namenjenih za pristup korisnika ovim stranicama ili sekcijama. Meniji su dva tipa: glavni i dodatni. Tipično, glavni meni sadrži veze do ključnih dijelova stranice. Dodatni meniji obično sadrže veze ka pododjeljcima ili određenim stranicama. Pored toga, meniji mogu imati hijerarhijsku strukturu od 3 tipa: padajuće liste, padajuće liste i proširene liste (mogu imati strukturu stabla).

Dakle, otkrili smo da je meni lista na jednom ili više nivoa. U skladu s tim, to ćemo učiniti uz pomoć elementa koji predstavlja listu. U HTML-u takvi elementi su definisani oznakama ul I ol, označavajući liste sa nabrajanjem i numerisane liste, respektivno. Svaki element liste je omeđen oznakom li.

U našem web dokumentu, na mjesto predviđeno za kod horizontalnog menija, upišite sljedeći HTML kod:

Usluge i cijene

Garancije

Tehnologije

O kompaniji

Ova lista će biti glavni meni naše stranice. Nije potrebno praviti glavni meni u obliku obeleživača. Možete čak koristiti proširivi ili padajući meni na više nivoa, ili bilo šta drugo, ali kada dizajnirate meni, obratite pažnju na jednostavnost navigacije. U pravilu, što je manji ugniježđeni meni, to je praktičniji. Stoga, meni koji ima više od jednog nivoa ugniježđenja nije najbolji izbor. U tom slučaju je bolje razmotriti mogućnost uvođenja dodatnog menija, ili nekog drugog načina navigacije.

Prvi element glavnog menija ima atribut klasa sa značenjem odabrano, tako da koristeći CSS pravilo koje je dao selektor sa ovim imenom klase, možemo istaći karticu menija definisanu ovim elementom. U ovom primjeru nećemo ni na koji način isticati odabrani element. Međutim, ovako se kreiraju meniji koji imaju trenutno odabranu karticu. Osim toga, ovdje svi linkovi vode na trenutnu stranicu. U pravom meniju, linkovi koji vode do sebe ne bi trebali biti, osim možda veze na glavnu stranicu. Takođe, sve veze su zatvorene u tag raspon, trebat će nam da vertikalno centriramo tekst.

Liste u HTML-u su blok elementi. Ako sada otvorite našu web stranicu u pretraživaču, vidjet ćete da su veze u našem meniju postavljene jedna ispod druge. Stoga, zajedno sa stilom svakog elementa koji definira karticu, moramo definirati stil njegovog prikaza.

Dodajte sljedeća pravila u datoteku stila:

#hmenu(
margin-left: 160px; /* služi za poravnavanje menija tako da počinje iznad oblasti sadržaja */
}

/* stilizirajte karticu */
#hmenu li (
/* postavi font */
font-family: Calibri;
veličina fonta: 14px;
/* padding od vrha */
margin-top: 5px;
/* razmak između tabova */
margin-left: 0.5em
margin-desno: 0.5em
/* pokazivač miša */
kursor: pokazivač;
/* Pozadina */
background-image: url("mm_button.png");
background-repeat: bez ponavljanja;
/* dimenzije kartice */
širina: 100px
visina: 40px;
/* napravi element i inline i blok u isto vrijeme */
prikaz: inline-block
}

/* stil aktivne kartice */
.selected( /* ... */)

/* kartica na pokazivaču */
#hmenu li:hover(
background-image: url("mm_button_hover.png");
}

/* stiliziranje teksta linkova */
#hmenu li a (
boja: zelena;
tekst-dekoracija: nema; /* onemogući podvlačenje veze */
}

/* okomito centrirajte tekst */
#hmenu li a span (
display:block; /* napravi blok elemenata */
padding-top: 0,8em;
padding-bottom: 0.8em
}

Ovdje je sve opisano unutar koda, samo ću napomenuti da će korištenjem CSS koda iznad, samo moderni pretraživači ispravno prikazati stranicu. To jest, u Internet Explorer ispod verzije 8, stranica će biti pogrešno prikazana. To je zato što stariji pretraživači kao što su Internet Explorer 6 i 7 ne podržavaju inline i inline-block vrijednosti za liste. Zamjena prikaza: inline-blok linija u drugom pravilu sa

/* za niže verzije Firefoxa */
prikaz: -moz-inline-stack;
/* za sve osim IE 7- i Firefoxa */
prikaz: inline-block
/* Za IE 7 i starije verzije */
*display:inline;
_overflow: skriveno;
zumiranje: 1;

Slično, kreiraćemo meni sa leve strane.

Dijagnostika

Prevencija

Tretman

Operacija

Hajde da ga stilizujemo sa CSS-om.

#vmenu li a (
boja:zelena;
text-decoration:none;
}

#vmenu li(
font-family: Calibri;
font-size:14px;
font-style:normal;
širina:115px;
display:block;
overflow:hidden; /* sakrij pop-up elemente */
padding:0.5em 0em 0.5em 0;
/* učini da element izgleda kao dugme postavljanjem odgovarajuće pozadine */
background-image:url("sm_button.png");
background-position:center;
background-repeat:no-repeat;
}

#vmenu li a span (
širina:100px;
padding-left:1em;
padding-right:100px;
display:block;
}

#vmenu li:hover(
background-image:url("sm_button_hover.png");
}

Takođe, kao iu prethodnom slučaju, u nižim verzijama Internet Explorer-a će se pojaviti greška na ekranu. To je povezano sa udvostručavanjem uvlaka elemenata u ovom pretraživaču.

U sljedećoj lekciji dovršit ćemo izgled naše stranice postavljanjem logotipa, sadržaja i podnožja stranice.

Ako vaša web stranica nije ograničena na jednu web stranicu, razmislite o dodavanju navigacijske trake (menija). Izbornik je dio web stranice dizajniran da pomogne posjetitelju da se kreće po stranici. Svaki meni je lista linkova koji vode do internih stranica sajta. Najlakši način da dodate navigacijsku traku na svoju web lokaciju je kreiranje menija koristeći CSS i HTML.

Vertikalni meni

Prvi korak u kreiranju vertikalnog menija je kreiranje liste sa nabrajanjem. Također moramo biti u mogućnosti identificirati listu, pa ćemo joj dodati id atribut sa id "navbar". Svaki element

naša lista će sadržavati jedan link:
- Dom
- Vijesti
- Kontakti
- O nama
Naš sljedeći zadatak je resetiranje zadanih stilova liste. Moramo ukloniti vanjske i unutrašnje uvlake sa same liste i markere sa stavki liste. Zatim postavite željenu širinu:
#navbar ( margina: 0; padding: 0; tip-stil liste: nijedan; širina: 100px; )
Sada je vrijeme za stiliziranje samih veza. Dodat ćemo im boju pozadine, promijeniti parametre teksta: boju, veličinu i zasićenost fonta, ukloniti podcrtanu crtu, dodati male uvlake i redefinirati prikaz element iz inline u blok. Dodatno, lijevi i donji okviri su dodani na stavke liste.
Najvažniji dio naših promjena je redefiniranje inline elemenata u blok elemente. Sada naše veze zauzimaju cijeli raspoloživi prostor stavki liste, što znači da više ne moramo preći preko tačnog teksta da bismo pratili vezu.
#navbar a (boja pozadine: #949494; boja: #fff; padding: 5px; dekoracija teksta: nema; font-weight: bold; border-left: 5px čvrsta #33ADFF; display: block; ) #navbar li ( border-left: 10px solid #666; border-bottom: 1px solid #666; )
Kombinirali smo sav gornji kod u jedan primjer, sada klikom na dugme probaj možete otići na stranicu sa primjerom i vidjeti rezultat:
Ime dokumenta
- Dom
- Vijesti
- Kontakti
- O nama
Pokušajte »
Kada pređete mišem preko stavke menija, ona izgled može se promijeniti kako bi privukao pažnju korisnika. Možete kreirati takav efekat koristeći :hover pseudo-klasu.

Vratimo se na naš raniji primjer vertikalnog menija i dodajmo sljedeće pravilo u stilove:
#navbar a:hover (boja pozadine: #666; granica lijevo: 5px čvrsta #3333FF; ) Pokušajte »
Horizontalni meni

U prethodnom primjeru pogledali smo vertikalnu navigacijsku traku, koja se najčešće viđa na web stranicama lijevo ili desno od područja glavnog sadržaja. Međutim, meniji sa vezama za navigaciju se takođe često nalaze horizontalno na vrhu web stranice.

Horizontalni meni se može kreirati stilizovanjem obične liste. Prikaz svojstva za elemente
trebate dodijeliti vrijednost inline tako da se stavke liste nalaze jedna za drugom.

Da biste rasporedili stavke menija horizontalno, prvo kreirajte listu sa nabrajanjem sa vezama:
- Dom
- Vijesti
- Kontakti
- O nama
Hajde da napišemo nekoliko pravila za našu listu koja resetuju stil koji se podrazumevano koristi za liste i redefiniše stavke liste iz bloka u inline:
#navbar ( margina: 0; padding: 0; tip-stil liste: nijedan; ) #navbar li ( display: inline; ) Pokušajte »
Sada samo trebamo definirati stil za naš horizontalni meni:
#navbar ( margina: 0; padding: 0; tip-stil liste: nijedan; granica: 2px čvrsta #0066FF; radijus granice: 20px 5px; širina: 550px; poravnanje teksta: centar; boja pozadine: #33ADFF; ) #navbar a ( boja: #fff; padding: 5px 10px; text-decoration: nema; font-weight: bold; display: inline-block; širina: 100px; ) #navbar a:hover ( border-radius: 20px 5px ; boja pozadine: #0066FF; ) Pokušajte »
Padajući meni

Meni koji ćemo kreirati imat će glavne navigacijske veze smještene u horizontalnoj navigacijskoj traci i podstavke koje će biti prikazane samo kada se kursor miša pređe preko stavke menija kojoj ove podstavke pripadaju.

Prvo treba da kreiramo HTML strukturu našeg menija. Postavićemo glavne navigacijske veze u listu sa nabrajanjem:
- Dom
- Vijesti
- Kontakti
- O nama
Postavićemo podstavke u posebnu listu tako što ćemo je ugniježditi u element
, koji sadrži vezu roditelja u odnosu na podstavke. Sada imamo jasnu strukturu naše buduće navigacijske trake:
- Dom
- Vijesti
- Kontakti
  - Adresa
  - Telefon
  - Email
- O nama
Pokušajte »
Sada počnimo pisati CSS kod. Prvi korak je sakrivanje liste sa podstavkama sa prikazom: nema; deklaracija kako se ne bi stalno pojavljivale na web stranici. Da bismo prikazali podstavke, to nam je potrebno kada pređemo mišem iznad elementa

lista je ponovo konvertovana u blok element:

#navbar ul ( display: none; ) #navbar li:hover ul ( display: block; )

Uklanjamo podrazumevane uvlake i markere sa obe liste. Elemente liste pravimo sa plutajućim vezama za navigaciju, formirajući horizontalni meni, ali za elemente liste koji sadrže podstavke postavljamo float: none; tako da se pojavljuju jedno ispod drugog.

#navbar, #navbar ul ( margina: 0; padding: 0; tip-stil liste: nijedan; ) #navbar li ( float: lijevo; ) #navbar ul li ( float: nema; )

Zatim, moramo biti sigurni da naš padajući meni podmenija ne gura sadržaj ispod navigacijske trake prema dolje. Da bismo to uradili, postavićemo stavke liste na poziciju: relativno; , ali lista koja sadrži podstavke pozicija: apsolutna; i dodajte top svojstvo sa vrijednošću od 100% tako da se apsolutno pozicionirani podmeni pojavi tačno ispod linka.

#navbar ul ( prikaz: nema; pozicija: apsolutna; vrh: 100%; ) #navbar li ( float: lijevo; pozicija: relativna; ) #navbar (visina: 30px; ) Pokušajte »

Visina za nadređenu listu je namjerno dodana, budući da pretraživači ne smatraju plutajući sadržaj sadržajem elementa, bez dodavanja visine, pretraživač će zanemariti našu listu i sadržaj koji slijedi nakon liste će se omotati oko našeg menija.

Sada samo trebamo stilizirati obje naše liste i naš padajući meni će biti spreman:

#navbar ul (prikaz: nema; boja pozadine: #f90; pozicija: apsolutna; vrh: 100%; ) #navbar li:hover ul (prikaz: blok; ) #navbar, #navbar ul ( margina: 0; padding: 0; tip-stila liste: nijedan; ) #navbar (visina: 30px; boja pozadine: #666; padding-left: 25px; min-width: 470px; ) #navbar li (float: lijevo; položaj: relativan; visina: 100%; ) #navbar li a (prikaz: blok; padding: 6px; širina: 100px; boja: #fff; text-decoration: nema; text-align: center; ) #navbar ul li (float: nema; ) #navbar li:hover (boja pozadine: #f90; ) #navbar ul li:hover (boja pozadine: #666; )

Većina klasičnih stranica na webu koristi horizontalni meni kao glavni navigacijski element. Ponekad može sadržavati razne dodatne karakteristike - strukture na više nivoa, ikone za podstavke, blok za pretragu, složene liste itd. Nedavno je na blogu već bio mali izbor, a danas ćemo pogledati 4 praktična primjera kako napraviti padajući meni u CSS + HTML. Informacije su korisne za programere početnike i one koji žele promijeniti navigaciju na svojoj web stranici.

Prvi vodič za CSS3 padajući meni je najnoviji u kolekciji (datirani u aprilu 2016.). Prednosti rešenja: u ovom horizontalnom padajućem meniju za sajt se nalaze ikone u podstavkama, implementacija i sam CSS kod su prilično jednostavni za razumevanje i implementaciju.

Korak 1 - HTML markiranje

Prvi korak je kreiranje neuređene liste u HTML-u sa sidrenim vezama (#) za njegove elemente. Tamo, u jednu od stavki, dodajemo još jednu ugniježđenu listu koja će biti odgovorna za podmeni.

Korak 2 - prikaz menija

Uklanjanje dodatnih dopuna u CSS-u za elemente horizontalnog padajućeg menija sajta. U istoj fazi postavićemo fiksnu širinu i visinu stavki menija, a takođe ćemo dodati zaobljene uglove.

.menu, .menu ul, .menu li, .menu a ( margina : 0 ; padding : 0 ; granica : nema ; outline : nijedan ; ) .menu ( visina : 40px ; širina : 505px ; pozadina : #4c4e5a ; pozadina : -webkit-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; pozadina: -moz-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; pozadina: -o-linear-gradient (vrh , #4c4e5a 0% , #2c2d33 100% ) ; pozadina : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; pozadina: linearni gradijent (top , #4c4e5a 0% 2c2d33 100% ) ; -webkit-border-radius: 5px ; -moz-border-radius: 5px ; border-radius : 5px ; ) .menu li (pozicija: relativna; stil liste: nijedan; float: lijevo; prikaz: blok ; visina : 40px ;)

Meni, .menu ul, .menu li, .menu a ( margina: 0; padding: 0; granica: nema; obris: nema; ) .menu (visina: 40px; širina: 505px; pozadina: #4c4e5a; pozadina: - webkit-linear-gradient(vrh, #4c4e5a 0%,#2c2d33 100%); pozadina: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); pozadina: -o-linear-gradient( vrh, #4c4e5a 0%,#2c2d33 100%); pozadina: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); pozadina: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) .menu li (pozicija: relativna; stil liste: nijedan; float: lijevo; prikaz: blok ; visina: 40px;)

Korak 3 - dizajn linka

Pored osnovnih karakteristika u stilovima (font, boja, visina), koristimo i kreiramo glatki prelaz boje teksta pri lebdenju. U meni dodajemo i separatore, uklanjajući granicu od prve stavke s lijeve strane i posljednje stavke s desne strane.

.menu li a ( display : block ; padding : 0 14px ; margina : 6px 0 ; line-height : 28px ; text-decoration : nema ; border-left : 1px solid #393942 ; border-right : 1px solid #4f5058 ; font -family : Helvetica, Arial, sans-serif ; font-weight : bold ; font-size : 13px ; boja : #f3f3f3 ; text-shadow : 1px 1px 1px rgba (0 , 0 , 0 , .6-) ; -webkit prijelaz: boja .2s lakoća ulaska; -moz-prijelaz: boja .2s lakoća ulaska; -o-prijelaz: boja .2s lakoća ulaska; -ms-prijelaz: boja .2s lakoća ulaska -izlaz; prijelaz : boja .2s jednostavnog ulaska; ) .meni li: prvo dijete a ( granica-lijevo : nema ; ) .meni li: posljednje dijete a( granica-desno : nema ; ) .meni li : hover > a ( boja : #8fde62 ; )

Meni li a (prikaz: blok; padding: 0 14px; margina: 6px 0; visina linije: 28px; dekoracija teksta: nema; granica lijevo: 1px čvrsta #393942; granica desno: 1px čvrsta #4f5058; font- porodica: Helvetica, Arial, sans-serif; težina fonta: bold; veličina fonta: 13px; boja: #f3f3f3; sjena teksta: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : lakoća ulaska u boji .2s; -moz-prijelaz: boja .2s lakoća ulaska; -o-prijelaz: lakoća ulaska u boji .2s; -ms-prijelaz: boja .2s lakoća ulaska- izlaz; prijelaz: boja .2s lako ulazak; ) .meni li:prvo dijete a (borvica-lijevo: nema; ) .meni li:posljednje dijete a( granica-desno: nema; ) .meni li: hover > a ( boja: #8fde62; )

Korak 4 - podmeni

Pošto imamo padajući meni CSS sajta, trebalo bi da postavimo i dizajn ugnežđene liste. Prvo postavite padding na 40px na vrhu i 0px na lijevoj + dodajte zaobljene uglove. Da bismo prikazali/sakrili podmeni, inicijalno smo postavili svojstvo neprozirnosti na nulu, a pri lebdenju na jedan. Da biste kreirali efekat izgleda podmenija, postavite visinu liste na nulu i lebdite = 36px.

.menu ul ( pozicija : apsolutna ; vrh : 40px ; lijevo : 0 ; neprozirnost : 0 ; pozadina : #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5px 5px ; granica -radius: 0 0 5px 5px; -webkit-transition: neprozirnost .25s lakoća .1s; -moz-transition: neprozirnost .25s lakoća .1s; -o-transition: neprozirnost .25s lakoća .1s; -ms-transition: neprozirnost .25s lakoća .1s; .25s ease .1s ; prijelaz : neprozirnost .25s ease .1s ; ) .menu li: hover > ul ( opacity : 1 ; ) .menu ul li (visina : 0 ; overflow : skriveno ; padding : 0 ; -webkit-transition : . : visina .25s lakoća .1s ; -moz-prijelaz: visina .25s lakoća .1s ; -o-prijelaz: visina .25s lakoća .1s ; -ms-prijelaz: visina .25s lakoća .1s ; prijelaz : visina .25s lakoća .1s ; .1s ; ) .meni li: hover > ul li (visina: 36px; prelivanje: vidljivo; padding: 0 ;)

Meni ul ( pozicija: apsolutna; vrh: 40px; lijevo: 0; neprozirnost: 0; pozadina: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- radijus: 0 0 5px 5px; -webkit-transition: neprozirnost .25s lakoća .1s; -moz-transition: neprozirnost .25s lakoća .1s; -o-transition: neprozirnost .25s lakoća .1s; -ms-transition: neprozirnost .25s lakoća .1s; 25s ease .1s; prijelaz: neprozirnost .25s ease .1s; ) .menu li:hover > ul (prozirnost: 1; ) .menu ul li (visina: 0; prelijevanje: skriveno; padding: 0; -webkit-transition: visina .25s lakoća .1s; -moz-prijelaz: visina .25s lakoća .1s; -o-prijelaz: visina .25s lakoća .1s; -ms-prijelaz: visina .25s lakoća .1s; prijelaz: visina .25s lakoća . 1s; ) .menu li:hover > ul li (visina: 36px; overflow: vidljivo; padding: 0; )

Postavljamo širinu linkova = 100px, na dnu svih elemenata osim posljednjeg dodaje se granica donje granice. Takođe, ako želite, možete postaviti slike za stavke podmenija (pažnja! ne zaboravite da promenite putanje do slika u kodu na one koje koristite).

.menu ul li a ( širina : 100px ; padding : 4px 0 4px 40px ; margina : 0 ; granica : nema ; border-bottom : 1px solid #353539 ; ) .menu ul li: last-child a ( granica: nema ; ) .menu a.documents (pozadina: url (../img/docs.png) bez ponavljanja 6px centar; ) .meni a.messages (pozadina: url (../img/bubble.png) bez ponavljanja 6px centar ; ) .meni a.signout (pozadina: url (../img/arrow.png) bez ponavljanja 6px centar ;)

Menu ul li a (širina: 100px; padding: 4px 0 4px 40px; margina: 0; granica: nema; border-bottom: 1px solid #353539; ) .menu ul li:last-child a ( border: none; ) . meni a.documents (pozadina: url(../img/docs.png) bez ponavljanja 6px centar; ) .meni a.messages (pozadina: url(../img/bubble.png) bez ponavljanja 6px centar; ) .meni a.signout (pozadina: url(../img/arrow.png) bez ponavljanja 6px centar; )

Meni se lično sviđa jednostavnost implementacije i korištenja ikona. Evo konačnog koda sa codepen-om:

Verzija Josha Risera je vizuelno slična prethodnom padajućem meniju u HTML-u i CSS-u. U kodu nema ">" selektora djece (korisno u slojevitim dizajnima), ali autor uspješno koristi CSS3 efekte (prijelaz, box-shadow i text-shadow) za ljepši rezultat. Prema linku u izvoru, nema opisa procesa kreiranja horizontalnog padajućeg menija, pa ću odmah dati konačni kod:

U ovom primjeru ćemo pogledati kako napraviti padajući meni u CSS-u, u kojem će pored stavki biti i blok za pretragu. Slična implementacija se često može naći u modernim . Što se tiče vremena i složenosti implementacije, rješenje je nešto složenije od prethodnih. Objavljeno je u maju 2013. godine, tako da ćete možda morati nešto podesiti, iako je na našem testiranju sve funkcionisalo dobro.

HTML kod

Za navigaciju se, kao i uvijek, koristi neuređena lista (sa klasom nav). Uobičajene stavke menija su stavke liste (li) i sadrže veze (a href) bez ikakvih klasa ili ID-ova. Izuzetak su 3 specijalizirana elementa ovog horizontalnog padajućeg menija sa sljedećim ID-ovima:

podešavanja - link slike;
pretraga - blok s pretraživanjem i odgovarajućim gumbom;
opcije - sadrži podmeni (implementirano kroz listu sa subnav klasom).

Također u kodu ćete vidjeti skriptu bez prefiksa za korištenje CSS svojstava bez prefiksa. Rezultirajući HTML za padajući meni izgleda ovako:

Aplikacija
Board
Opcije
- Postavke
- Aplikacija
- Board
- Opcije

Aplikacija
Board
Opcije
- Postavke
- Aplikacija
- Board
- Opcije

CSS za meni

1. Osnovni stilovi i stavke menija

Prvo određujemo Montserrat font, tamno sivu pozadinu i fiksnu visinu za stavke menija. Svi elementi su float: poravnati lijevo i pozicionirani relativno tako da kasnije možete dodati podmeni sa položajem: apsolutni;

@import url (http: //fonts.googleapis .com/css?family= Montserrat) ; * ( margina : 0 ; padding : 0 ; ) .nav ( pozadina : #232323 ; visina : 60px ; display : inline-block ; ) .nav li ( float : lijevo ; tip-stil liste : nema ; položaj : relativan ; )

@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( margina: 0; padding: 0; ) .nav ( pozadina: #232323; visina: 60px; prikaz: inline-block; ) .nav li ( float: lijevo; tip-stil liste: nema; položaj: relativan; )

2. Formatiranje veza

Stavke menija koriste osnovni stil + . Visina je ista kao u navigacijskoj klasi. #settings linka slike na početku menija je postavljeno da se poravna.

.nav li a (font-size : 16px ; boja : bijela ; display : block ; line-height : 60px ; padding : 0 26px ; text-decoration : nema ; border-left : 1px solid #2e2e2e ; font-family : Montserrat , sans-serif ;text-shadow : 0 0 1px rgba (255 , 255 , 255 , 0.5 ) ; ) .nav li a: lebdeći (boja pozadine : #2e2e2e ; ) #settings a ( padding : 18px ; visina ; ; font-size : 10px ; line-height : 24px ;)

Nav li a (veličina fonta: 16px; boja: bijela; zaslon: blok; visina linije: 60px; padding: 0 26px; dekoracija teksta: nema; granica lijevo: 1px čvrsta #2e2e2e; porodica fontova: Montserrat, sans-serif;text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); ) .nav li a:hover ( background-color: #2e2e2e; ) #settings a ( padding: 18px; visina: 24px; veličina fonta: 10px; visina linije: 24px; )

3. Blok pretraživanja

Ovaj element ima fiksnu širinu i sastoji se od nekoliko delova - polja za unos (#search_text) sa zelenom pozadinom i dugmeta za pretragu (#search_button). U nekim pretraživačima, boja pozadine može biti siva.

#search (širina: 357px; margina: 4px;) #search_text (širina: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif no; px :ne border : visina 0 15px 20px ; margin-desno : 0 ; boja : bijela ; kontura : nijedna ; pozadina : #1f7f5c ; float : lijevo ; box-size : border-box ; prijelaz : sve 0,15 s ; ) :: -webkit-input-placeholder ( /* WebKit pretraživači */ boja : bijela ; ) : -moz-placeholder ( /* Mozilla Firefox 4 do 18 */ boja: bijela; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ boja : bijela ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ boja : bijela ; ) #search_text : fokus ( pozadina : rgb (64, 151, 119) ;) #search_button ( granica: 0 nema; pozadina: #1f7f5c url (search.png) centar bez ponavljanja; širina: 60px; float: lijevo; padding: 0; središte teksta; poravnanje teksta visina : 52px ; kursor : pokazivač ; )

#search ( širina: 357px; margina: 4px; ) #search_text( širina: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; granica: 0 nema; visina: 52px ; margin-desno: 0; boja: bijela; obris: nema; pozadina: #1f7f5c; float: lijevo; veličina kutije: okvir-boks; prijelaz: sve 0,15 s; ) ::-webkit-input-placeholder ( /* WebKit pretraživači */ boja: bijela; ) :-moz-placeholder ( /* Mozilla Firefox 4 do 18 */ boja: bijela; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ boja: bijela; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ boja: bijela; ) #search_text:focus (pozadina: rgb(64, 151, 119); ) #search_button ( granica: 0 nema; pozadina: #1f7f5c url (search.png) centar bez ponavljanja; širina: 60px; float: lijevo; padding: 0; poravnanje teksta: centar; visina: 52px; kursor: pokazivač; )

4. Padajući podmeni

Završni dodir će nam omogućiti kako da napravimo CSS padajući meni koji radi posljednja tačka#options.

#options a( border-left : 0 none ; ) #options > a ( background-image : url (triangle.png ) ; background-position : 85% centar ; background-repeat : ne-repeat ; padding-right : 42px ; ) .subnav ( vidljivost : skrivena ; pozicija : apsolutna ; vrh : 110% ; desno : 0 ; širina : 200px ; visina : auto ; neprozirnost : 0 ; prijelaz : sve 0,1 s ; pozadina : #232323 ; ) .subnav li : none ; ) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options : hover .subnav ( vidljivost : vidljiva ; vrh : 100% ; neprozirnost : 1 ; )

#options a( border-left: 0 none; ) #options>a ( background-image: url(triangle.png); background-position: 85% centar; background-repeat: no-repeat; padding-right: 42px; ) .subnav ( vidljivost: skrivena; pozicija: apsolutna; vrh: 110%; desno: 0; širina: 200px; visina: auto; neprozirnost: 0; prijelaz: sve 0,1 s; pozadina: #232323; ) .subnav li ( float : none; ) .subnav li a ( border-bottom: 1px solid #2e2e2e; ) #options:hover .subnav ( vidljivost: vidljiva; vrh: 100%; neprozirnost: 1; )

U stilovima ćete pronaći umetanje pozadinske slike trougla (triangle.png) za označavanje podmenija - ne zaboravite da navedete ispravnu putanju za ovu i druge slike u primeru. Izgled podmenija implementiran je pomoću svojstva neprozirnosti. Konačno rješenje na codepen-u:

Ova opcija uglavnom koristi CSS2.1 tehnike, rešenje je plus ili minus novo - za mart 2015. Ako vam nedostaje jedan podnivo u horizontalnom padajućem meniju za sajt, onda ovaj primer sadrži tri odjednom. Pseudo-klasa :only-child dodaje simbol "+" stavkama da označi prisustvo podmenija.

Općenito, dobar i jednostavan primjer. Nećemo detaljno opisivati proces implementacije, jer sličan je prethodnim - prvo kreirate HTML kostur, a zatim postepeno dodajete stilove za njega. Preuzmite konačni kod sa linka na izvorni kod, možete ga djelomično vidjeti u Codepen-u:

Ukupno

Iznad smo pogledali 4 opcije kako napraviti padajući meni u CSS + HTML za , iako na mreži postoji mnogo više sličnih primjera. Postoje rješenja sa jQueryjem, ali ovo je najvjerovatnije korisno samo za implementaciju nekih specijalnih efekata i nestandardnih zadataka. U većini slučajeva dovoljna je gomila CSS + HTML, pogotovo jer su sada glavni zahtjevi za meni praktičnost i brza brzina učitavanja.

Na kraju, dva komentara na kodove iznad. Neki od primjera padajućeg izbornika CSS-a koriste slike, tako da ćete morati pažljivo pogledati putanje slika i unijeti ispravne vrijednosti za svoju web lokaciju. Drugo, neka rješenja su stara 2-3 godine, pa bi trebalo dodatno provjeriti njihovu izvedbu u različitim pretraživačima.

Ako znate još neke zanimljive moderne implementacije horizontalnih padajućih menija za sajt, pošaljite linkove u komentarima.