Vad är ett datorprogram?

Grundläggande operativsystemobjekt och att arbeta med dem

Datordiagnostikprogram Datorfelsökningsprogram

Läs mer

Hur öppnar man en .DCM-fil? Hur öppnar man en disk med MR- eller CT-bilder? Möjliga problem med filer i DCM-format

Läs mer

Vad du ska göra om Kaspersky antivirus inte uppdaterar Kaspersky antivirus uppdaterar inte lösningen på problemet

Läs mer

Hur duplicerar man ett lager i Photoshop?

Läs mer

Hur gör man en gummiresponsiv meny med CSS? Gör-det-själv horisontell rullgardinsmeny med CSS och HTML. Expandera menyn till full bredd.

God eftermiddag

Det är ofta nödvändigt att göra en horisontell meny som kommer att sträcka sig över hela bredden av det överordnade blocket, oavsett hur många objekt det 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 är utsträckt till full bredd och sticker ut när den svävar över 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 tabell har en menypost div-behållare. Beroende på om det första, sista eller mellanliggande menyalternativet är en div, tilldelas motsvarande klass.

Varje div-behållare har 2 sidokanter med absolut positionering, vilka är nödvändiga 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.

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

I varje föremål har vi en bild och text. För att säkerställa att allt detta är strikt justerat i mitten vertikalt använder vi en tabell. Tack vare egenskapen för vertikal justering kommer våra menyalternativ alltid att visas smidigt och kommer inte att flyttas bort.

CSS REGLER

Låt oss först 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, låt oss 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 den första punkten ingen vänsterkant. Vi fixar det lite senare.

Låt oss nu lägga till hovringseffekter för 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; ) /* kommer att räkna ut gränser vid hovring */ .first_point_menu (kant: 1px solid #dadbda ; ) .first_point_menu:hover, .first_point_menu.active (kant: 1px fast #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu (kant: 1px fast #dadbda; border-left; gräns_vänster): :hover (kant: 1px fast #9FCB56; kant-vänster: 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 markerade menyalternativen. Låt oss fixa detta!

/* 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; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond (visa: blockera fallen;*) det första och sista objektet */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )

Det är allt!

Vi gjorde det stor meny sträckt över hela föräldrablockets bredd! Objekten överlappar inte varandra när du för musen och layouten hoppar inte.

En horisontell meny är en lista över webbplatssektioner, så det är mer logiskt att placera den inuti elementet

Som standard är alla listelement arrangerade vertikalt och upptar hela bredden av containerelementet, som i sin tur upptar hela bredden av dess containerblock.

HTML-uppmärkning för horisontell navigering

Menyalternativ
Menyalternativ
Menyalternativ

En horisontell meny placerad inuti en tagg kan dessutom placeras inuti ... och/eller ...-elementet. Tack vare denna html-markering ges semantisk betydelse och visas också ytterligare möjlighet för att formatera menyblocket.

Det finns flera sätt att placera dem horisontellt. Först måste du återställa standard webbläsarstilar för navigeringselement:

Ul ( list-stil: ingen; /*ta bort listmarkörer*/ marginal: 0; /*ta bort den övre och nedre marginalen lika med 1em*/ padding-left: 0; /*ta bort den vänstra utfyllnaden lika med 40px*/ ) a (textdekoration: ingen; /*ta bort understrykning av länktext*/)

Gör listelement med små bokstäver. Som ett resultat placeras de horisontellt, med ett mellanrum på 0,4 em lagt till på höger sida mellan dem (beräknat i förhållande till teckenstorleken). För att ta bort det, lägg till en negativ högermarginal för li li (marginal-höger: -4px;) . Därefter stylar vi länkarna som vi vill.

Att göra listelement flytande. Som ett resultat är de placerade horisontellt. Höjden på behållarblocket ul blir noll. För att lösa detta problem lägger vi till (overflow: hidden;) till ul, förlänger det och låter det på så sätt innehålla flytande element. För länkar, lägg till ett (visa: block;) och stil dem som du vill.

Att göra listelement inline-block. De är placerade horisontellt, ett gap bildas på höger sida, som i det första fallet. För länkar, lägg till ett (visa: block;) och stil dem som du vill.

Göra ul-listan till en flexibel behållare med hjälp av . Som ett resultat är listelementen ordnade horisontellt. Vi lägger till ett (visa: block;) för länkarna och stilar dem efter önskemål.

En ganska vanlig layout av en webbplatsmeny, 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 kommer vi att berätta hur detta går till.

Vi erbjuder dig ett exempel på implementering av en gummimeny med hjälp av CSS 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 bifogas i en vanlig lista. Huvuddraget i en sådan meny är dess mångsidighet, vilket uttrycks i det faktum att både antalet och längden på objekten kan vara vilken som helst.

Varje programmerare kan erbjuda sitt eget sätt att lösa ett givet problem. 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. Jag skyndar mig att göra dem besvikna som föreslår att du använder egenskapen display med värdetabellen eller tabellcellen. Denna metod är inte tillräckligt kompatibel med flera webbläsare.

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

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

När du använder vår lösning måste två obligatoriska regler följas. Den första är att bredden på menyobjektbehållaren ska 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 punkt eller inte.

Nedan finns kod som fungerar som ett exempel på att skapa en gummimeny:

HTML

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

ul ( text-align: justify; overflow: hidden; /* eliminerar biverkningarna av metoden */ height: 20px; /* eliminerar även onödiga */ cursor: default ; /* ställer in markörens initiala form */ margin : 50px 100px 0 100px; bakgrund: #eee; padding: 5px; ) li ( display: inline; /* gör menyalternativ till text */ ) li a ( display: inline- block; /* eliminerar ordbrytningar i menyn */ color: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* bildar den andra raden för att räkna ut metoden */ content: "1" ; marginal- vänster: 100 %; höjd: 1px; overflow: dold; 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 angett de nödvändiga egenskapsvärdena och koden får vi denna gummimeny:

Volymkod
Oförmåga att bestämma det aktiva tillståndet för ett element genom en klassväljare. Detta inträffar på grund av att ord i stycken går sönder (om det finns något). Lösningen på detta problem är att lägga till ytterligare en behållare i listelementen.
För rullgardinsmenyn måste du anpassa koden på grund av den negativa effekten av spill .


6.0+	6.0+	10.5+	5.0+	3.6+	-	-

Vi fortsätter serien med en lektion om rullgardinsmenyer. Nästa upp är en gör-det-själv horisontell rullgardinsmeny med 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 en horisontell rullgardinsmeny i CSS och HTML.

Sidnavigering:

Så, vår uppgift:

gör en horisontell meny med en rullgardinslista css (på ul li listor) utan att använda jQuery och Javascript, och även utan att använda tabeller

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

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

Hem
Om oss
Våra tjänster
- Vår tjänst nr 1
- Vår tjänst nr 2
- Vår tjänst nr 3
- Vår tjänst nr 4
- Service 5
Nyheter
Kontakter

Som du kan se av koden kommer vår rullgardinsmeny att implementeras på ul- och li-listorna. Så här ser menyn ut utan CSS-stilar:

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

CSS-stilar för rullgardinsmenyer och mer är lika nödvändiga som luft. När allt kommer omkring är rullgardinsfliken gjord baserad på pseudo-class:hover.

För en horisontell rullgardinsmeny 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 stilar 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 drop-out-mekanism*/ #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;)

Det är det nu. Själva bortfallsmekanismen ä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ällorna. (Demon kommer att öppnas med en rullgardinsmeny överst på denna sida, du behöver inte klicka på öppna i ett nytt fönster 🙂 eller mushjulet)

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

Jag hoppas att du laddade ner exemplet ovan. Vår Html förblir densamma, 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 i demoläge hur det fungerar.

#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: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:none; width:auto; bakgrund:#EBBD5B; white-space:nowrap; ) #menu1 ul li:last-child ul(/*det sista objektet kommer att fästas på den högra kanten*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this line 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;)

Detta exempel 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 överskrida gränserna. För att inaktivera den här egenskapen, hitta bara egenskapen "white-space:nowrap;" vid väljaren #menu1 ul li ul, och ta bort den.

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

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

Det finns flera dussin alternativ för att lägga till en rand (separator) mellan menyalternativ med ren CSS. Jag kommer inte att duplicera alternativen som använder::före eller::efter , eller mycket enklare border-left, border-right.

Det finns situationer när layouten är byggd så underbart att du inte kan klara dig utan jquery.

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 till den här lilla koden där:

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

CSS-stilarna för en sådan meny bör lämnas som de är, + lägg till denna bit till slutet:

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

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

Du kan visa i demoläge eller ladda ner den horisontella menymallen nedan:

Fördelarna med denna lösning är:

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

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

med en vip-dyna när du pekar åt sidan
med en popup-rullgardinsmeny på den tredje nivån

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

Först måste vi korrigera vår HTML något. Ett par rader kommer att läggas till där för nivå 3:

Hem
Om oss
Våra tjänster
- Vår tjänst nr 1
  - Tillägg till tjänst 1
  - Tillägg till tjänst 2
- Vår tjänst nr 2
  - Tillägg till tjänst 3
  - Tillägg till tjänsten 4
- Vår tjänst nr 3
- Vår tjänst nr 4
- Service 5
Nyheter
Kontakter
- Vägkarta
  - Karttillägg
  - Tillägg för karta 2
- Återkopplingsformulär

#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: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; bredd:auto; bakgrund:#EBBD5B; blanksteg:nowrap; ) #menu1 > ul > li:sista-barn > ul(/*det sista objektet kommer att fästas på den högra kanten*/ left:auto; right: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 -storlek: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:sista-barn > ul ul(vänster:auto; höger:100%;) #menu1 ul li ul li ul a(färg:#F38A01;)

Vi kopierar filerna för jQuery som de var från föregående exempel. Jag bestämde mig för att lämna avdelaren så att menyn skulle se åtminstone lite bättre ut. Självklart kan du göra det utan dem.

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

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

Det är lite olja 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. Vi lämnar även separatorer i jQuery.

Endast CSS kommer att förändras helt:

#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: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:hover, #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;)/*den här raden 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 måste ha tillräckligt med utrymme, eftersom det sista objektet till höger inte har plats för en rullgardinsmeny. Det här problemet kan lösas med:nth-child, men jag brydde mig inte.

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

Som du kanske har märkt: bottenmatrisen är också full bredd. Så görs droppar 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.

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

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

Publikationer om ämnet

Profilering och felsökning av PHP-applikationer med xhprof & FirePHP

Ibland kan ViewProfile.swf och övriga SWF-systemfel relateras till problem i Windows-registret. Flera program kan...
Preferensprenumerant för VGP-tjänst i MTS Inaktiverar prenumerationer genom att skicka SMS

På Rysslands territorium i MTS-nätverket tillhandahålls kommunikationstjänster till abonnenter i sin helhet om kontosaldot är positivt. Respektive,...