Često je potrebno uraditi horizontalni meni, koji će se protezati cijelom širinom roditeljskog bloka, bez obzira na to koliko stavki sadrži.
Danas bih želeo da vam pokažem kako da napravite upravo takav meni.
Dakle, naš meni će biti sledeći:
Isteže se cijelom širinom i ističe se kada se pređe preko njega. Meni je zaobljen sa strane.
HTML MARKUP
Dom
Zanimljive vijesti
...
Još jedna stavka menija!
Da bi meni napravio punu širinu, koristio sam tabele sa 100% širinom. Svaka tabela ima div kontejner stavke menija. U zavisnosti od toga da li je prva, poslednja ili srednja stavka menija div, dodeljuje se odgovarajuća klasa.
Svaki div kontejner ima 2 bočne ivice sa apsolutnim pozicioniranjem, koje su neophodne za ispravan prikaz. Ako koristite standardne ivice, onda kada mijenjate stavke menija, tekst će skočiti za 1-2 piksela, što je dobro.
Aktivna klasa je odgovorna za odabranu stavku menija i ističe je.
U svakoj stavci imamo sliku i tekst. Kako bismo osigurali da je sve ovo poravnato striktno u sredini okomito, koristimo tablicu. Zahvaljujući svojstvu vertikalnog poravnanja, naše stavke menija će uvek biti glatko prikazane i neće se pomerati.
/* stilovi za bočne ivice */ .borderLeftSecond, .borderRightSecond (prikaz: nema; pozicija: apsolutna; širina: 1px; visina: 47px; boja pozadine: #9fbb62; vrh: 0px; z-indeks: 1000; ) /* apsolutni pomaci za granice */ .borderLeftSecond (lijevo: 0px; , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond) (prikaz: prvi blok case-a;). i zadnja stavka */ .first_point_menu.active .borderLeftSecond (prikaz: nema; ) .last_point_menu.active .borderRightSecond (prikaz: nema;) .last_point_menu:hover .borderLeftSecond (prikaz: blok; )
To je to!
Dobili smo odličan meni koji se proteže po cijeloj širini roditeljskog bloka! Stavke se ne preklapaju jedna s drugom kada zadržite pokazivač miša i raspored ne skače.
Prilično uobičajen izgled menija stranice, kada kontejner s njim zauzima cijelu širinu dostupnu na stranici. U ovom slučaju, prva stavka je uz lijevu ivicu, a posljednja uz desnu, a razmak između svih elemenata je jednak. Danas ćemo vam reći kako se to radi.
Nudimo vam primjer implementacije gumenog menija kada CSS pomoć za vaš resurs. U ovom meniju stavke će se nalaziti u jednom redu. Javascript se neće koristiti. Sadržaj menija će biti uvršten u redovnu listu. Glavna karakteristika ovakvog menija je njegova svestranost, koja se izražava u činjenici da i broj i dužina stavki mogu biti bilo koji.
Kako to implementirati?
Svaki programer može ponuditi svoj način rješavanja datog problema. Sve zavisi od njegove mašte, nivoa profesionalnosti i sposobnosti. Najčešće rješenje ovog problema je korištenje stola. Također, mnogi bi predložili korištenje javascripta. Žurim da razočaram one koji bi predložili korištenje svojstva prikaza s tablicom vrijednosti ili tablicom-ćelijom. Ova metoda nije dovoljno kompatibilna sa više pretraživača.
Naše rešenje
Naša ponuda će biti izgrađena na čvrstim osnovama znanja HTML5 i CSS3.
Suština procesa je zasnovana na svojstvu text-align sa vrednošću justify. Za one koji su zaboravili, podsjećam: ovo svojstvo orijentira poravnanje teksta po cijeloj širini kontejnera.
Prilikom korištenja našeg rješenja moraju se poštovati dva obavezna pravila. Prvi je da širina kontejnera stavke menija treba da bude manja od teksta. Odnosno, ne u jednom redu. Drugo važno pravilo je da se riječi jednako protežu, bez obzira da li pripadaju istoj tački ili ne.
Ispod je kod koji služi kao primjer kreiranja gumenog menija:
HTML
<
ul>
<
li><
a href=
"#"
>Dom<
li><
a href=
"#"
>Blog<
li><
a href=
"#"
>Vijesti<
li><
a href=
"#"
>Popularno<
li><
a href=
"#"
>Nove stavke
ul ( text-align: justify; overflow: hidden; /* eliminiše nuspojave metode */ visina: 20px; /* takođe eliminiše nepotrebno */ cursor: default ; /* postavlja početni oblik kursora */ margina : 50px 100px 0 100px; boja: #444 ) a : lebdeći mišem ( boja: #ff0000; ) ul: nakon ( /* formiranje drugog reda za razradu metode */ sadržaj: "1" ; margina lijevo: 100 %; visina: 1px; overflow: hidden: inline block )
Da biste radili u dobrom starom Internet Exploreru, morate dodatno dodati sljedeći kod u CSS
ul ( z- indeks: izraz (runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "<
li class
=
"last"
>")); ) ul .last ( margin-left: 100%; ) * html ul ( /* treba samo ie6 */ visina: 30px; )
Nakon što smo naveli potrebne vrijednosti svojstava i kod, dobijamo ovaj gumeni meni:
Nedostaci metode
Kod volumena
Nemogućnost određivanja aktivnog stanja elementa putem selektora klase. To se događa zbog prekida riječi u paragrafima (ako ih ima). Rješenje ovog problema je dodavanje drugog kontejnera unutar elemenata liste.
Za padajući meni, morate prilagoditi kod zbog negativnog utjecaja overflow.
U kojim pretraživačima radi?
6.0+
6.0+
10.5+
5.0+
3.6+
-
-
Nastavljamo seriju sa lekcijom o padajućim menijima. Sledeći je horizontalni padajući meni uradi sam koristeći css.
Ako ste slučajno došli ovdje ili ste tražili drugu implementaciju padajućeg menija, savjetujem vam da odete u odjeljak za roditelje.
Ovaj odjeljak će opisati horizontalni padajući meni u CSS-u i HTML-u.
Navigacija stranice:
dakle, naš zadatak:
napravite horizontalni meni sa padajućim menijem css lista(na ul li listama) bez korištenja jQueryja i Javascripta, kao i bez korištenja tabela
u kodu. Padajući horizontalni meni html
Prije svega, prije nego počnemo pisati kod, moramo napraviti html šablon za meni.
Zbog činjenice da pravimo univerzalni meni, želim da ga učinim što sličnijim izlazu WordPress meni. Po mom mišljenju, ovo je jedan od najjednostavnijih i univerzalni HTML kodovi menija. izgleda ovako:
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 meni će biti implementiran na ul i li listama. Ovako izgleda meni bez CSS stilova:
Da se razumijemo, ružno izgleda, kao obična lista. Zatim trebamo ukrasiti ovaj meni koristeći CSS stilove.
Horizontalni padajući meni u CSS-u
CSS stilovi za padajuće menije i više su neophodni koliko i vazduh. Uostalom, padajuća kartica je napravljena na osnovu pseudo-class:hover.
Za horizontalni padajući meni 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 %; 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- porodica:Arial, sans-serif:1.3em font-weight:uppercase ) #menu1 ul li > a:hover > a( background:#EBBD5B; color:#2B45E0; )
Ovo još nije kraj, samo dio CSS-a za glavni horizontalni meni. Zatim ćemo napisati stilove za padajuću listu menija:
#menu1 ul li ul( position:apsolute; top:36px; lijevo:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*ova linija implementira mehanizam za ispadanje*/ #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-top:1px solid #ffffff ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li a:hover; (pozadina:#FDDC96;boja:#6572BC)
To je to sada. Sam mehanizam ispadanja implementiran je u jednoj liniji.
Pogledajte kožu sa ovim menijem:
Rice. 2 (horizontalni padajući meni)
Ispod je demo rada padajućeg menija, kao i link za preuzimanje izvora. (Demo će se otvoriti sa padajućim izbornikom na vrhu ove stranice, nema potrebe da kliknete otvori u novom prozoru 🙂 ili kotačić miša)
Horizontalni padajući meni pune širine
Većina vas može da mi zameri da su ovakvi meniji kao što sam gore pokazao pozdrav iz prošlosti i delimično ste u pravu, iako sam viđao novije rasporede sa takvim menijima.
Nadam se da ste preuzeli gornji primjer. Naš Html ostaje isti, ali ćemo CSS u potpunosti promijeniti. Možete jednostavno uzeti CSS kod odavde i zalijepiti ga u preuzeti primjer ili gledati u demo modu kako funkcionira.
Za veoma dugačke stavke menija, ova opcija možda neće biti baš zgodna, jer će prevazići granice. Da biste onemogućili ovo svojstvo, samo pronađite svojstvo "white-space:nowrap;" na selektoru #menu1 ul li ul i izbrišite ga.
Ispod možete pogledati demo ili preuzeti izvore horizontalnog padajućeg menija:
Bez separatora, ovaj meni izgleda tako-tako. Separatori se mogu dodati u HTML ručno, ali ako imate CMS, kao što je WordPress, onda njihovo ručno dodavanje nije baš zgodno.
Horizontalni padajući meni sa pregradama
Postoji nekoliko desetina opcija za dodavanje trake (separatora) između stavki menija koristeći čisti CSS. Neću duplirati opcije koje koriste::prije ili::posle, ili mnogo jednostavnije granice lijevo, granice desno.
Postoje situacije kada je izgled tako divno izgrađen da ne možete bez jqueryja.
Naš HTML kod ostaje isti, samo uključujemo jQuery biblioteku i fajl koji ga koristi na samom početku:
Odmah nakon toga.
Kao što razumete, morate kreirati datoteku script-menu-3.js i dodajte ovaj mali kod tamo:
$(document).ready(function())( $("#menu1 > ul > li:not(:last-child)").after(" "); ));
CSS stilove za takav meni treba ostaviti onakvima kakvi jesu, + dodajte ovaj komad na kraj:
#menu1 ul li.razd(visina:28px; širina:1px; background:#ffffff; margin-top:4px; )
Horizontalni padajući meni sa graničnicima u jQueryju će izgledati ovako:
Možete pogledati u demo modu ili preuzeti predložak horizontalnog menija ispod:
Prednosti ovog rješenja su:
meni će se crtati dinamički;
uvlake od separatora do pasusa su svuda iste;
ljepši i fleksibilniji dizajn.
Horizontalni padajući meni na više nivoa CSS meni+HTML
Budući da govorimo o padajućim menijima na više nivoa pri lebdenju, vjerojatno ih vrijedi podijeliti u podgrupe:
sa vip podlogom kada pokazujete u stranu
sa iskačućim padajućim menijem trećeg nivoa
U svojim primjerima pokazaću meni na više nivoa CSS za 3 nivoa, onda mislim da neće biti teško pogoditi šta treba da se uradi.
Višeslojni padajući meni sa bočnom trakom pri lebdenju
Prvo, moramo malo ispraviti naš HTML. Tamo će biti dodato nekoliko linija za nivo 3:
) #menu1 ul li ul( position:apsolute; top:36px; lijevo:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 > ul > li:last-child > ul(/*posljednja stavka će biti pričvršćena za desnu ivicu*/ lijevo:auto; desno:0px; ) #menu1 ul li:hover > ul(display:block;)/*ova linija implementira mehanizam ispadanja* / #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; visina:auto; padding:7px 45px; width:100%; box -sizing: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; boja:#6572BC; ) #menu1 ul li ul li ul( top:0px; lijevo:100%; display:none; background:#fddc96; ) #menu1 > ul > li:last-child > 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čio sam da ostavim razdjelnike kako bi jelovnik izgledao barem malo bolje. Naravno da možete i bez njih.
Evo kako se to desilo:
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:
Višeslojni padajući meni sa iskačućim tablom pri lebdenju
Neću mijenjati HTML kod, može se uzeti iz prethodnog primjera. Također ostavljamo separatore u jQueryju.
) #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:0px content:" " ) #menu1 ul li:hover > ul(display:block;)/*ova linija implementira mehanizam za ispuštanje*/ #menu1 ul li(display :); block width:30% float:left ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; 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( background:#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(display: block; float:none width:100%;) #menu1 ul li ul a(color:#F38A01; border-top:1px solid #ffffff;)
Ovako će izgledati meni: Jedina stvar je da sajt mora imati dovoljno prostora, pošto poslednja stavka sa desne strane nema mesta za padajući meni. Ovaj problem se može riješiti pomoću:nth-child, ali nisam se trudio.
To je sve za mene, nadam se da vam bar jedan moj primjer odgovara. Hvala na pažnji.
koristiće i njima i meni :)
Ako ste pročitali ceo post, ali niste pronašli kako da napravite sopstveni horizontalni padajući meni u css-u, postavite pitanje u komentarima ili koristite pretragu sajta.
Također, savjetujem vam da posjetite roditeljsku stranicu https://site/vypadayushhee-menu/, tamo su prikupljeni svi primjeri i vrste padajućih menija.
Horizontalni meni je lista sekcija web stranice, pa je logičnije postaviti ga unutar elementa
, a zatim primijeniti CSS stilove na njegove elemente. Ovaj izgled menija je najčešći zbog očiglednih prednosti u njegovom pozicioniranju na web stranici. Kako napraviti horizontalni meni: primjeri izgleda i dizajna HTML oznake i osnovni stilovi za horizontalni meni
Po defaultu, svi elementi liste su raspoređeni okomito, zauzimajući cijelu širinu elementa kontejnera, koji zauzvrat zauzima cijelu širinu svog bloka kontejnera.
Horizontalni meni koji se nalazi unutar oznake može se dodatno postaviti unutar ... i/ili ... elementa. Zahvaljujući ovoj html oznaci, daje se semantičko značenje, a također se pojavljuje dodatna prilika da formatirate blok menija.
Postoji nekoliko načina da ih postavite vodoravno. 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 jednaku 1em*/ padding-left: 0; /*ukloni lijevi padding jednak 40px*/ ) a ( dekoracija teksta: nema; /*ukloni podvlačenje teksta linka*/)
Metoda 1. li (prikaz: inline;)
Pravljenje elemenata liste malim slovima. Kao rezultat toga, oni se nalaze vodoravno, s desnu stranu 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 za li li (margin-right: -4px;) . Zatim stiliziramo linkove kako želimo.
Metoda 2. li (float: lijevo;)
Pokretanje elemenata liste. Kao rezultat toga, oni su postavljeni vodoravno. Visina bloka kontejnera ul postaje nula. Da bismo riješili ovaj problem, dodamo (prelijevanje: skriveno;) u ul, proširujući ga i na taj način dozvoljavajući mu da sadrži plutajuće elemente. Za veze dodajte (prikaz: blok;) i stilizirajte ih kako želite.
Metoda 3. li (prikaz: inline-block;)
Izrada elemenata liste inline-block. Nalaze se 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 raspoređeni horizontalno. Dodamo (prikaz: blok;) za veze i stiliziramo ih po želji.
1. Prilagodljivi meni sa efektom podvlačenja kada pređete preko linka