Kako napraviti gumeni responzivni izbornik koristeći CSS? Prekrasan horizontalni izbornik pune širine Prilagodljivi izbornik na vrpci

Dobar dan

Često je potrebno napraviti horizontalni izbornik koji će se protezati cijelom širinom nadređenog bloka, bez obzira na to koliko stavki sadrži.

Danas bih vam želio pokazati kako napraviti upravo takav jelovnik.

Dakle, naš jelovnik će biti sljedeći:

Razvučena je u punoj širini i ističe se kada se iznad nje nalazi. Jelovnik je zaobljen sa strane.

HTML MARKUP

...

Dom

Zanimljive vijesti

Još jedna stavka jelovnika!

Da bi izbornik bio pune širine, koristio sam tablice sa 100% širinom. Svaki stol ima div spremnik stavke izbornika. Ovisno o tome je li prva, zadnja ili srednja stavka izbornika div-y je dodijeljena odgovarajuća klasa.

U svakoj div Spremnik ima 2 bočne granice s apsolutnim pozicioniranjem, koje su potrebne za ispravan prikaz. Ako koristite standardne obrube, tada kada mijenjate stavke izbornika, tekst će skočiti za 1-2 piksela, što je dobro.

Klasa aktivan odgovoran je za odabranu stavku izbornika i označava je.

U svakom artiklu imamo sliku i tekst. Kako bismo osigurali da je sve to poravnato strogo u sredini okomito, koristimo tablicu. Zahvaljujući svojstvu okomitog poravnanja, naše stavke izbornika uvijek će biti glatko prikazane i neće se pomaknuti.

CSS PRAVILA

Prvo, postavimo stilove za opći prikaz izbornika:

Menu_container ( padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px; ) .menu_container td ( vertical-align: middle; /* vertikalno poravnanje */ ) .last_point_menu, .first_point_menu, .middle_point_menu ( širina: 100%; obrub: 1px; pozicija: lijevo: ništa; okomito poravnanje: nijedno; poravnanje teksta: lijevo: 150px; padding-left: 4px; ) .td.inner_table_title ( padding-top: 4px; font-weight: bold; ) .td.inner_table_img ( width: 40px!important; ) .inner_table_menu ( height: 100%; padding: 0px ; okomito poravnanje: ništa; poravnavanje teksta: lijevo; .unutarnji_naslov_tablice (unutarnja_tablica: 10px; transformacija teksta: velika slova; .inner_table_menu td.inner_table_img (širina: 30px!važno; visina: 30px!važno; padding-lijevo: 15px; )

Za ljepotu, zaokružimo kutove na stranama izbornika:

First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-right: 1px solid .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border - bottom-right-radius: 5px; -moz-border-radius-topright: 5px ;

Sada naš jelovnik ima ljepši izgled:

Do sada prva točka nema lijevu granicu. Popravit ćemo to malo kasnije.

Dodajmo sada efekte lebdenja za izbornik.

Middle_point_menu:lebdjeti, .last_point_menu:lebdjeti, .first_point_menu:lebdjeti, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( boja pozadine: #CAE285; pozadinska slika: -moz-linear- gradijent(vrh, #CAE285, #9FCB56); -gradijent-webkit(linearno, 0 0, 0 100%, od(#CAE285), do(#9FCB56)); -gradijent(gore, #CAE285, #9FCB56); pozadinska slika (gornja, #CAE285, #9FCB56); pozadinska slika (na dnu, #CAE285, #9FCB56); obrub: 1px -color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: .first_point_menu:hover, .first_point_menu.active (border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( obrub: 1px puni #dadbda; border-left: none; ) .last_point_menu:hover ( border: 1px solid #9FCB56; border-left: none; boja obruba: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( border-left: none; )

Sada naš jelovnik izgleda mnogo ljepše, ali za sada nemamo okvire za označene stavke jelovnika. Popravimo ovo!

/* stilovi za bočne obrube */ .borderLeftSecond, .borderRightSecond ( display: none; position: absolute; width: 1px; height: 47px; background-color: #9fbb62; top: 0px; z-index: 1000; ) /* apsolutni pomaci za granice */ .borderLeftSecond ( lijevo: 0px; ). , .middle_point_menu: hover > .borderRightSecond, .last_point_menu: hover > .borderLeftSecond .first_point_menu: hover > .borderRightSecond ( display: block; ) /* obraditi slučajeve prva i zadnja stavka */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )

To je sve!

Dobili smo odličan jelovnik razvučen cijelom širinom matičnog bloka! Stavke se ne preklapaju kada lebdite mišem i izgled ne poskakuje.

Prilično uobičajen izgled za izbornik web mjesta, kada spremnik s njim zauzima cijelu dostupnu širinu na stranici. U ovom slučaju, prva stavka je uz lijevi rub, a posljednja je uz desni, a udaljenost između svih elemenata je jednaka. Danas ćemo vam reći kako se to radi.

Nudimo vam primjer implementacije gumenog izbornika pomoću CSS-a za vaš resurs. U ovom izborniku stavke će se nalaziti u jednom retku. Javascript se neće koristiti. Sadržaj jelovnika bit će priložen u uobičajenom popisu. Glavna značajka takvog jelovnika je njegova svestranost, koja se izražava u činjenici da i broj i duljina stavki mogu biti bilo koji.

Kako to implementirati?

Svaki programer može ponuditi svoj način rješavanja zadanog problema. Sve ovisi o njegovoj mašti, razini profesionalnosti i sposobnostima. Najčešće rješenje ovog problema je korištenje tablice. Također, mnogi bi predložili korištenje javascripta. Oni koji bi predložili korištenje svojstva prikaza s vrijednošću stol ili tablica-ćelija- Žurim se razočarati. Ova metoda nije dovoljno kompatibilna s više preglednika.

Naše rješenje

Naša ponuda bit će izgrađena na čvrstim temeljima znanja o HTML5 i CSS3.

Bit procesa temelji se na svojstvu poravnanja teksta s vrijednošću opravdanja. Za one koji su zaboravili, podsjećam vas: ovo svojstvo usmjerava poravnanje teksta preko cijele širine spremnika.

Prilikom korištenja našeg rješenja potrebno je poštivati dva obvezna pravila. Prvi je da širina spremnika stavke izbornika treba biti manja od teksta. Odnosno, ne u jednom redu. Drugo važno pravilo je da se riječi jednako rastežu, bez obzira na to pripadaju li istoj točki ili ne.

Ispod je kod koji služi kao primjer kreiranja gumenog izbornika:

HTML

< ul> < li>< a href= "#" >Dom < li>< a href= "#" >Blog < li>< a href= "#" >Vijesti < li>< a href= "#" >Popularan < li>< a href= "#" >Nove stvari

ul ( poravnanje teksta: poravnanje; preljev: skriveno; /* uklanja nuspojave metode */ visina: 20px; /* također uklanja nepotrebne stvari */ kursor: zadano ; /* postavlja početni oblik kursora */ margina: 50px 100px 0 100px; pozadina: #eee; ispuna: 5px; ) li ( prikaz: inline; /* stvara tekst stavki izbornika */) li a ( prikaz: inline- blok; /* uklanja prijelome riječi u izbornicima */ boja: #444; ) a: lebdite ( boja: #ff0000; ) ul: nakon ( /* formiranje druge linije za testiranje metode */ sadržaj: "1" ; margin-lijevo: 100%; visina: 1px; preljev: skriven; prikaz: inline-block; )

Za rad u dobrom starom Internet Exploreru morate dodatno dodati sljedeći kod u CSS

ul ( z- index: izraz(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .last ( margin-lijevo: 100%; ) * html ul ( /* treba samo ie6 */ visina: 30px; )

Određujući potrebne vrijednosti svojstava i kod, dobivamo ovaj gumeni izbornik:

Nedostaci metode

Šifra volumena
Nemogućnost određivanja aktivnog stanja elementa kroz selektor klase. To se događa zbog prekida riječi u odlomcima (ako postoji). Rješenje ovog problema je dodavanje još jednog spremnika unutar elemenata liste.
Za padajući izbornik trebate prilagoditi kôd zbog negativnog utjecaja preljeva.

U kojim preglednicima radi?


6.0+	6.0+	10.5+	5.0+	3.6+	-	-

Zdravo. Dugo nisam pisao postove na temu html/css rada. Nedavno sam tek počeo sastavljati novi izgled i tijekom procesa naišao sam na zanimljiv trik koji vam omogućuje da jelovnik učinite fleksibilnim (možete mu dodati nove stavke, a veličina se neće povećati, ali će uvijek biti 100% od nadređeni blok). Dakle, danas ćemo implementirati gumeni izbornik koristeći CSS.

Ako ste previše lijeni za čitanje članka, možete pogledati ovaj video. Autor također sve vrlo dobro objašnjava:

Gumeni izbornik sa CSS-om - 1. korak

Prvi korak je uvijek html markup, gdje bismo bili bez njega? Ali u našem slučaju sve će biti jednostavno:

blok omot za izbornik
sam izbornik, prikazan kroz popis s grafičkim oznakama (ul tag)
Pa, unutra su stavke izbornika, au njima, prema tome, već postoje veze

Sve je jasno, evo mog označnog koda:

Sve to izgleda standardno, ovako:

Sada ćemo sve staviti u željeni oblik, CSS će se baciti na posao.

Korak 2 - Osnovni stilovi

Zatim ću dodati stilove u omotni blok. Naime, postavit ću maksimalnu širinu na 600 piksela (čisto da lakše napravim screenshot da meni stane), a blok ću i centrirati.

omot (
pozadina: #fff;
max-width: 600px;
margina: 0 auto;
}

Korak 3 - implementirajte gumu

Sada krenimo na sam jelovnik. Uklonit ću oznake s njega (oznaka ul), napraviti pozadinski linearni gradijent i, što je najvažnije, upotrijebiti svojstvo display: table-row kako bi se spremnik za izbornik ponašao kao red tablice. Ovo je važno učiniti za daljnje manipulacije.

R-izbornik(
pozadina: linearni gradijent (desno, #b0d4e3 0%,#88bacf 100%);
prikaz: tablica-redak;
list-style: nijedan;
}

Kao što vidite, gornji kod je upravo riješio sve o čemu sam pisao. Usput, zgodno je generirati gradijente pomoću alata Ultimate CSS Gradient Generator. Jednom ću opet pisati o njemu.

R-izbornik(
okomito poravnanje: dno;
prikaz: tablica-ćelija;
širina: auto;
poravnanje teksta: središte;
visina: 50px;
obrub-desno: 1px pun #222;
}

vertical-align: bottom - ovo svojstvo je neophodno tako da ako tekst u stavci izbornika zauzima 2 retka, bude ravnomjerno prikazan. Kada napravimo izbornik, možete ukloniti ovo svojstvo, zumirati tako da se stavke komprimiraju i tekst pomakne u dva retka i vidjet ćete problem s prikazom. Vratite imovinu i sve će biti u redu.
display: table-cell - budući da smo sami izbornik prikaza postavili da bude redak tablice, logično bi bilo postaviti njegove stavke da se prikazuju kao ćelije u tablici. Nužno je.
width: auto — širina će se izračunati automatski, ovisno o duljini teksta u odlomku
text-align: center - ovo je samo za centriranje teksta unutra
visina: 50 piksela — postavite visinu na 50 piksela
pa, border-desno je samo rub s desne strane, razdjelnik za stavke

Za sada jelovnik izgleda neugledno, ali to je u redu, vrijeme je da ga se prisjetite.

Zadnje što treba učiniti je stilizirati veze unutar stavki. Evo imam ovaj kod:

R-izbornik li a(
tekst-ukras: nema;
širina: 1000px;
visina: 50px;
okomito poravnanje: sredina;
prikaz: tablica-ćelija;
boja: #fff;
font: normal 14px Verdana;
}

A ovako sada izgleda jelovnik:

Opet, dopustite mi da objasnim neke retke:

svojstvo text-decoration nadjačava zadano podvlačenje za veze
width: 1000px je možda najvažnija linija. Morate postaviti veze na približno ovu širinu, možda manju, ali svakako veću od najšire moguće stavke izbornika. Veze neće biti široke 1000 piksela, jer će širina biti ograničena li stavkom izbornika, čija je širina postavljena na auto, ali to će omogućiti da za bilo koji broj stavki u izborniku uvijek bude 100 posto širine.
vertical-align: middle i display: table-cell - prvi će poravnati tekst okomito prema sredini, a drugi će također prikazati poveznice kao ćelije. Potrebna su oba svojstva.
font - dobro, ovo je samo skup postavki za font. Pročitajte o css svojstvima za fontove u ovom članku.

Korak 4 (izborno) Možete dodati interaktivnost

Na primjer, tako da se boja stavke izbornika mijenja kada se zadrži pokazivač. Ovo se može vrlo jednostavno implementirati, korištenjem pseudo-klase lebdenja:

R-izbornik li:hover(
boja pozadine: #6bba70;
}

Testiranje jelovnika na elastičnost

Super, jelovnici su gotovi, ali ono najvažnije nismo provjerili - koliko je gumasto, kao što sam vam obećao. Pa, dodat ću još 2 stavke na jelovnik:

Izbornik ostaje širok 600 piksela. Preostale stavke jednostavno su se malo smanjile kako bi se smjestile 2 nove.

Dodat ću još jednu dugačku točku:

Kao što vidite, izbornik se još malo smanjio i duga stavka se prikazuje sasvim normalno. I da nije bilo svojstva vertical-align: bottom o kojem sam vam govorio, izbornik bi izgledao gore.

Skratit ću jelovnik na tri stavke.

Stavke su postale puno slobodnije, ali sam izbornik nije se promijenio u širini. Tako smo napravili 100% gumeni jelovnik!

Kako ga prilagoditi?

U principu, ako blok omota postavite na maksimalnu širinu, a ne na fiksnu, tada ga čak i ne treba prilagođavati. U mom slučaju, imam svojstvo max-width: 600px i kada širina postane manja od 600 piksela, blok će se jednostavno smanjiti zajedno sa zaslonom, bez formiranja vodoravnog pomicanja.

Pa, ako želite nekako promijeniti ili ispraviti izbornik na mobilnim uređajima ili širokim zaslonima, tada će vam medijski upiti pomoći! Sretno u izradi web stranice!

Horizontalni izbornik je popis odjeljaka web stranice, pa je logičnije označiti ga unutar elementa

Kako napraviti horizontalni izbornik: izgled i primjeri dizajna

HTML oznake i osnovni stilovi za horizontalni izbornik

Prema zadanim postavkama nalaze se sve stavke popisa okomito, zauzimajući cijelu širinu elementa kontejnera, koji pak zauzima cijelu širinu njegovog bloka kontejnera.

HTML oznake za vodoravnu navigaciju

Stavka izbornika
Stavka izbornika
Stavka izbornika

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

...

Postoji nekoliko načina za njihovo postavljanje vodoravno. Najprije trebate resetirati zadane stilove preglednika za elemente navigacije:

Ul ( list-style: none; /*ukloni oznake popisa*/ margin: 0; /*ukloni gornju i donju marginu jednako 1em*/ padding-left: 0; /*ukloni lijevo padding jednako 40px*/ ) a ( text-decoration: none; /*ukloni podcrtavanje teksta veze*/)

Metoda 1. li (display: inline;)

Izrada elemenata liste malim slovima. Kao rezultat toga, postavljeni su vodoravno, s razmakom od 0,4 em koji je dodan s desne strane između njih (izračunato u odnosu na veličinu fonta). Da biste ga uklonili, dodajte negativnu desnu marginu za li li (margin-right: -4px;) . Zatim stiliziramo veze kako želimo.

Metoda 2. li (float: lijevo;)

Otvaranje plutajućih elemenata popisa. Kao rezultat toga, oni su postavljeni vodoravno. Visina kontejnerskog bloka ul postaje nula. Kako bismo riješili ovaj problem, dodajemo (overflow: hidden;) u ul, proširujući ga i tako dopuštajući da sadrži plutajuće elemente. Za veze dodajte (display: block;) i stilizirajte ih po želji.

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

Izrada elemenata popisa inline-block. Nalaze se vodoravno, s desne strane formira se praznina, kao u prvom slučaju. Za veze dodajte (display: block;) i stilizirajte ih po želji.

Metoda 4. ul (prikaz: flex;)

Izrada ul popisa fleksibilnim spremnikom pomoću . Kao rezultat toga, elementi popisa raspoređeni su vodoravno. Dodajemo (display: block;) za poveznice i stiliziramo ih po želji.