Prekrasan horizontalni izbornik pune širine. Kako napraviti gumeni responzivni izbornik koristeći CSS? Vodoravni izbornik pune širine css

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 uz desnu, a udaljenost između svih elemenata je jednaka. Danas ćemo vam reći kako se to radi.

Nudimo vam primjer implementacije gumenog jelovnika kada CSS pomoć 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. Žurim razočarati one koji bi predložili korištenje svojstva prikaza s tablicom vrijednosti ili ćelijom tablice. 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 kôd 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 ( text- align: justify; overflow: hidden; /* eliminira nuspojave metode */ height: 20px; /* također eliminira nepotrebno */ kursor: zadano ; /* postavlja početni oblik kursora */ margina : 50px 100px 0 100px; pozadina: #eee; padding: 5px; ) li ( display: inline; /* čini stavke izbornika tekstom */ ) li a ( display: inline- block; /* eliminira prijelome riječi u izborniku */ boja: #444; ) a : lebdite (boja: #ff0000; ) ul: nakon ( /* formiranje drugog retka za izradu metode */ sadržaj: "1" ; margina- lijevo: 100 %; visina: 1px; overflow: skriveno; display: 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 slagati 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, stavke izbornika su unutra i, prema tome, već imaju veze

Sve je jasno, evo mog označnog koda:

Sve izgleda standardno, ovako:

Sada ćemo sve unijeti pravi tip, CSS počinje raditi.

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 markere 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 upravo je 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
dobro, 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 sad 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 otprilike 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čitaj o css svojstva 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 Mobilni uredaji 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

Prema zadanim postavkama, svi elementi popisa raspoređeni su okomito, zauzimajući cijelu širinu elementa spremnika, koji zauzvrat zauzima cijelu širinu svog bloka spremnika.

HTML oznake za vodoravnu navigaciju

Stavka izbornika
Stavka izbornika
Stavka izbornika

Horizontalni izbornik koji se nalazi unutar oznake dodatno se može postaviti unutar ... i/ili ... elementa. Zahvaljujući ovom html označavanju daje semantičko značenje, a također se pojavljuje dodatna prilika za formatiranje bloka izbornika.

Postoji nekoliko načina da ih postavite horizontalno. Najprije trebate resetirati zadane stilove preglednika za elemente navigacije:

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

Izrada elemenata liste malim slovima. Kao rezultat toga, oni se nalaze vodoravno, sa desna strana između njih se dodaje razmak od 0,4 em (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.

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.

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.

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.

Seriju nastavljamo lekcijom o padajućim izbornicima. Sljedeći je vodoravni padajući izbornik "uradi sam" pomoću css-a.

Ako ste ovdje došli slučajno ili ste tražili drugu implementaciju padajućeg izbornika, savjetujem vam da odete na nadređeni odjeljak.

Ovaj odjeljak opisat će horizontalni padajući izbornik u CSS-u i HTML-u.

Navigacija po stranici:

Tako, naš zadatak:

napravite horizontalni izbornik s padajućom listom css (na ul li listama) bez koristeći jQuery i Javascript, a također i bez korištenja tablica

Prije svega, prije nego počnemo pisati kod, moramo učiniti html predložak za jelovnik.

Zbog činjenice da izrađujemo univerzalni izbornik, želim ga učiniti što sličnijim izlaznom izborniku WordPress-a. Po mom mišljenju, ovo je jedan od najjednostavnijih i najsvestranijih kodova Html izbornika. Ovako izgleda:

Dom
O nama
Naše usluge
- Naša usluga br.1
- Naš servis br.2
- Naš servis br.3
- Naš servis br.4
- Usluga 5
Vijesti
Kontakti

Kao što možete vidjeti iz koda, naš padajući izbornik bit će implementiran na popise ul i li. Ovako izgleda izbornik bez CSS stilova:

Da se razumijemo, izgleda ružno, kao obična lista. Zatim moramo ukrasiti ovaj izbornik koristeći CSS stilove.

CSS stilovi za padajuće izbornike i ostalo potrebni su kao zrak. Uostalom, padajući tab napravljen je na temelju pseudo-class:hover.

Za horizontalni padajući izbornik potrebni su nam sljedeći stilovi:

#menu1(position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100 %; visina:auto; list-style:none; background:#F3A601; ) #menu1 > ul::after( display:block; width:100%; height:0px; clear:both; content:" "; ) # menu1 ul li( position:relative; display:block; float:left; width:auto; height:auto; ) #menu1 ul li a( display:block; padding:9px 25px 0px 25px; font-size:14px; font- obitelj:Arial, sans-serif; boja:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( pozadina:#EBBD5B; boja:#2B45E0; )

Ovo još nije kraj, samo dio CSS-a za glavni horizontalni izbornik. Zatim ćemo napisati stilove za padajući popis izbornika:

#menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*ovaj redak implementira mehanizam ispadanja*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 25px; width: 100%; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: lebdi (pozadina:#FDDC96; boja:#6572BC; )

To je sad to. Sam mehanizam ispadanja implementiran je u jednoj liniji.

Pogledajte kožu s ovim izbornikom:

Riža. 2 (vodoravni padajući izbornik)

Ispod je demonstracija rada padajućeg izbornika, kao i poveznica za preuzimanje izvora. (Demo će se otvoriti s padajućim izbornikom na vrhu ove stranice, ne morate kliknuti otvori u novom prozoru 🙂 ili kotačić miša)

Većina vas mi može prigovoriti da su takvi izbornici kakve sam gore prikazao pozdrav iz prošlosti i djelomično ste u pravu, iako sam vidio novije izglede s takvim izbornicima.

Nadam se da ste preuzeli gornji primjer. Naš HTML ostaje isti, ali ćemo potpuno promijeniti CSS. Možete jednostavno uzeti CSS kod odavde i zalijepiti ga u preuzeti primjer ili pogledati u demo modu kako radi.

#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1(position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul(text-align: poravnati; veličina fonta:1px; visina linije:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relativno; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 ul li a( display:block; padding:9px 35px 0px 35px; font-size :14px; obitelj-fontova:Arial, sans-serif; boja:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left :0px; prikaz: ništa; širina: auto; pozadina:#EBBD5B; white-space:nowrap; ) #menu1 ul li:last-child ul(/*posljednja stavka bit će pričvršćena na desni rub*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this linija implementira mehanizam ispadanja*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; width:100% ; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: lebdi (pozadina: #FDDC96; boja:#6572BC; )

Ovaj se primjer također razlikuje od prvog po tome što se padajući izbornik, sam padajući izbornik, rasteže ovisno o širini svih stavki izbornika.

Za vrlo duge stavke izbornika, ova opcija možda neće biti vrlo prikladna, jer će preći ograničenja. Da biste onemogućili ovo svojstvo, samo pronađite svojstvo "white-space:nowrap;" na selektoru #menu1 ul li ul i izbrišite ga.

U nastavku možete pogledati demo ili preuzeti izvore vodoravnog padajućeg izbornika:

Bez separatora ovaj izbornik izgleda tako-tako. Razdjelnici se mogu dodati u HTML ručno, ali ako imate CMS, kao što je WordPress, njihovo ručno dodavanje nije baš zgodno.

Postoji nekoliko desetaka opcija, kao na čisti CSS dodajte traku (razdjelnik) između stavki izbornika. Neću duplicirati opcije koje koriste::before ili::after , ili mnogo jednostavnije border-left, border-right.

Postoje situacije kada je izgled izgrađen tako divno da ne možete bez jqueryja.

Naš HTML kod ostaje isti, samo uključujemo jQuery biblioteku i datoteku koja je koristi na samom početku:

Odmah nakon .

Kao što razumijete, morate stvoriti datoteku skripta-izbornik-3.js i dodajte ovaj mali kod tamo:

$(dokument).ready(function())( $("#menu1 > ul > li:not(:last-child)").after(" "); ));

CSS stilove za takav izbornik treba ostaviti kakvi jesu, + dodati ovaj dio na kraj:

#menu1 ul li.razd( visina:28px; širina:1px; pozadina:#ffffff; margin-top:4px; )

Horizontalni padajući izbornik s graničnicima u jQueryju izgledat će ovako:

Možete pogledati u demo načinu rada ili preuzeti predložak horizontalnog izbornika u nastavku:

Prednosti ovog rješenja su:

izbornik će se iscrtavati dinamički;
uvlake od separatora do odlomka posvuda su iste;
ljepši i fleksibilniji dizajn.

CSS izbornik

Budući da govorimo o višerazinskim padajućim izbornicima koji lebde mišem, vjerojatno ih vrijedi podijeliti u podgrupe:

s vip jastučićem kada pokazujete u stranu
s skočnim padajućim izbornikom treće razine

U svojim primjerima pokazat ću višerazinski CSS izbornik s 3 razine, tada mislim da neće biti teško pogoditi što treba učiniti.

Prvo, moramo malo ispraviti naš HTML. Tu će se dodati nekoliko redaka za razinu 3:

Dom
O nama
Naše usluge
- Naša usluga br.1
  - Dodatak usluzi 1
  - Dodatak usluzi 2
- Naš servis br.2
  - Dodatak usluzi 3
  - Dodatak usluzi 4
- Naš servis br.3
- Naš servis br.4
- Usluga 5
Vijesti
Kontakti
- Karta puta
  - Dodatak karte
  - Dodatak za kartu 2
- Obrazac za povratne informacije

#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1(position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul(text-align: poravnati; veličina fonta:1px; visina linije:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3 em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a (pozadina:#EBBD5B; boja:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 > ul > li:last-child > ul(/*posljednja stavka bit će pričvršćena na desni rub*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*ovaj redak implementira mehanizam ispadanja* / #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box -sizing:border-box ; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( background:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; ) #menu1 > ul > li:zadnje dijete > ul ul(lijevo:auto; desno:100%;) #menu1 ul li ul li ul a(boja:#F38A01;)

Kopiramo datoteke za jQuery kao što su bile iz prethodnog primjera. Odlučila sam ostaviti pregrade kako bi jelovnik izgledao barem malo bolje. Naravno da možete i bez njih.

Evo kako se to dogodilo:
Napravio sam 2 skina u jednom da pokažem kako kap izgleda desno i u sredini.

U nastavku možete pogledati demo i preuzeti primjer:

Ima malo ulja u naslovu, ali uspjet će, glavno je kod.

Bit ovog primjera je stvoriti horizontalni padajući izbornik pune širine s padajućim izbornikom pune širine + više razina.

Neću mijenjati HTML kod, može se uzeti iz prethodnog primjera. Ostavljamo i separatore u jQueryju.

Samo će se CSS potpuno promijeniti:

#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1(position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul(text-align: poravnati; veličina fonta:1px; visina linije:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relativno; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 > ul > li(position:static;) #menu1 ul li.razd( visina :28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans- serif; boja:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; ) #menu1 ul li > a:lebdjeti, #menu1 ul li:lebdjeti > a( pozadina:#EBBD5B; boja:#2B45E0; ) #menu1 ul li ul( position:apsolute; top:36px; left:0px; display:none; width:100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none; width:100%; height:0px; content:" "; ) #menu1 ul li:hover > ul(display:block;)/*ovaj redak implementira mehanizam ispadanja*/ #menu1 ul li ul li( display :block; width:30%; float:left; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box- sizing:border -box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( pozadina: #FDDC96; boja:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; z-index:15; ) #menu1 ul li ul li ul li (display: block; float:none; width:100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px solid #ffffff; )

Izbornik će izgledati ovako: Jedina stvar je da stranica mora imati dovoljno prostora, budući da zadnja stavka s desne strane nema mjesta za padajući izbornik. Ovaj problem se može riješiti pomoću:nth-child, ali ja se nisam trudio.

Pogledajte demo vodoravnog padajućeg izbornika s više razina:

Kao što ste možda primijetili: donja matrica je također pune širine. Ovako se prave kapi u nekoliko blokova.

To je sve za mene, nadam se da će vam barem jedan moj primjer odgovarati. Hvala vam na pažnji.

Ako ste pročitali cijeli post, ali niste pronašli kako napraviti vlastiti vodoravni padajući izbornik u css-u, postavite pitanje u komentarima ili upotrijebite pretraživanje web mjesta.

Također, savjetujem vam da posjetite matičnu stranicu https://site/vypadayushhee-menu/, tamo su prikupljeni svi primjeri i vrste padajućih izbornika.

Prekrasan horizontalni izbornik pune širine. Kako napraviti gumeni responzivni izbornik koristeći CSS? Vodoravni izbornik pune širine css

Nalazimo se na društvenim mrežama

Kategorije