Hur man sträcker ut den horisontella menyn till rubrikens bredd. Gör-det-själv horisontell rullgardinsmeny i css och html. Horisontell rullgardinsmeny i full bredd

En ganska vanlig sajtmenylayout, när behållaren med den upptar hela bredden som finns på sidan. I det här fallet är det första föremålet intill den vänstra kanten, och det sista är intill höger, och avståndet mellan alla element är lika. Idag ska vi visa dig hur det går till.

Vi erbjuder dig ett exempel på implementeringen av gummimenyn när CSS hjälp för din resurs. I den här menyn kommer objekten att finnas på en rad. Javascript kommer inte att användas. Menyns innehåll kommer att slås in i en normal lista. Huvuddraget i en sådan meny är dess mångsidighet, vilket uttrycks i det faktum att både antalet och längden på föremålen kan vara vilken som helst.

Hur implementerar man det?

Varje programmerare kan erbjuda sitt eget sätt att lösa problemet. Allt beror på hans fantasi, nivå av professionalism och förmågor. Den vanligaste lösningen på detta problem är att använda en tabell. Dessutom skulle många föreslå att du använder javascript. De som skulle föreslå att du använder visningsegenskapen med ett värde tabell eller tabellcell– Jag skyndar mig att uppröra. Denna metod har inte tillräcklig kompatibilitet för flera webbläsare.

Vår lösning

Vårt förslag kommer att bygga på en solid grund av HTML5- och CSS3-kunskap.

Kärnan i processen är baserad på egenskapen text-align med värdet justify. För de som har glömt - jag påminner er: den här egenskapen orienterar textjusteringen till behållarens fulla bredd.

När du använder vår lösning måste två obligatoriska regler följas. Den första är att bredden på menyobjektets behållare måste vara mindre än texten. Det vill säga inte på en rad. Den andra viktiga regeln är att ord sträcks lika, oavsett om de tillhör samma stycke eller inte.

Nedan är koden som fungerar som ett exempel på att skapa en "gummi"-meny:

HTML

< ul> < li>< a href= "#" >Hem < li>< a href= "#" >Blogg < li>< a href= "#" >Nyheter < li>< a href= "#" >Populär < li>< a href= "#" >Ny

ul (text- align: justify; overflow: dold; /* ta bort metod biverkning */ höjd: 20px; /* eliminerar också onödiga */ markör: default ; /* ställer in initial markörform */ marginal: 50px 100px 0 100px; bakgrund: #eee; stoppning: 5px ) li ( display: inline; /* gör menyalternativ till text */) li a (display: inline-block; /* tar bort ordavbrott i menyn */ färg: #444; ) a: hover ( färg: #ff0000; ) ul: efter ( /* bildar den andra raden för att utarbeta metoden */ innehåll: "1" ; marginal-vänster: 100%; höjd: 1px; overflow: gömd; display: inline-block; )

För att arbeta i den gamla goda Internet Explorer måste du dessutom lägga till följande kod till CSS

ul ( z-index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .last ( marginal-vänster: 100%; ) * html ul ( /* behöver endast ie6 */ höjd: 30px; )

Efter att ha registrerat de nödvändiga fastighetsvärdena och koden får vi följande gummimeny:

Nackdelar med metoden

1. Volymkod
2. Omöjligheten att bestämma det aktiva tillståndet för ett element genom en klassväljare. Detta beror på ordavbrott i stycken (om det finns någon). Lösningen på det här problemet är att lägga till ytterligare en behållare i listobjekten.
3. För rullgardinsmenyn måste du anpassa koden på grund av den negativa effekten av spill .

Vilka webbläsare fungerar det på?

God eftermiddag!

Det händer ofta att du behöver göra en horisontell meny som kommer att sträcka sig till hela bredden av föräldrablocket, oavsett hur många objekt den innehåller.

Idag skulle jag vilja visa er hur man skapar just en sådan meny.

Så vår meny kommer att se ut som följer:

Den sträcks ut till full bredd, när du hovrar markeras den. Menyn är rundad på sidorna.

HTML MARKUP

Hem

Intressanta nyheter

Ännu ett menyalternativ!

För att göra menyn full bredd använde jag tabeller med 100% bredd. Varje bord har div behållare för menyalternativ. Beroende på om det första, sista eller mellanliggande menyalternativet - div-y tilldelas lämplig klass.

I varje div Behållaren har 2 absolut placerade sidokanter som behövs för korrekt visning. Om du använder standardkanter kommer texten att hoppa med 1-2 pixlar när du byter menyalternativ, vilket är bra.

Klass aktivaär ansvarig för det valda menyalternativet och markerar det.

Varje föremål har en bild och text. För att allt detta ska justeras strikt i mitten vertikalt använder vi ett bord. Tack vare egenskapen för vertikal justering kommer våra menyalternativ alltid att visas smidigt och kommer inte att flyttas bort.

CSS REGLER

Först kommer vi att ställa in stilar för den allmänna visningen av menyn:

Menu_container ( padding-top: 40px; bredd: 100%; höjd: 47px; kantavstånd: 0px; ) .menu_container td ( vertical-align: middle; /* vertikal alignment */ ) .last_point_menu, .first_point_menu, . bredd: 100%; höjd: 47px; kant: 1px fast #dadbda; z-index: 1000; position: relativ; kant-vänster: ingen; ) .inner_table (bredd: 100%; höjd: 100%; ) .inner_table td ( utfyllnad: 0px; vertikal-justera: mitten; kantlinje: ingen; textjustering: vänster; bredd: 150 px; utfyllnad-vänster: 4px; ) .td.inner_table_title ( padding-top: 4px; font-weight: fet; ) .td.inner_table_img ( width: 40px!important; ) .inner_table_menu (höjd: 100%; utfyllnad: 0px; vertikal-align: mitten; border: ingen; text-align: vänster; ) .inner_table_title ( padding-left: 10px; padding-right: 10px; text-transform: versaler; line-height: 13px; ) .inner_table_menu td.inner_table_img ( bredd: 30px!viktigt; höjd: 30px!viktigt; padding-vänster: 15px; )

För skönhet, runda hörnen på sidorna av menyn:

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-radie: 5px; border-right: 1px solid #dadbda; ) .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border -bottom-right-radie: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radie: 5px; border-nedre-höger-radie: 5px ;)

Nu har vår meny fått ett vackrare utseende:

Än så länge har första stycket ingen vänsterkant. Vi fixar det senare.

Låt oss nu lägga till hovringseffekter till menyn.

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 ( bakgrundsfärg: #CAE285; bakgrundsbild: -moz-linear- gradient(top, #CAE285, #9FCB56); bakgrundsbild: -webkit-gradient(linjär, 0 0, 0 100%, från(#CAE285), till(#9FCB56)); bakgrundsbild: -webkit-linjär -gradient(top, #CAE285, #9FCB56); bakgrundsbild: -o-linear-gradient(top, #CAE285, #9FCB56); bakgrundsbild: linjär-gradient(till botten, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: 5000; ) /* arbeta gränsar vid hover*/ .first_point_menu (kant: 1px solid #dadbda; ) .first_point_menu:hover, .first_point_menu.active ( kantlinje: 1px fast #9FCB56; kantfärg: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( kantlinje: 1px fast #dadbda; border-left .hoverlastpoint_) (kant: 1px fast #9FCB56; kant-l eft:ingen; kantfärg: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active (kant-vänster: ingen; )

Nu ser vår meny mycket trevligare ut, men för närvarande har vi inga gränser för de valda menyalternativen. Låt oss fixa det!

/* stilar för sidokanter */ .borderLeftSecond, .borderRightSecond (visning: ingen; position: absolut; bredd: 1px; höjd: 47px; bakgrundsfärg: #9fbb62; topp: 0px; z-index: 1000; ) /* absoluta förskjutningar för gränser */ .borderLeftSecond (vänster: 0px; ) .borderRightSecond (höger: -1px; ) /* visar gränser för aktiva och svävade objekt */ .active .borderLeftSecond, .active .borderRightSecond, .hover_punkt_.menu borderLeftSecond , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond (display: block; ) /* hantera fall av första och sista objektet */ .ft.Second_pointed_ none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )

Det är allt!

Vi fick en fantastisk meny utsträckt till hela föräldrablockets bredd! Punkter på varandra när du svävar musen körs inte över och layouten hoppar inte.

Hallå. Under en lång tid skrev jag inte inlägg om hur html / css fungerar. Nyligen har jag precis börjat skapa en ny layout och i processen kom jag över ett intressant trick som låter dig göra menyn gummi (du kan lägga till nya objekt till den och storleken kommer inte att öka, men den kommer alltid att vara 100 % av det överordnade blocket). Så idag implementerar vi en gummimeny på css.

Om du är för lat för att läsa artikeln kan du titta på den här videon. Författaren förklarar också allt väldigt bra:

CSS Fluid Menu Steg 1

Det första steget är alltid html-markering, där utan det. Men i vårt fall kommer allt att vara enkelt:

1. menyomslagsblock
2. själva menyn, som visas genom punktlista(ul tag)
3. ja, menyalternativen inuti, respektive i dem, finns det redan länkar

Allt är klart, här är min uppmärkningskod:

Det hela ser standard ut, så här:

Nu ska vi ta in allt önskad vy, CSS tar över.

Steg 2 - Grundläggande stilar

Därefter lägger jag till stilar till omslagsblocket. Jag kommer nämligen att ställa in maxbredden till 600 pixlar (bara för att det ska vara bekvämt att ta en skärmdump så att menyn passar), och jag kommer också att centrera blocket.

slå in(
bakgrund: #fff;
maxbredd: 600px
marginal: 0 auto;
}

Steg 3 - implementera gummiighet

Nu tar vi upp själva menyn. Jag kommer att ta bort markörerna från den (från ul-taggen), göra bakgrundsgradienten linjär , och, viktigast av allt, med displayen: table-row-egenskapen kommer jag att få behållaren för menyn att bete sig som en tabellrad. Detta är viktigt för ytterligare manipulationer.

R-meny(
bakgrund: linjär-gradient (till höger, #b0d4e3 0%,#88bacf 100%);
display:tabell-rad;
list-stil: ingen;
}

Som du kan se löste ovanstående kod precis allt jag skrev om. Förresten, det är bekvämt att generera gradienter med verktyget Ultimate CSS Gradient generator. Jag kommer att skriva om det någon gång.

R-meny li(
vertikal-align: botten;
display:tabell-cell;
bredd: auto;
text-align: center;
höjd: 50px;
kant-höger: 1px fast #222;
}

• vertical-align: bottom - den här egenskapen är nödvändig för att om texten i menyalternativet tar 2 rader, kommer den att visas exakt. När vi gör menyn kan du ta bort den här egenskapen, zooma in så att objekten krymper och texten lindas över två rader och du kommer att se ett visningsproblem. Lämna tillbaka fastigheten och allt kommer att bli bra.
• display: table-cell - eftersom vi ställer in själva visningsmenyn till att vara en tabellrad, skulle det vara logiskt att ställa in dess objekt att visas som celler i en tabell. Det är nödvändigt.
• bredd: auto - bredden beräknas automatiskt, beroende på längden på texten i stycket
• text-align: center är bara för att justera texten inuti i mitten
• höjd: 50px - ställ in höjden till 50 pixlar
• Tja, border-right är bara en kant till höger, en sådan avgränsare för objekt

Även om menyn ser ful ut, men det är okej, är det dags att tänka på den.

Det sista du kan göra är att utforma länkarna inuti styckena. Här har jag denna kod:

R-meny li a(
text-dekoration: ingen;
bredd: 1000px
höjd: 50px;
vertikal-align: mitten;
display:tabell-cell;
färg: #fff;
teckensnitt: normal 14px Verdana;
}

Och så här ser menyn ut nu:

Återigen ska jag förklara några rader:

• egenskapen text-decoration tar bort standardunderstrykningen från länkar
• bredd: 1000px är kanske den viktigaste linjen. Du måste ställa in länkarna till ungefär samma bredd, kanske mindre, men alltid mer än det bredaste menyalternativet. Länkarna kommer inte att vara 1000 pixlar breda, eftersom bredden kommer att begränsas av menyalternativet li, som har en bredd inställd på auto, men det kommer att göra det så att det alltid kommer att vara ett valfritt antal objekt i menyn 100 procent bred.
• vertical-align: middle och display: table-cell - den första kommer att rikta in texten vertikalt mot mitten, och den andra kommer också att visa länkar som celler. Båda fastigheterna krävs.
• typsnitt - ja, det är bara en uppsättning inställningar för typsnittet. Läs om css-egenskaper för teckensnitt i den här artikeln.

Steg 4 (valfritt) kan du lägga till interaktivitet

Till exempel för att ändra färgen på ett menyobjekt när du håller muspekaren. Detta implementeras ganska enkelt, med hjälp av hover-pseudoklassen:

R-meny li:hover(
bakgrundsfärg: #6bba70;
}

Testar menyn för gummiaktighet

Jättebra, menyerna är klara, men vi har inte kollat ​​det viktigaste - hur gummiaktigt det är, som jag lovade er. Nåväl, jag lägger till ytterligare två objekt till menyn:

Menyn förblir 600 pixlar bred. Resten av föremålen krymper bara lite för att passa 2 nya.

Jag lägger till ett långt stycke till:

Som ni ser krympte menyn lite mer och den långa posten visades helt normalt. Och om det inte var för egenskapen vertikal-align: bottom som jag berättade om, skulle menyn se sämre ut.

Jag kommer att minska menyn till tre poster.

Föremålen har blivit mycket friare, men själva menyn har inte förändrats i bredd. Så vi gjorde en 100% gummimeny!

Hur anpassar man det?

I princip, om du ställer in omslagsblocket inte till en fast, utan till en maximal bredd, så behöver den inte ens anpassas. I mitt fall har jag egenskapen max-width: 600px, och när bredden blir mindre än 600px kommer blocket helt enkelt att minska efter skärmen, utan att bilda en horisontell rullning.

Tja, om du på något sätt vill ändra eller korrigera menyn på Mobil enheter eller breda skärmar, då hjälper mediafrågor dig! Lycka till med att bygga webbsidor!

Vi fortsätter serien med en lektion om rullgardinsmenyer. Näst på tur är en gör-det-själv horisontell rullgardinsmeny i css.

Om du kom hit av misstag eller om du letade efter en annan implementering av rullgardinsmenyn, råder jag dig att gå till föräldrasektionen.

Det här avsnittet kommer att beskriva den horisontella rullgardinsmenyn i CSS och HTML.

Sidnavigering:

Så, vår uppgift:

gör horisontell css-rullgardinsmeny (på ul li-listor) utan använder jQuery och Javascript, samt utan användning av tabeller

i kod.

html horisontell rullgardinsmeny

Först av allt, innan vi börjar skriva kod, måste vi göra html mall för menyn.

På grund av det faktum att vi gör en universell meny vill jag göra den så lik utdata från WordPress-menyn som möjligt. Enligt min mening är detta en av de enklaste och mest mångsidiga HTML-menykoderna. Det ser ut så här:

Som du kan se från koden kommer vår rullgardinsmeny att implementeras på ul- och li-listor. Så här ser menyn ut utan CSS-styling:

Låt oss bara säga att det ser fult ut, som en vanlig lista. Därefter måste vi dekorera den här menyn med CSS-stilar.

CSS horisontell rullgardinsmeny

CSS-stilar för rullgardinsmenyer och mer är ett måste. När allt kommer omkring är rullgardinsmenyn gjord på basis av:hover-pseudoklassen.

För den horisontella rullgardinsmenyn behöver vi följande stilar:

#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::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- familj:Arial, sans-serif; färg:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:versaler; height:36px; box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( bakgrund:#EBBD5B; färg:#2B45E0; )

Detta är inte slutet än, bara en del av CSS för den horisontella huvudmenyn. Därefter kommer vi att skriva stilarna för rullgardinsmenyn:

#menu1 ul li ul( position:absolut; topp:36px; vänster:0px; display:ingen; bredd:200px; bakgrund:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*denna linje implementerar bortfallsmekanism*/ #menu1 ul li ul li( float:ingen; bredd:100%; ) #menu1 ul li ul li a( display:block; text-transform:ingen; höjd:auto; utfyllnad:7px 25px; bredd: 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( bakgrund:#FDDC96; färg:#6572BC; )

Nu är det allt. Själva rullgardinsmekanismen är implementerad på en rad.

Se huden med denna meny:

Ris. 2 (horisontell rullgardinsmeny)

Nedan finns en demo av hur rullgardinsmenyn fungerar, samt en länk för att ladda ner källkoden. (Demon öppnas i en rullgardinsmeny över denna sida, du behöver inte klicka på öppna i nytt fönster 🙂 eller använda mushjulet)

Horisontell rullgardinsmeny i full bredd

De flesta av er kan förebrå mig och säga att sådana menyer, som jag visade ovan, är hälsningar från det förflutna och delvis har du rätt, även om jag har mött fräscha layouter med sådana menyer.

Jag hoppas att du laddade ner exemplet ovan. Html förblir detsamma hos oss, men vi kommer att ändra CSS helt. Du kan helt enkelt ta CSS-koden härifrån och klistra in den i det nedladdade exemplet, eller se hur det fungerar i demoläge.

#conteiner( 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:versaler; height:36px; box-sizing :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( bakgrund:#EBBD5B; färg:#2B45E0; ) #menu1 ul li ul( position:absolut; topp:36px; vänster :0px; display:ingen; width:auto; bakgrund:#EBBD5B; white-space:nowrap; ) #menu1 ul li:last-child ul(/*det sista objektet kommer att förankras till höger*/ left:auto; höger:0px; ) #menu1 ul li:hover ul(display:block;)/*denna rad implementerar mekanismen bortfall*/ #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:hover (bakgrund: #FDDC96; färg:#6572BC;)

Det här exemplet skiljer sig också från det första genom att rullgardinsmenyn, själva rullgardinsmenyn, sträcker sig beroende på bredden på alla menyalternativ.

För mycket långa menyalternativ kanske det här alternativet inte är särskilt bekvämt, eftersom de kommer att klättra utanför gränserna. För att inaktivera den här egenskapen, sök bara efter egenskapen "white-space: nowrap;" väljaren #menu1 ul li ul och ta bort den.

Nedan kan du se en demo eller ladda ner källan till den horisontella rullgardinsmenyn:

Utan separatorer ser den här menyn sådär ut. Separatorer kan läggas till html manuellt, men om du har ett CMS, som WordPress, är det inte särskilt bekvämt att lägga till det manuellt.

Horisontell rullgardinsmeny med separatorer

Det finns dussintals alternativ för ren CSS lägg till en remsa (separator) mellan menyalternativ. Alternativ som använder::före eller::efter , eller mycket enklare kant-vänster, kant-höger, kommer jag inte att duplicera.

Det finns situationer när layouten är byggd så underbart att jquery är oumbärlig.

Vår HTML-kod förblir densamma, vi inkluderar bara jQuery-biblioteket och filen som använder det i början:

Direkt efter.

Som du förstår måste du skapa en fil script-menu-3.js och lägg in den här lilla koden där:

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

CSS-stilar för en sådan meny bör lämnas som de är, + kasta den här biten i slutet:

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

En sådan horisontell rullgardinsmeny med separatorer i jQuery kommer att se ut så här:

Du kan se demon eller ladda ner den horisontella menymallen nedan:

Fördelarna med en sådan lösning är:

• menyn kommer att dras dynamiskt;
• indragen från avgränsaren till stycket är desamma överallt;
• vackrare och mer flexibel design.

CSS+HTML Horisontellt lager rullgardinsmeny

Eftersom vi pratar om rullgardinsmenyer på flera nivåer vid hovring, är det förmodligen värt att dela upp dem i undergrupper:

1. med vipadashka när du pekar åt sidan
2. med ett popup-utfall på tredje nivå

I mina exempel kommer jag att visa en CSS-meny på flera nivåer för 3 nivåer, då tror jag att det inte blir svårt att gissa vad som behöver göras.

Flernivå rullgardinsmeny med vipad vid sidan av svävaren

Till att börja med måste vi korrigera vår html något. Ett par rader för nivå 3 kommer att läggas till där:

#conteiner( 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:versaler; height:36px; box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a (bakgrund: #EBBD5B; färg:#2B45E0; ) #menu1 ul li ul( position:absolut; topp:36px; vänster:0px; display:ingen; width:auto; bakgrund:#EBBD5B; blanksteg:nowrap; ) #menu1 > ul > li:sista-barn > ul(/*sista objektet kommer att förankras till höger*/ left:auto; höger:0px; ) #menu1 ul li:hover > ul(display:block;)/*denna rad implementerar bortfallsmekanismen*/ #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( bakgrund:#FDDC96; färg:#6572BC; ) #menu1 ul li ul li ul( top:0px; vänster:100%; display:ingen; bakgrund:#fddc96; ) #menu1 > ul > li:last -barn > ul ul(vänster:auto; höger:100%;) #menu1 ul li ul li ul a(färg:#F38A01;)

Filer för jQuery kopieras som de var från föregående exempel. Jag bestämde mig för att lämna separatorerna, så att menyn såg åtminstone lite bättre ut. Det är såklart möjligt utan dem.

Så här gick det till:
Jag gjorde 2 skinn i ett för att visa hur utfallet ser ut till höger och i mitten.

Nedan kan du se en demo och ladda ner ett exempel:

Rullgardinsmeny i lager med popup-rullgardinsmeny när du håller muspekaren

Lite olja visade sig i titeln, men det kommer att fungera, huvudsaken är koden.

Kärnan i detta exempel är att skapa en horisontell rullgardinsmeny i full bredd med en rullgardinsmeny i full bredd + flera nivåer.

Jag kommer inte att ändra HTML-koden, den kan hämtas från föregående exempel. Separatorer på jQuery finns också kvar.

Endast CSS kommer att förändras helt:

#conteiner( 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:statisk;) #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.3em; text-decoration:none; font-weight:bold; text-transform:versaler; height:36px; box-sizing:border-box; ) #menu1 ul li > a: sväva, #menu1 ul li:hover > a( bakgrund:#EBBD5B; färg:#2B45E0; ) #menu1 ul li ul( position:absolut; topp:36px; vänster:0px; display:ingen; bredd:100%; bakgrund:#EBBD5B; ) #menu1 > ul > li > ul::efter( rensa:båda; float:none; width:100%; height:0px; content:" "; ) #menu1 ul li:hover > ul(display:block;)/*denna rad implementerar bortfallsmekanismen*/ #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-storlek: 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( bakgrund:#FDDC96 ; färg:#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( färg:#F38A01; border-top:1px solid #ffffff; )

Så här kommer menyn att se ut: Den enda poängen är att sajten ska ha tillräckligt med utrymme, eftersom det sista objektet till höger inte har något utrymme för att hoppa av. Det här problemet kan lösas genom: n:te-barn men jag brydde mig inte om att inhägna trädgården.

Se demo av den horisontella rullgardinsmenyn på flera nivåer:

Som du kanske har märkt: bottenplattan är också full bredd. Så görs utfall i flera block.

Det var allt för mig, jag hoppas att åtminstone ett av mina exempel passar dig. Tack för din uppmärksamhet.

det kommer att gynna både dem och mig 🙂 .

Om du läste inlägget i sin helhet, men inte hittade hur du gör din egen horisontella rullgardinsmeny i css, ställ en fråga i kommentarerna eller använd sökningen på sajten.

Jag råder dig också att besöka föräldrasidan https://webbplats/vypadayushhee-menu/, det finns samlade alla exempel och varianter av rullgardinsmenyer.