Dom Vlastito iskustvo

Css3 in-line meni pune širine. Predivan horizontalni meni pune širine

Nastavljamo seriju sa lekcijom o padajućim menijima. Sljedeć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ćom listom css (na ul li listama) bez upotrebe jQueryja i Javascript-a, kao i bez upotrebe 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 menija. Po mom mišljenju, ovo je jedan od najjednostavnijih i najsvestranijih kodova Html 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 %; visina:auto; list-style:none; background:#F3A601; ) #menu1 > ul::after( display:block; width:100%; visina:0px; clear:oth; 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- porodica: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; boja:#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; širina: 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: lebdjeti (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 načina 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.

#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: justify; font-size:1px; line-height: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 a( display:block; padding:9px 35px 0px 35px; font-size :14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-size :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; boja:#2B45E0; ) #menu1 ul li ul( position:apsolute; top:36px; lijevo :0px; display:none; širina: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;)/*ovo linija implementira mehanizam dropouts*/ #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: lebdjeti (pozadina: #FDDC96; boja:#6572BC; )

Ovaj primjer se također razlikuje od prvog po tome što se padajući meni, sam padajući meni, proteže u zavisnosti od širine svih stavki menija.

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 .

Kao što razumete, morate kreirati fajl 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+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 višeslojni CSS meni sa 3 nivoa, tada mislim da neće biti teško pogoditi šta treba učiniti.

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:

Dom
O nama
Naše usluge
- Naša usluga br. 1
  - Dodatak servisu 1
  - Dodatak servisu 2
- Naš servis br. 2
  - Dodatak servisu 3
  - Dodatak servisu 4
- Naš servis br. 3
- Naš servis br. 4
- Usluga 5
Vijesti
Kontakti
- Mapa puta
  - Dodatak za mapu
  - 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: justify; font-size:1px; line-height: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: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-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; 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

Ima malo ulja u naslovu, ali radiće, glavna stvar je šifra.

Suština ovog primjera je kreiranje horizontalnog padajućeg menija pune širine sa padajućim menijem pune širine + više nivoa.

Neću mijenjati HTML kod, može se uzeti iz prethodnog primjera. Također ostavljamo 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: justify; font-size:1px; line-height: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(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:hover, #menu1 ul li:hover > a( background:#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;)/*ova linija implementira mehanizam za ispuštanje*/ #menu1 ul li ul li( display :block; width:30%; float:left; ) #menu1 ul li ul li a( display:block; text-transform:none; visina: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( background: #FDDC96; boja:#6572BC; ) #menu1 ul li ul li ul( top:0px; lijevo:100%; display:none; background:#fddc96; z-index:15; ) #menu1 ul li ul li ul li (prikaz: blok; float:none; širina:100%;) #menu1 ul li ul li ul a( boja:#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.

Pogledajte demonstraciju horizontalnog padajućeg menija na više nivoa:

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

To je sve za mene, nadam se da vam bar jedan moj primjer odgovara. Hvala vam 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.

Dobar dan

Često je potrebno napraviti 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.

CSS PRAVILA

Prvo, postavimo stilove za opći prikaz menija:

Menu_container ( padding-top: 40px; širina: 100%; visina: 47px; razmak između granica: 0px; ) .menu_container td (vertical-align: middle; /* vertikalno poravnanje */ ) .last_point_menu, .first_point_menu (menu_middle_point). širina: 100%; visina: 47px; granica: 1px čvrsta #dadbda; z-indeks: 1000; pozicija: relativna; obrub lijevo: nema; ) .inner_table ( širina: 100%; visina: 100%; ) .inner_table td ( padding: 0px; vertikalno-poravnanje: sredina; granica: nema; text-align: lijevo; širina: 150px; padding-left: 4px; ) .td.inner_table_title ( padding-top: 4px; font-weight: bold; ) .td.inner_table_img ( širina: 40px!važno; ) .inner_table_menu (visina: 100%; padding: 0px; vertikalno poravnanje: sredina; granica: nema; text-align: lijevo; ) .inner_table_title ( padding-left: 10px; padding-desno: 10px; transformacija teksta: velika slova; visina linije: 13px; ) .inner_table_menu td.inner_table_img ( širina: 30px!važno; visina: 30px!važno; padding-left: 15px; )

Za ljepotu, zaokružimo uglove sa strane menija:

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-left-radius: 5px; border-right: 1px solid #dadbda; ) .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border -donji-desni-radijus: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px ; )

Sada naš meni ima ljepši izgled:

Do sada, prva tačka nema lijevu granicu. Popravićemo to malo kasnije.

Sada dodajmo efekte lebdenja za meni.

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 ( background-color: #CAE285; background-image: -moz gradijent (vrh, #CAE285, #9FCB56); pozadinska slika: -webkit-gradient(linear, 0 0, 0 100%, od (#CAE285), do (#9FCB56)); background-image: -webkit-linear -gradient(top, #CAE285, #9FCB56); background-image: -o-linear-gradient(top, #CAE285, #9FCB56); background-image: linear-gradient(do bottom, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: 5000; ) /* će razraditi granice pri lebdenju */ .first_point_menu ( border: 1px solid #dadbda ; ) .first_point_menu:hover, .first_point_menu.active ( border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( border: 1px solid #dadbda; border-left: none; ) . :hover ( granica: 1px čvrsta #9FCB56; granica lijevo: nema; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( granica lijevo: nema; )

Sada naš meni izgleda mnogo ljepše, ali za sada nemamo granice za istaknute stavke menija. Hajde da popravimo ovo!

/* 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 ivice */ .borderLeftSecond ( lijevo: 0px; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond) /* blokirajte slučajeve; prva i posljednja 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 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.

Zdravo. Nisam pisao postove na temu html/css rada jako dugo. Nedavno sam upravo počeo sastavljati novi izgled i u procesu sam naišao na zanimljiv trik koji vam omogućava da učinite meni fleksibilnim (možete mu dodati nove stavke i veličina se neće povećati, ali će uvijek biti 100% roditeljski blok). Dakle, danas ćemo implementirati gumeni meni koristeći CSS.

Ako ste previše lijeni da pročitate članak, možete pogledati ovaj video. Autor takođe sve odlično objašnjava:

Gumeni meni sa CSS - korak 1

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

blok omot za meni

sam meni, prikazan kroz listu sa nabrajanjem (ul tag)

Pa, stavke menija su unutra i, shodno tome, već imaju veze

Sve je jasno, evo moje oznake koda:

Sve izgleda standardno, ovako:

Sada ćemo sve staviti u željenu formu, CSS će se baciti na posao.

Korak 2 - Osnovni stilovi

Zatim ću dodati stilove bloku omotača. Naime, maksimalnu širinu ću postaviti na 600 piksela (samo da olakšam snimanje ekrana kako bi meni stajao), a blok ću i centrirati.

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

Korak 3 - guma za implementaciju

Pređimo sada na sam jelovnik. Uklonit ću markere iz njega (oznaku ul), napraviti linearni gradijent pozadine i, što je najvažnije, koristiti svojstvo display: table-row da bi se kontejner za meni ponašao kao red tabele. Ovo je važno učiniti za dalje manipulacije.

R-meni(
pozadina: linearni gradijent (nadesno, #b0d4e3 0%,#88bacf 100%);
displej: tabela-red;
stil liste: 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. Pisaću o njemu ponovo jednog dana.

R-meni(
vertikalno poravnanje: dno;
displej: ćelija tabele;
širina: auto;
text-align: centar;
visina: 50px;
border-right: 1px solid #222;
}

vertical-align: bottom - ovo svojstvo je neophodno kako bi, ako tekst u stavci menija zauzima 2 reda, bio ravnomerno prikazan. Kada napravimo meni, možete ukloniti ovo svojstvo, zumirati tako da stavke budu komprimirane i tekst premješten na dva reda i vidjet ćete problem sa prikazom. Vratite imovinu i sve će biti u redu.
display: table-cell - budući da smo meni prikaza postavili da bude red tabele, bilo bi logično postaviti njegove stavke da se prikazuju kao ćelije u tabeli. Neophodno je.
širina: auto — širina će se automatski izračunati u zavisnosti od dužine teksta u paragrafu
text-align: center - ovo je samo za centriranje teksta unutra
visina: 50px — postavite visinu na 50 piksela
pa, granica desno je samo granica na desnoj strani, separator za stavke

Za sada jelovnik izgleda neugledno, ali u redu je, vrijeme je da ga podsjetimo.

Posljednja stvar koju treba učiniti je stilizirati veze unutar stavki. Evo imam ovaj kod:

R-meni li a(
tekst-dekoracija: nema;
širina: 1000px;
visina: 50px;
vertikalno poravnanje: sredina;
displej: ćelija tabele;
boja: #fff;
font: normalan 14px Verdana;
}

A ovako sada izgleda meni:

Opet, dozvolite mi da objasnim neke redove:

svojstvo text-decoration nadjačava podrazumevano podvlačenje za veze
širina: 1000px je možda najvažnija linija. Morate postaviti veze na otprilike ovu širinu, možda manje, ali definitivno veće od najšire moguće stavke menija. Veze neće biti široke 1000 piksela, budući da će širina biti ograničena stavkom menija li, čija je širina postavljena na auto, ali to će omogućiti da za bilo koji broj stavki u meniju uvijek bude 100 posto širine.
vertical-align: middle i display: table-cell - prvi će poravnati tekst okomito do centra, a drugi će također prikazati veze kao ćelije. Potrebne su obje nekretnine.
font - pa, ovo je samo skup postavki za font. Pročitajte o css svojstvima za fontove u ovom članku.

Korak 4 (opcionalno) Možete dodati interaktivnost

Na primjer, tako da se boja stavke menija mijenja kada se lebdi. Ovo se može vrlo jednostavno implementirati, koristeći pseudo-klasu hover:

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

Testiranje menija na gumu

Odlično, meniji su gotovi, ali nismo provjerili ono najvažnije - koliko je gumeno, kao što sam vam obećao. Pa, dodaću još 2 stavke na meni:

Meni ostaje širok 600 piksela. Preostale stvari su jednostavno malo skupljene kako bi se smjestile 2 nove.

Dodaću još jednu dugačku tačku:

Kao što vidite, meni se još malo smanjio i duga stavka se prikazuje sasvim normalno. A da nije bilo svojstva vertical-align: bottom o kojoj sam vam pričao, meni bi izgledao lošije.

Smanjiću jelovnik na tri stavke.

Stavke su postale mnogo slobodnije, ali se sam meni nije promijenio po širini. Tako smo napravili 100% gumeni meni!

Kako to prilagoditi?

U principu, ako postavite blok omota na maksimalnu širinu, a ne na fiksnu, onda ga ne treba ni 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 ekranom, bez formiranja horizontalnog skrolovanja.

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

Horizontalni meni je lista sekcija web stranice, pa je logičnije postaviti ga unutar elementa

Po defaultu, svi elementi liste su raspoređeni okomito, zauzimajući cijelu širinu elementa kontejnera, koji zauzvrat zauzima cijelu širinu svog bloka kontejnera.

HTML oznake za horizontalnu navigaciju

Stavka menija
Stavka menija
Stavka menija

Horizontalni meni koji se nalazi unutar oznake može se dodatno postaviti unutar ... i/ili ... elementa. Zahvaljujući tome, html markupu se daje semantičko značenje, a također pruža dodatnu priliku za formatiranje bloka 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*/)

Pravljenje elemenata liste malim slovima. Kao rezultat toga, oni su pozicionirani horizontalno, sa razmakom od 0,4 em dodat na desnoj strani između njih (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.

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.

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.

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.