Kako raztegniti vodoravni meni, da se prilega širini glave. Naredi sam vodoravni spustni meni z uporabo CSS in Html. Vodoravni spustni meni polne širine

Precej pogosta postavitev menija spletnega mesta, ko vsebnik z njim zasede celotno širino, ki je na voljo na strani. V tem primeru prvi element meji na levi rob, zadnji pa na desni, razdalja med vsemi elementi pa je enaka. Danes vam bomo povedali, kako se to naredi.

Ponujamo vam primer izvedbe gumijastega menija, ko CSS pomoč za vaš vir. V tem meniju bodo elementi v eni vrstici. Javascript ne bo uporabljen. Vsebina menija bo priložena navadnemu seznamu. Glavna značilnost takšnega menija je njegova vsestranskost, ki se izraža v dejstvu, da sta tako število kot dolžina elementov lahko poljubna.

Vsak programer lahko ponudi svoj način reševanja danega problema. Vse je odvisno od njegove domišljije, stopnje strokovnosti in sposobnosti. Najpogostejša rešitev te težave je uporaba tabele. Poleg tega bi mnogi predlagali uporabo javascripta. Hitro bom razočaral tiste, ki bi predlagali uporabo lastnosti prikaza s tabelo vrednosti ali celico tabele. Ta metoda ni dovolj združljiva med brskalniki.

Naša ponudba bo zgrajena na trdnih temeljih znanja HTML5 in CSS3.

Bistvo postopka temelji na lastnosti poravnave besedila z vrednostjo poravnave. Za tiste, ki ste pozabili, vas spomnim: ta lastnost usmerja poravnavo besedila po celotni širini vsebnika.

Pri uporabi naše rešitve je treba upoštevati dve obvezni pravili. Prvi je, da mora biti širina vsebnika elementa menija manjša od besedila. Se pravi ne v eni vrstici. Drugo pomembno pravilo je, da se besede raztezajo enako, ne glede na to, ali pripadajo isti točki ali ne.

Spodaj je koda, ki služi kot primer ustvarjanja gumijastega menija:

HTML

< ul> < li>< a href= "#" >domov< li>< a href= "#" >Blog< li>< a href= "#" >Novice< li>< a href= "#" >Priljubljeno< li>< a href= "#" >Novi predmeti

ul ( text- align: justify; overflow: hidden; /* odpravi stranske učinke metode */ height: 20px; /* odpravi tudi nepotrebno */ kazalec: privzeto ; /* nastavi začetno obliko kazalca */ rob : 50px 100px 0 100px; ozadje: 5px; barva: #444;) a : hover ( barva: #ff0000; ) ul: after ( /* oblikovanje druge vrstice za obdelavo metode */ content: "1" ; margin- left: 100 %; height: 1px; overflow: skrito; prikaz: inline- block;

Če želite delati v dobrem starem Internet Explorerju, morate v CSS dodatno dodati naslednjo kodo

ul ( z- indeks: izraz(runtimeStyle. zIndex = 1, insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( margin-left: 100 %; ) * html ul ( /* potrebujem samo ie6 */ višina: 30px; )

Ko določimo potrebne vrednosti lastnosti in kodo, dobimo ta gumijasti meni:

Dober večer

Pogosto je treba narediti horizontalni meni, ki se razteza čez celotno širino nadrejenega bloka, ne glede na to, koliko elementov vsebuje.

Danes bi vam rad pokazal, kako sestaviti prav takšen jedilnik.

Naš jedilnik bo torej sledeč:

Raztegnjen je po vsej širini in izstopa, ko lebdimo nad njim. Jedilnik je ob straneh zaobljen.

HTML MARKUP

domov

Zanimiva novica

Še en meni!

Da bi bil meni polne širine, sem uporabil tabele s 100% širino. Vsaka tabela ima vsebnik div elementa menija. Glede na to, ali je prvi, zadnji ali vmesni menijski element div, je dodeljen ustrezen razred.

Vsak vsebnik div ima 2 stranski obrobi z absolutnim položajem, ki sta potrebni za pravilen prikaz. Če uporabljate standardne obrobe, potem ko preklopite elemente menija, bo besedilo skočilo za 1-2 slikovnih pik, kar je dobro.

Aktivni razred je odgovoren za izbran menijski element in ga osvetli.

V vsakem artiklu imamo sliko in besedilo. Da bi zagotovili, da je vse to poravnano strogo na sredini navpično, uporabljamo tabelo. Zahvaljujoč lastnosti navpične poravnave bodo naši elementi menija vedno prikazani gladko in se ne bodo premaknili.

PRAVILA CSS

Najprej nastavimo sloge za splošni prikaz menija:

Menu_container (padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px; ) .menu_container td (vertical-align: middle; /* navpična poravnava */) .last_point_menu, .first_point_menu, .middle_point_menu ( širina: 100 %; obroba: 1 piksl; polna obroba: nič; navpična poravnava: nobena; poravnava besedila: levo: 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 ; vertical-align: none; text-align: left; .inner_table_title (padding-left: 10px; text-transform: uppercase; .inner_table_menu td.inner_table_img (širina: 30 slikovnih pik!pomembno; višina: 30 slikovnih pik!pomembno; oblazinjenje-levo: 15 slikovnih pik; )

Za lepoto zaokrožimo vogale ob straneh 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-right: 1px solid .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border - bottom-right-radius: 5px; -moz-border-radius-topright: 5px ;

Sedaj ima naš jedilnik še lepšo podobo:

Zaenkrat prva točka nima leve meje. Bomo popravili malo kasneje.

Zdaj pa dodamo učinke lebdenja za meni.

Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( barva ozadja: #CAE285; slika ozadja: -moz-linear- gradient(vrh, #CAE285, #9FCB56); -webkit-gradient(linearno, 0 0, 0 100%, od(#CAE285), do(#9FCB56)); -gradient(vrh, #CAE285, #9FCB56); slika ozadja (zgoraj, #CAE285, #9FCB56); slika ozadja (na dno, #CAE285, #9FCB56); obroba: 1px -color: #aec671 #9fbb62 #87ac4a; z-indeks: 5000; .first_point_menu.active (border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu (borba: 1px polna #dadbda; border-left: none; ) .last_point_menu:hover ( border: 1px solid #9FCB56; border-left: none; barva obrobe: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( border-left: none; )

Zdaj je naš meni videti veliko lepši, vendar za zdaj nimamo obrob za označene elemente menija. Popravimo to!

/* slogi za stranske obrobe */ .borderLeftSecond, .borderRightSecond ( display: none; position: absolute; width: 1px; height: 47px; background-color: #9fbb62; top: 0px; z-index: 1000; ) /* absolutni odmiki za obrobe */ .borderLeftSecond (levo: 0px;). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* obravnava primere prvi in ​​zadnji element */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )

To je vse!

Dobili smo odličen meni, raztegnjen po celotni širini nadrejenega bloka! Elementi se med seboj ne prekrivajo, ko premaknete miško, in postavitev ne skače.

Zdravo. Že dolgo nisem pisal prispevkov na temo dela html/css. Pred kratkim sem ravno začel sestavljati novo postavitev in med tem sem naletel na zanimiv trik, ki vam omogoča, da naredite meni prilagodljiv (lahko mu dodate nove elemente in velikost se ne bo povečala, ampak bo vedno 100-odstotna nadrejeni blok). Torej, danes bomo implementirali gumijasti meni s pomočjo CSS.

Če ste preleni, da bi prebrali članek, si lahko ogledate ta video. Avtor vse skupaj tudi zelo dobro razloži:

Prvi korak je vedno oznaka html, kje bi bili brez nje? Toda v našem primeru bo vse preprosto:

Vse je jasno, tukaj je moja označevalna koda:

• 1. odstavek


• Točka 2


• Točka 3


• Točka 4


• Točka 5

Vse izgleda standardno, takole:

Zdaj bomo vse vključili pravi tip, se CSS loti dela.

Nato bom bloku ovoja dodal sloge. Namreč, največjo širino bom nastavil na 600 pikslov (samo za lažji posnetek zaslona, ​​da bo meni ustrezal), blok pa bom tudi centriral.

Zaviti (
ozadje: #fff;
največja širina: 600 slikovnih pik;
rob: 0 samodejno;
}

Zdaj pa se lotimo samega menija. Z njega bom odstranil oznake (oznaka ul), naredil linearni gradient ozadja in, kar je najpomembneje, uporabil lastnost display: table-row, da se bo vsebnik za meni obnašal kot vrstica tabele. To je pomembno storiti za nadaljnje manipulacije.

R-meni (
ozadje: linearni gradient (desno, #b0d4e3 0%,#88bacf 100%);
prikaz: tabela-vrstica;
slog seznama: brez;
}

Kot lahko vidite, je zgornja koda pravkar rešila vse, o čemer sem pisal. Mimogrede, priročno je ustvarjati prelive z orodjem Ultimate CSS Gradient Generator. O njem bom še kdaj pisal.

R-meni (
navpična poravnava: spodaj;
prikaz: tabela-celica;
širina: avto;
poravnava besedila: sredina;
višina: 50px;
meja-desno: 1px polna #222;
}

• vertical-align: bottom - ta lastnost je potrebna, da če besedilo v menijskem elementu zavzame 2 vrstici, bo prikazano enakomerno. Ko naredimo meni, lahko to lastnost odstranite, povečate, tako da so elementi stisnjeni in se besedilo premakne v dve vrstici in videli boste težavo s prikazom. Vrnite nepremičnino in vse bo v redu.
• prikaz: tabela-celica - ker smo sam prikaz menija nastavili kot vrstico tabele, bi bilo logično, da bi njegove elemente nastavili tako, da so prikazani kot celice v tabeli. To je potrebno.
• širina: samodejno — širina se samodejno izračuna glede na dolžino besedila v odstavku
• text-align: center - to je samo za centriranje besedila znotraj
• višina: 50 slikovnih pik — nastavite višino na 50 slikovnih pik
• no, border-desno je samo obroba na desni, ločilo za elemente

Zaenkrat meni izgleda grdo, a nič hudega, čas je, da se ga spomnimo.

Zadnja stvar, ki jo morate narediti, je oblikovanje povezav znotraj elementov. Tukaj imam to kodo:

R-meni li a(
tekst-dekoracija: brez;
širina: 1000 slikovnih pik;
višina: 50px;
navpična poravnava: sredina;
prikaz: tabela-celica;
barva: #fff;
pisava: navadna 14px Verdana;
}

In tako izgleda meni zdaj:

Še enkrat, naj pojasnim nekaj vrstic:

• lastnost text-decoration preglasi privzeto podčrtanje za povezave
• width: 1000px je morda najpomembnejša vrstica. Povezave morate nastaviti na približno to širino, morda manjšo, vsekakor pa večjo od najširše možne menijske postavke. Povezave ne bodo široke 1000 slikovnih pik, saj bo širina omejena z postavko menija li, katere širina je nastavljena na samodejno, vendar bo to omogočilo zagotoviti, da bo za poljubno število elementov v meniju vedno 100 odstotkov širine.
• vertical-align: middle in display: table-cell - prvi bo besedilo poravnal navpično na sredino, drugi pa bo prikazal tudi povezave kot celice. Obe lastnosti sta potrebni.
• pisava - no, to je samo niz nastavitev za pisavo. Preberite o lastnosti css za pisave v tem članku.

Na primer, da se barva elementa menija spremeni, ko premaknete miškin kazalec. To je mogoče preprosto implementirati z uporabo psevdorazreda lebdenja:

R-meni li:hover(
barva ozadja: #6bba70;
}

Super, meniji so pripravljeni, nismo pa preverili najpomembnejšega - koliko je gumijast, kot sem vam obljubil. No, v meni bom dodal še 2 elementa:

Meni ostaja širok 600 slikovnih pik. Preostali predmeti so bili preprosto malo skrčeni, da so lahko sprejeli 2 nova.

Dodal bom še eno dolgo točko:

Kot vidite, se je meni še malo skrčil in dolga postavka je prikazana čisto normalno. In če ne bi bilo lastnosti vertical-align: bottom, o kateri sem vam povedal, bi bil meni videti slabše.

Meni bom skrčil na tri postavke.

Elementi so postali veliko bolj svobodni, sam meni pa se v širini ni spremenil. Tako smo naredili 100% gumijasti meni!

Načeloma velja, da če ovojni blok nastavite na največjo širino in ne na fiksno, ga sploh ni treba prilagajati. V mojem primeru imam lastnost največje širine: 600 slikovnih pik in ko širina postane manjša od 600 slikovnih pik, se bo blok preprosto skrčil skupaj z zaslonom, ne da bi oblikoval vodoravni drsnik.

No, če želite nekako spremeniti ali popraviti meni na mobilne naprave ali širokih zaslonih, potem vam bodo medijske poizvedbe pomagale! Vso srečo pri gradnji spletne strani!

Serijo nadaljujemo z lekcijo o spustnih menijih. Naslednji je vodoravni spustni meni naredi sam s pomočjo css.

Če ste sem prišli po naključju ali ste iskali drugo izvedbo spustnega menija, vam svetujem, da obiščete nadrejeni razdelek.

V tem razdelku bo opisan vodoravni spustni meni v CSS in HTML.

Navigacija po strani:

Torej, naša naloga:

naredi vodoravni meni s spustnim seznamom css (na seznamih ul li) brez z uporabo jQuery in Javascript, pa tudi brez uporabe tabel

Najprej, preden začnemo pisati kodo, moramo narediti html predlogo za jedilnik.

Ker izdelujemo univerzalni meni, ga želim narediti čim bolj podobnega izpisu menija WordPress. Po mojem mnenju je to ena najpreprostejših in najbolj vsestranskih menijskih kod Html. Videti je takole:

• domov
• O nas
• Naše storitve
  • Naša storitev št. 1
  • Naša storitev št. 2
  • Naša storitev št. 3
  • Naša storitev št. 4
  • Storitev 5
• Novice
• Kontakti

Kot lahko vidite iz kode, bo naš spustni meni implementiran na seznamih ul in li. Tako izgleda meni brez stilov CSS:

Priznajmo si, videti je grdo, kot običajen seznam. Nato moramo ta meni okrasiti s slogi CSS.

Slogi CSS za spustne menije in drugo so potrebni kot zrak. Navsezadnje je spustni zavihek narejen na podlagi psevdo-razreda: hover.

Za vodoravni spustni meni potrebujemo naslednje sloge:

#menu1(position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul(position:relative; display:block; margin:0px; padding:0px; width:100 %; višina: samodejni; ozadje: #F3A601; ) #menu1::after( display:block; height: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- družina:Arial, sans-serif; font-weight:uppercase; )

To še ni konec, samo del CSS za glavni horizontalni meni. Nato bomo napisali sloge za spustni seznam menijev:

#menu1 ul li ul(position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*ta vrstica izvaja izpadni mehanizem*/ #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 li a:hover; (ozadje:#FDDC96;barva:#6572BC)

To je zdaj to. Sam mehanizem izpadanja je izveden v eni vrstici.

Oglejte si kožo s tem menijem:

riž. 2 (vodoravni spustni meni)

Spodaj je predstavitev delovanja spustnega menija in povezava za prenos virov. (Predstavitev se bo odprla s spustnim menijem na vrhu te strani, ni vam treba klikniti Odpri v novem oknu 🙂 ali kolesca miške)

Večina mi lahko očita, da so takšni meniji, kot sem jih prikazal zgoraj, pozdrav iz preteklosti in deloma imate prav, čeprav sem videl novejše postavitve s takšnimi meniji.

Upam, da ste prenesli zgornji primer. Naš Html ostaja enak, vendar bomo popolnoma spremenili CSS. Kodo CSS lahko preprosto vzamete od tukaj in jo prilepite v preneseni primer ali pa si v predstavitvenem načinu ogledate, kako deluje.

#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; ) #menu1 > ul::after( display:inline-block; width:00px; content:" "; ) #menu1 ul li(position) :relative;width:auto;vertical-align:font-height:uppercase; menu1 ul li > a:hover, #menu1 ul li:hover > a(ozadje:#EBBD5B; barva:#2B45E0; ) #menu1 ul li ul(position:absolute; top:36px; left :0px; prikaz:ni; širina: samodejno; ozadje: #EBBD5B; prazen prostor:nowrap; ) #menu1 ul li:last-child ul(/*zadnji element bo pritrjen na desni rob*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this vrstica izvaja izpade mehanizma*/ #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 li a:hover; (ozadje: #FDDC96;barva:#6572BC;

Ta primer se od prvega razlikuje tudi po tem, da se spustni meni, sam spustni meni, razteza glede na širino vseh elementov menija.

Za zelo dolge elemente menija ta možnost morda ne bo zelo priročna, saj bodo presegli meje. Če želite onemogočiti to lastnost, poiščite lastnost "white-space:nowrap;" pri izbirniku #menu1 ul li ul in ga izbrišite.

Spodaj si lahko ogledate predstavitev ali prenesete vire vodoravnega spustnega menija:

Brez ločil je ta meni videti tako-tako. Ločila lahko v HTML dodate ročno, če pa imate CMS, kot je WordPress, potem njihovo ročno dodajanje ni zelo priročno.

Obstaja več deset možnosti, na primer pri čisti CSS dodajte trak (ločilo) med elementi menija. Ne bom podvajal možnosti, ki uporabljajo::before ali::after , ali veliko enostavnejših border-left, border-right.

Obstajajo situacije, ko je postavitev zgrajena tako čudovito, da brez jqueryja ne morete.

Naša koda HTML ostaja enaka, le knjižnico jQuery in datoteko, ki jo uporablja, vključimo na samem začetku:

Takoj po .

Kot razumete, morate ustvariti datoteko script-menu-3.js in tja dodajte to malo kodo:

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

Sloge CSS za tak meni je treba pustiti takšne, kot so, + dodajte ta del na konec:

#menu1 ul li.razd(height:28px; width:1px; background:#ffffff; margin-top:4px; )

Vodoravni spustni meni z ločili v jQuery bo videti takole:

Lahko si ogledate v predstavitvenem načinu ali prenesete predlogo horizontalnega menija spodaj:

Prednosti te rešitve so:

• meni se bo izrisal dinamično;
• zamiki od ločila do odstavka so povsod enaki;
• lepši in prilagodljivejši dizajn.

Ker govorimo o večnivojskih spustnih menijih ob lebdenju, jih je verjetno vredno razdeliti v podskupine:

V svojih primerih bom prikazal večstopenjski meni CSS s 3 nivoji, potem mislim, da ne bo težko uganiti, kaj je treba storiti.

Najprej moramo nekoliko popraviti naš HTML. Tam bo dodanih nekaj vrstic za stopnjo 3:

• domov
• O nas
• Naše storitve
  • Naša storitev št. 1
    • Dodatek k storitvi 1
    • Dodatek k storitvi 2
  • Naša storitev št. 2
    • Dodatek k storitvi 3
    • Dodatek k storitvi 4
  • Naša storitev št. 3
  • Naša storitev št. 4
  • Storitev 5
• Novice
• Kontakti
  • Cestni zemljevid
    • Dodatek zemljevida
    • Dodatek k zemljevidu 2
  • Obrazec 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; ) #menu1 > ul::after( display:inline-block; width:00px; content:" "; ) #menu1 ul li(position) :relative; display:auto; text-align:left; menu1 ul a(padding:45px; font-size:14px; font) -family:sans-serif; barva:#ffffef; text-decoration:uppercase; (ozadje:#EBBD5B; barva:#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(/*zadnji element bo pritrjen na desni rob*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*ta vrstica izvaja mehanizem izpada* / #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( ozadje:#FDDC96; barva:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; ) #menu1 > ul > li:last-child > ul ul(left:auto; right:100%;) #menu1 ul li ul li ul a(color:#F38A01;)

Kopiramo datoteke za jQuery, kot so bile iz prejšnjega primera. Odločil sem se, da pregrade pustim, da bo jedilnik vsaj malo bolje izgledal. Seveda lahko brez njih.

Zgodilo se je takole:
Naredil sem 2 preobleki v enem, da pokažem, kako izgleda kapljica na desni in na sredini.

Spodaj si lahko ogledate predstavitev in prenesete primer:

V naslovu je malo olja, ampak bo šlo, glavna stvar je koda.

Bistvo tega primera je ustvariti horizontalni spustni meni polne širine s spustnim menijem celotne širine + več nivojev.

Ne bom spreminjal kode HTML, lahko jo vzamem iz prejšnjega primera. V jQuery pustimo tudi ločila.

Samo CSS se bo popolnoma spremenil:

#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; ) #menu1 > ul::after( display:inline-block; width:00px; content:" "; ) #menu1 ul li(position) :relative;width:auto;vertical-align:left) #menu1>li.razd;background:#ffffff; -top:4px;) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-family:Arial, sans-serif; line-height:1.3em; font-weight:bold; height:36px; a:hover, #menu1 ul li:hover > a(ozadje:#EBBD5B; barva:#2B45E0; ) #menu1 ul li ul(position:absolute; 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;)/*ta vrstica implementira izpadni mehanizem*/ #menu1 ul li 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(ozadje:#FDDC96; barva :#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; )

Meni bo izgledal takole: Edina stvar je, da mora imeti stran dovolj prostora, saj zadnji element na desni nima prostora za spustni meni. Ta problem je mogoče rešiti z:nth-child, vendar se nisem trudil.

Oglejte si predstavitev horizontalnega večnivojskega spustnega menija:

Kot ste morda opazili: tudi spodnja matrica je polne širine. Tako nastanejo padci v več blokih.

To je zame vse, upam, da vam bo vsaj en moj primer ustrezal. Hvala za vašo pozornost.

Če ste prebrali celotno objavo, vendar niste našli, kako narediti svoj horizontalni spustni meni v css, postavite vprašanje v komentarjih ali uporabite iskanje po spletnem mestu.

Prav tako vam svetujem, da obiščete nadrejeno stran https://site/vypadayushhee-menu/, tam so zbrani vsi primeri in vrste spustnih menijev.