Kako napraviti horizontalni css meni. Pretvaranje menija u vertikalni

HTML5 IE Cr Op Sa Fx

Centriranje horizontalnog menija može biti težak zadatak, posebno za one koji tek poznaju CSS. Pronalaženje rješenja vodi do vrlo ograničene liste metoda, od kojih se većina oslanja na CSS, JavaScript trikove ili korištenje nestandardnih pravila koja nisu podržana od strane svih pretraživača. U ovom vodiču ćemo vas provesti kroz metodu za centriranje horizontalnog menija, koji koristi samo standardna CSS pravila i radi u svim pretraživačima.

Primjer centriranog menija

Ispod je horizontalni meni u sredini ove kolone, u kojem je aktivirana druga kartica. Možete pokušati promijeniti veličinu prozora ili stranice preglednika kako biste bili sigurni da je meni uvijek centriran i da odgovara.

Na demo stranici možete vidjeti nekoliko opcija dizajna za horizontalno centriran meni. Bilo koji od njih se može koristiti u vašim projektima.

HTML markup

Svi meniji prikazani u ovoj lekciji koriste jednostavnu strukturu. Ovo je obična neuređena lista veza postavljenih u element div.

Centrirani meni CSS kod

Ispod je kompletan CSS koji će centrirati meni. A objašnjenja principa rada data su kasnije u lekciji.

#centeredmenu (float: lijevo; širina: 100%; pozadina: #fff; border-bottom: 4px solid # 000; overflow: skriven; položaj: relativan;) #centeredmenu ul (clear: lijevo; float: lijevo; stil liste : nema; margina: 0; padding: 0; pozicija: relativna; lijevo: 50%; poravnanje teksta: centar;) #centeredmenu ul li (prikaz: blok; float: lijevo; stil liste: nijedan; margina: 0; padding: 0; pozicija: relativna; desno: 50%;) #centeredmenu ul li a (prikaz: blok; margina: 0 0 0 1px; padding: 3px 10px; pozadina: #ddd; boja: # 000; dekoracija teksta: none; line-height: 1.3em;) #centeredmenu ul li a: lebde (pozadina: # 369; boja: #fff;) #centeredmenu ul li a.active, #centeredmenu ul li a.active: lebde (boja: # fff; pozadina: # 000; težina fonta: bold;)

Kako funkcioniše metoda centriranja

Metoda se zasniva na relativnom pozicioniranju lebdećih blok elemenata jedan u drugom. Prvo, da vidimo kako se mijenja veličina elemenata kada se pomaknu.

Element div(blok), bez pomaka, proteže se do pune širine koja mu je dostupna.

Ali ako pomaknemo div element ulijevo, on će se automatski smanjiti kako bi uklopio svoj sadržaj. Kompresija je ključna za implementaciju ove metode za centriranje menija. Pomaže da se meni pomeri na ispravan položaj.

Standardni lijevo poravnat meni

Uzmimo standardni lijevo poravnat meni i redizajnirajmo ga korak po korak. Radi preglednosti artikli su obojeni u različite boje, pa je odmah jasno šta je gde uloženo.

Obratite pažnju na sljedeće tačke:

• Element centeredmenu div(plavi pravougaonik) je pomaknut ulijevo, ali je 100% širok, tako da ostaje rastegnut da ispuni cijelu stranicu.
• Element ul(ružičasti pravougaonik) je unutar elementa centeredmenu div i pomera se ulevo. To znači da će biti smanjen na širinu svog sadržaja, odnosno na ukupnu širinu svih obeleživača.
• Svi li elementi (zeleni pravokutnici) su unutar elementa ul i pomaknite se ulijevo. Tako se smanjuju na veličinu karika u njima i poredaju se u jednu horizontalnu liniju.
• Unutar svake veze (narandžasti pravougaonici) prikazuje se tekst markera: Bookmark 1, Bookmark 2, itd.

Pomjeranje pozicije neuređene liste

Zatim kompenziramo element ul udesno za 50% koristeći poziciju: relativno; ... Kada je element pod ovim uvjetima pomjeren za postotak, važno je zapamtiti da ukupna širina elemenata koje sadrži nije njegova širina. U našem slučaju, pomak se dešava za polovinu prozora pretraživača (ili raspoloživog prostora za prikaz), tako da naš meni počinje na sredini prozora i delimično se proteže van njega. I prijeđite na sljedeći korak.

Pomeranje položaja svih stavki menija

Ostaje samo premjestiti sve elemente li lijevo za 50%. Ovo je 50% širine našeg elementa ul (kontejner koji sadrži meni). Tako se jezičci pomiču tačno u sredinu prozora.

Nekoliko važnih napomena

Postoji nekoliko važnih točaka koje treba imati na umu kada koristite ovu metodu centriranja:

• Od elementa ul djelomično se proteže izvan prozora, to dovodi do prikaza traka za pomicanje. Stoga morate koristiti overflow: hidden rule; za element centeredmenu div... Dakle, izbočeni dio elementa divće biti odsječen.
• Od elementa ul nije poravnat sa obeleživačima, ne možete koristiti nikakve vizuelne stilove za njega. Ostavite element ul bez boje pozadine i ivice tako da bude potpuno nevidljiv. A stilovi za obeleživače treba da se koriste samo za elemente. li.
• Ako trebate postaviti posebne stilove za prve i posljednje oznake, morate dodati klasu za prvi i posljednji element. li tako da ih možete stilizirati pojedinačno.

Zaključak

Predloženo rješenje je kompatibilno sa svim pretraživačima, ne koristi JavaScript i podržava tekst koji može promijeniti veličinu.

Od autora: Pozdravljam sve. Iz nekog razloga, webmasteri povezuju padajući meni sa skriptama, ali se dugo vremena takva navigacija može obavljati apsolutno sigurno koristeći čisti css. Štaviše, takav meni neće biti ništa lošiji. Danas ću vam pokazati kako da napravite padajući meni u css-u. Podijeliću, da tako kažem, recept.

Plan lekcije i izgled našeg menija

Generalno, prvo odlučimo kako ćemo kreirati sam meni. U html5, standardni način je kreirati ga u navigacijskom kontejneru koristeći listu s nabrajanjem. Uradimo samo to. Oznake ćemo ukloniti kasnije pomoću css-a, oni nam uopće ne trebaju u meniju.

Zapravo, odmah ću napisati markup sa ugniježđenim listama u html-u. Odnosno, naša lista će biti dvostepena - sadržavat će druge liste. Naime, za svaku stavku 1 lista, koja će formirati padajući meni.

Ovdje postoji važna stvar, a to je da možda nećete morati napraviti padajući meni za svaku stavku, već samo nekoliko. Nema problema, onda jednostavno ne kreiramo ugniježđene liste u paragrafima bez ispadanja.

Zapravo, evo ga, sve oznake:

Razumijem da je ogroman. Ovo je problem sa ugniježđenim listama, za koje je potrebno mnogo koda. Ali imajte na umu činjenicu da radimo 4 glavne stavke i za svaku će postojati padajući meni.

Zapravo, postavio sam navigacijski identifikator za svu navigaciju, a drugu klasu stila za sve ugniježđene liste, kako bih shvatio da su ugniježđene.

Odlično, naša oznaka je spremna, možete pogledati rezultat:

Da, izgleda užasno. Ali sada ćemo uključiti css i za nekoliko minuta naša navigacija će biti transformirana. Hajdemo na posao.

Pisanje css stilova

Prva stvar koju ću učiniti je resetirati sav padding na default za sve elemente. Samo će nas ometati, bolje je da sami postavljamo uvlake, gdje je potrebno.

* (margina: 0; dopuna: 0;)

#nav (visina: 70px;) #nav ul (stil liste: nema;)

Sada, zapravo, treba da odlučimo kakav će biti naš meni. Horizontalno ili vertikalno? Predlažem da prvo uradimo horizontalno i sve vidimo na njegovom primjeru. Da biste to učinili, morate napisati sljedeće stilove:

#nav> ul> li (float: lijevo; širina: 180px; pozicija: relativna;)

Imajte na umu da znakom> upućujemo na stavke na listi koja je direktno ugniježđena u ul, a ona je direktno ugniježđena u nav. Ovo je vrlo važno, jer vam omogućava da ne primjenjujete stil na stavke u ugniježđenim listama. Činjenica je da će, prema mojoj zamisli, stavke u glavnoj listi biti raspoređene horizontalno, a u ugniježđenim - okomito.

Ali, naravno, možete to učiniti drugačije, u skladu sa svojom idejom. Sve stavke možete napraviti u jednoj liniji.

U svakom slučaju, gornji kod, nadam se da možete razumjeti. To prisiljava stavke na glavnoj listi da se poravnaju ulijevo, tako da sve stanu u isti red, iako su blok stavke. Također sam im dao eksplicitnu širinu i relativno pozicioniranje.

Čemu služi pozicioniranje? To je neophodno kako bi se tada apsolutno pozicionirale ugniježđene liste. Ako ste proučavali pozicioniranje u css-u, onda vjerovatno znate da ako postavite relativno pozicioniranje bloka, onda svi elementi u njemu mogu biti pozicionirani apsolutno unutar ovog bloka, a ne u cijeli prozor pretraživača.

U međuvremenu, evo šta već imamo:

Sa ovog snimka ekrana već možete zamisliti približan rezultat. Naravno, još uvijek moramo lijepo ukrasiti pasuse da oči ne mole za milost pri gledanju navigacije.

#nav li a (prikaz: blok; pozadina: # 90DA93; ivica: 1px solid # 060A13; boja: # 060A13; padding: 8px; text-align: centar; text-decoration: nema;) #nav li a: lebdeti ( pozadina: # 2F718E;)

Prvo, same veze moraju biti blokirane. Ovo je neophodno da bi padding funkcionisao i da bi se sva svojstva pravilno primenila. Zatim određujem boje pozadine, tekst, parametre okvira, padding i poravnanje teksta prema sredini. Na kraju, uklonite podvlačenje sa veza.

Svi ovi parametri ne moraju biti napisani kao ja. Boje možete birati proizvoljno, napraviti okvir drugačijim ili ga uopće ne koristiti, uvlake se mogu smanjiti ili povećati.

Imajte na umu da u ovom slučaju nismo koristili znak>, tako da će se ova pravila primjenjivati ​​na sve veze, uključujući i one u ugniježđenim pasusima. Dakle, sada imamo sljedeće:

Odlično, ali razumiješ da podstavke ne bi trebale biti vidljive, trebale bi se otvoriti kada pređete mišem preko željene stavke. Bez toga naš meni izgleda kao sto. Pa, vrijeme je da sakrijete ugniježđene stavke.

#nav li .second (prikaz: nema; pozicija: apsolutna; vrh: 100%;)

Prvo, sakrivamo potpuno ugniježđene liste. Drugo, dajemo im apsolutno pozicioniranje i gornju koordinatu: 100%. To znači da će padajući meni biti jasno prikazan ispod glavne stavke kojoj pripada, jasno ispod 100% visine te stavke.

Sada vidimo samo glavni meni na web stranici, što nam je potrebno.

Implementacija osipanja

Moramo da uradimo ono najvažnije - da shvatimo sam gubitak. U tome nema ništa komplikovano, pogledajte ovaj kod:

#nav li: hover .second (prikaz: blok;)

Ovaj kod će raditi besprijekorno. Kada zadržite pokazivač miša iznad stavke u glavnom meniju, ugniježđena lista će postati vidljiva. I samo lista koja je ugrađena u stavku nad kojom se kursor lebdi.

Postoji samo jedan manji problem - širina ugniježđenih stavki ne odgovara širini glavnih. Ali to se vrlo lako rješava dodavanjem odgovarajućih stilova:

#nav li li (širina: 180px;)

Sve, problem je rešen:

Sve radi savršeno. Kada zadržite pokazivač iznad glavne stavke, pojavljuje se odgovarajući padajući meni. Ako pomaknete kursor u stranu, on nestaje. Ako pomaknete kursor na same ugniježđene stavke, možete kliknuti na njih i otići na željeni dio stranice. Stoga smo sa vama napravili vrlo jednostavan i lagan padajući meni bez apsolutno nikakvih skripti.

Pretvaranje menija u vertikalni

Dobro, dobro, s horizontalnom navigacijom smo se potpuno snašli, ali osim nje, vertikalna navigacija je vrlo česta na stranicama, a može biti i padajuće. U stvari, vrlo je lako promijeniti meni iz horizontalnog u vertikalni, samo moramo promijeniti nekoliko linija koda.

Prvo ćete morati ukloniti float: lijevo sa stavki glavne liste. Upravo ovo svojstvo doprinosi tome da se naše stavke prikazuju u jednom redu, ali zašto nam je to potrebno ako navigacija bude okomita?

Sada ostaje promijeniti pravila za #nav li .second selektor, odnosno za ugniježđene liste, naime, potrebno ih je malo drugačije pozicionirati. Volim ovo:

#nav li .second (prikaz: nema; pozicija: apsolutna; lijevo: 100%; gore: 0;)

Odnosno, potrebno je registrirati dvije koordinate umjesto jedne. Prvo, u slučaju horizontalne navigacije, rekao sam da, kao što je zamišljeno, stavke ugniježđenih menija trebaju biti prikazane ispod glavnih stavki. U slučaju vertikalnog menija, ovo nije prikladno - stavke bi trebale biti prikazane sa strane.

Dakle, promijenite vrh: 100% lijevo: 100%. Osim toga, potrebna nam je i gornja koordinata. Postavljamo ga na 0 tako da podmeni bude na istom nivou kao i stavka kojoj odgovara.

Sve, sad sve radi kako treba. Možete ga testirati. Kao što vidite, nisam lagao kada sam rekao da ću morati da prepišem samo nekoliko linija koda.

Horizontalni meni sa više nivoa

Koristeći otprilike isti pristup, možete kreirati više nivoa menija ako je potrebno. Na primjer, napravimo listu za četvrtu stavku glavnog menija, koja će biti ugniježđena u jednoj od podstavki.