Kako napraviti horizontalni css izbornik. Promjena izbornika u vertikalni

HTML5 IE Cr Op Sa Fx

Zadatak centriranja vodoravnog izbornika može biti težak, posebno za one koji su novi u CSS-u. Potraga za rješenjima dovodi do vrlo ograničenog popisa metoda, od kojih se većina oslanja na CSS trikove, JavaScript ili korištenje nestandardnih pravila koja nisu podržana od strane svih preglednika. U ovom vodiču ćemo pogledati horizontalnu metodu centriranja izbornika koja koristi samo standardna CSS pravila i radi u svim preglednicima.

Primjer centriranog izbornika

Ispod je horizontalni izbornik u sredini ovog stupca, u kojem je aktivirana druga kartica. Možete pokušati promijeniti veličinu prozora ili stranice preglednika kako biste bili sigurni da je izbornik uvijek u sredini i funkcionalan.

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

HTML oznaka

Svi izbornici, čiji su primjeri dati u ovoj lekciji, koriste jednostavnu strukturu. To je samo neuređeni popis veza umotanih u element. razd.

CSS kod središnjeg izbornika

Ispod je kompletan CSS kod koji centrira izbornik. A objašnjenja principa rada data su kasnije u lekciji.

#centeredmenu ( float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul ( clear:left; float:left; list-style :none; margin:0; padding:0; position:relative; left:50%; text-align:center; ) #centeredmenu ul li ( display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; ) #centeredmenu ul li a ( display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; boja:#000; text-decoration: none; line-height:1.3em; ) #centeredmenu ul li a:hover ( background:#369; color:#fff; ) #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover ( boja:# fff; background:#000; font-weight:bold;)

Kako funkcionira metoda centriranja

Djelovanje metode temelji se na relativnom pozicioniranju plutajućih blok elemenata jedan unutar drugog. Prvo, pogledajmo kako se veličina elemenata mijenja kada se pomakne.

Element razd(blok) bez pomaka proteže se do cijele širine koja mu je dostupna.

Ali ako pomaknemo element div ulijevo, on će se automatski smanjiti na veličinu svog sadržaja. Kompresija je ključna za implementaciju ove metode centriranja izbornika. Pomaže pomicanje izbornika na ispravan položaj.

Standardni lijevo poravnat izbornik

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

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

• Element centrirani izbornik div(plavi pravokutnik) je pomaknut ulijevo, ali ima širinu od 100%, tako da ostaje rastegnut da stane na cijelu stranicu.
• Element ul(ružičasti pravokutnik) je unutar elementa središnji izbornik razd i pomiče se ulijevo. To znači da će se smanjiti na širinu svog sadržaja, odnosno na ukupnu širinu svih oznaka.
• Svi li elementi (zeleni pravokutnici) nalaze se unutar elementa ul i pomaknite se ulijevo. Tako se smanjuju na veličinu karika u njima i poredaju se u jednu vodoravnu liniju.
• Unutar svake veze (narančasti pravokutnici) prikazuje se tekst oznake: Oznaka 1, Oznaka 2 itd.

Pomicanje pozicije neuređenog popisa

Zatim pomičemo element ul desno za 50% s položajem:relativna nekretnina; . Kada je element pod ovim uvjetima pomaknut za postotak, važno je zapamtiti da ukupna širina elemenata koje sadrži nije njegova širina. U našem slučaju, pomak je polovica prozora preglednika (ili prostora dostupnog za prikaz). Kao rezultat toga, naš izbornik počinje u sredini prozora i djelomično se proteže izvan njega. I prelazimo na sljedeći korak.

Pomaknite položaj svih stavki izbornika

Ostaje samo premjestiti sve elemente li lijevo za 50%. Ovo je 50% širine našeg elementa ul (spremnika koji sadrži izbornik). Tako su jezičci pomaknuti točno u središte prozora.

Nekoliko važnih napomena

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

• Budući da je element ul djelomično izlazi izvan prozora, to dovodi do prikaza traka za pomicanje. Stoga morate koristiti pravilo overflow:hidden; za element centrirani izbornik div. Dakle, izbočeni dio elementa razd bit će odsječen.
• Budući da je element ul nije poravnat karticama, ne možete koristiti nikakve vizualne stilove za njega. Ostavite element ul bez boje pozadine i obruba kako bi bio potpuno nevidljiv. A stilovi za oznake trebaju se koristiti samo za elemente li.
• Ako trebate postaviti posebne stilove za prvu i posljednju karticu, morate dodati klasu za prvi i zadnji element li tako da ih možete stilizirati pojedinačno.

Zaključak

Predloženo rješenje kompatibilno je sa svim preglednicima, ne koristi JavaScript i podržava tekst koji se može promijeniti.

Od autora: Pozdravljam sve. Iz nekog razloga, webmasteri povezuju padajući izbornik sa skriptama, ali već duže vrijeme takva se navigacija može učiniti apsolutno sigurno na čistom css-u. I takav jelovnik neće biti ništa lošiji. Danas ću vam pokazati kako napraviti padajući izbornik u css-u. Da podijelim recept.

Plan lekcije i izgled našeg jelovnika

Općenito, prvo ćemo odlučiti kako ćemo kreirati sam jelovnik. U html5, standardni način je stvoriti ga u navigacijskom spremniku pomoću popisa s grafičkim oznakama. Učinimo upravo to. Oznake ćemo kasnije ukloniti pomoću css-a, uopće nam ne trebaju u izborniku.

Zapravo, odmah ću napisati u html oznaci s ugniježđenim listama. Odnosno, naš popis će biti na dvije razine - sadržavat će druge popise. Naime, za svaku stavku 1 lista, koja će formirati padajući izbornik.

Ovdje postoji važna točka, a to je da možda nećete morati napraviti padajući izbornik za svaku stavku, već samo neke. Nema problema, tada jednostavno ne stvaramo ugniježđene popise u odlomcima bez ispadanja.

Zapravo, evo ga, cijela oznaka:

Razumijem da je ogroman. To je problem s ugniježđenim listama, što morate napisati puno koda. Ali uzmite u obzir činjenicu da radimo 4 glavne stavke i za svaku će postojati padajući izbornik.

Zapravo, cijeloj sam navigaciji dao navigacijski ID, a svi ugniježđeni popisi drugu klasu stila da bismo razumjeli da su ugniježđeni.

Super, oznaka je spremna, možete vidjeti rezultat:

Da, izgleda užasno. Ali sada ćemo uključiti css u rad i za nekoliko minuta naša navigacija će se promijeniti. Idemo raditi.

Pisanje css stilova

Prvo što ću učiniti je resetirati sav padding na zadano za sve elemente. Oni će nas samo ometati, bolje je kasnije sami postaviti uvlake, gdje je potrebno.

*( margina: 0; dopuna: 0; )

#nav(visina: 70px; ) #nav ul(list-style: none;)

Sada zapravo trebamo odlučiti kakav će biti naš jelovnik. Horizontalno ili okomito? Predlažem da prvo napravite horizontalni i sve vidite na njegovom primjeru. Da biste to učinili, morate napisati sljedeće stilove:

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

Imajte na umu da znakom > upućujemo na stavke popisa koje su izravno ugniježđene u ul, što je izravno ugniježđeno u nav. Ovo je vrlo važno jer vam omogućuje da ne primjenjujete stil na ugniježđene stavke popisa. Činjenica je da će, prema mojoj zamisli, stavke u glavnom popisu biti raspoređene vodoravno, a u ugniježđenim - okomito.

Ali, naravno, možete to učiniti drugačije, u skladu sa svojom idejom. Možete osigurati da su sve stavke u jednom retku.

U svakom slučaju, gornji kod, nadam se da razumijete. To prisiljava stavke glavnog popisa da se smjeste ulijevo tako da sve stanu u isti redak, iako su elementi na razini bloka. Također sam im dao eksplicitnu širinu i relativno pozicioniranje.

Čemu služi pozicioniranje? To je potrebno kako bi se kasnije apsolutno pozicionirale ugniježđene liste. Ako ste proučavali pozicioniranje u css-u, onda vjerojatno znate da ako postavite relativno pozicioniranje na blok, onda se svi elementi u njemu mogu pozicionirati apsolutno unutar ovog bloka, a ne cijelog prozora preglednika.

U međuvremenu, evo što imamo do sada:

Iz ove snimke zaslona već možete zamisliti približan rezultat. Naravno, još uvijek moramo lijepo stilizirati točke kako oči ne bi molile za milost pri gledanju navigacije.

#nav li a( zaslon: blok; pozadina: #90DA93; obrub: 1px čvrsta #060A13; boja: #060A13; padding: 8px; text-align: centar; text-decoration: nema; ) #nav li a:hover( pozadina: #2F718E;)

Prvo, same veze moraju biti blokirane. To je potrebno kako bi padding funkcionirao i kako bi se sva svojstva ispravno primijenila. Zatim određujem boje pozadine, teksta, opcije okvira, uvlake i poravnanje teksta u sredini. Na kraju uklanjam podcrtavanje veza.

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

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

Sjajno, ali shvaćate da podstavke ne bi trebale biti vidljive, one bi se trebale otkriti kada pređete mišem iznad željene stavke. Bez toga naš jelovnik izgleda kao stol. Pa, vrijeme je da sakrijete ugniježđene stavke.

#nav li .second( prikaz: nema; položaj: apsolutni; vrh: 100%; )

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

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

Provedba odustajanja

Ostaje nam da učinimo ono najvažnije – implementirati sam ispadanje. U tome nema ništa komplicirano, pogledajte ovaj kod:

#nav li:hover .second( display: block; )

Ovaj kod će raditi besprijekorno. Kada zadržite pokazivač iznad stavke glavnog izbornika, ugniježđeni popis će postati vidljiv. I samo popis koji je ugniježđen u stavku na kojoj 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; )

To je to, problem riješen:

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

Promjena izbornika u vertikalni

Pa, horizontalnu navigaciju smo u potpunosti shvatili, ali osim nje, okomita navigacija je vrlo česta na stranicama, a može biti i padajuće. Zapravo, mijenjanje izbornika iz horizontalnog u okomito je vrlo jednostavno, morat ćemo promijeniti samo nekoliko redaka koda.

Prvo ćete morati ukloniti float:left sa stavki glavnog popisa. Upravo to svojstvo pridonosi činjenici da su naše stavke prikazane u jednom retku, ali zašto nam to treba ako navigacija treba biti okomita?

Sada ostaje promijeniti pravila za #nav li .second selektor, odnosno za ugniježđene liste, naime, potrebno ih je malo drugačije pozicionirati. Kao 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, kako je planirano, stavke podizbornika trebaju biti prikazane ispod glavnih stavki. U slučaju okomitog izbornika, to nije prikladno - stavke bi trebale biti prikazane sa strane.

Dakle mijenjamo vrh: 100% lijevo: 100%. Osim toga, potrebna nam je i gornja koordinata. Postavite ga na 0 tako da podizbornik bude na istoj razini kao i stavka kojoj odgovara.

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

Horizontalni izbornik s više razina

Koristeći isti pristup, možete stvoriti više razina izbornika ako je potrebno. Na primjer, napravimo popis za četvrtu stavku glavnog izbornika, koja će biti ugniježđena u jednoj od podstavaka.