Simpel horisontal menu på tværs af browser. Sådan laver du en horisontal skrå menu
I denne tutorial vil vi oprette vandret menu i CSS. Selvfølgelig kan du allerede bruge færdige løsninger, for eksempel leje programmører til CMS Made Simple. Men du leder ikke efter nemme måder, vel? :Bølle:
Trin 1 - HTML-markering
Først skal vi oprette listeelementer med et tag for hvert element i vores vandrette menu. For at oprette en undermenu skal du tilføje en anden underordnet liste i den overordnede.
Trin 2 - Opret CSS-stile til den vandrette menu
Til at begynde med ser menuen lodret ud, for at rette op på dette vil vi skrive nogle stilarter, redigere indrykning, kanter, baggrundsfarve og runde hjørnerne. Vi vil lave bredden og højden fast. Vi justerer menuelementerne til venstre ved at bruge float: left (så navigationen får en vandret struktur).
Menu, .menu ul, .menu li, .menu a ( margin: 0; polstring: 0; kant: ingen; disposition: ingen; ) .menu ( højde: 40px; bredde: 505px; baggrund: #4c4e5a; baggrund: - webkit-lineær-gradient(top, #5c5e6a 0%,#3c3d44 100%: -moz-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); 100%); radius: 4px; -moz-border-radius: 4px .menu li (position: relativ; listestil: ingen; float: venstre; display: blok ; højde: 40px;
Lad os skrive følgende stil et stykke tid og skjule rullelisten. Dette vil gøre redigeringen nemmere.
Trin 3 - Link Menu Style
Dernæst vil vi skrive stilarter, der tilføjer nogle grundlæggende CSS-egenskaber såsom skrifttype, farver, polstring osv. Derefter tilføjer vi en skygge for teksten og farveovergangene for at skabe en jævn effekt, hvor farven ikke ændres øjeblikkeligt, men med et eller andet interval. For at oprette en linkseparator, lad os tilføje en kant til venstre og højre og derefter fjerne venstre kant i det første link og højre kant i sidste link. Når du holder markøren over menuen, ændres kun farven.
Menu li a (display: blok; polstring: 0 14px; margin: 6px 0; linjehøjde: 28px; tekst-dekoration: ingen; kant-venstre: 1px fast #494942; kant-højre: 1px fast #4f5058; font- familie: Helvetica, sans-serif: font-size: 13px 1px rgba(0,0,0,.6: farve .3s ease-in-out; overgang: color .3s ease-in-out; -o-transition: color .3s ease-in-out; farve .3s ease-in-out venstre: ingen; ) .menu li:sidste-barn a( kant-højre: ingen; ) .menu li: hover > a ( farve: #9fde63; )
Trin 4 - rullemenu
Først og fremmest, lad os fjerne denne kodelinje, som vi tilføjede i andet trin.
Menu ul ( display: ingen; )
Nu vil vi redigere stilen for undermenuen. Lad os tilføje en undermenuplacering på 40px øverst og 0px til venstre for menupunktet og tilføje afrundede hjørner under. Lad os sætte opaciteten til nul og ændre den til 1 ved svævning for at skabe en fade-ind/ud-effekt. For op/ned-slide-effekten skal vi indstille listehøjden til 0px, når dropdown-menuen er skjult, og 36px, når vi holder musemarkøren over dropdown-menuen.
Menu ul (position: absolut; top: 40px; venstre: 0; opacitet: 0; baggrund: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border- radius: 0 4px 4px;-webkit-overgang: opacitet .3s lethed .1s; -moz-overgang: opacitet .1s; 1s; ) .menu li:hover > ul ( opacitet: 1; ) .menu ul li ( højde: 0; overløb: skjult; polstring: 0; -webkit-overgang: højde .3s lethed .1s; -moz-overgang: højde .3s lethed .1s; -o-overgang: højde .3s lethed .1s; .menu li:hover > ul li (højde: 36px; overløb: synlig;
Indstil bredden på den klikbare rullemenu til 100px. Efter hvert link tilføjede jeg en kant for at adskille dem. Vi fjerner grænsen i det sidste link.
Menu ul li a ( width: 100px; polstring: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #464649; ) .menu ul li:last-child a ( kant: ingen; )
For at fuldføre en vandret CSS-menu skal du tilføje et ikon for hver rullemenu. For at gøre dette vil vi oprette en brugerdefineret klasse for hver af undermenuerne og tilføje et baggrundsbillede.
Menu a.d ( baggrund: url(docs.png) no-repeat 6px center; ) .menu a.m ( background: url(bubble.png) no-repeat 6px center; ) .menu a.s (baggrund: url(arrow.png) no -gentag 6px i midten)
Konklusion
Vi har med succes skabt en horisontal rullemenu ved hjælp af CSS3-stile og uden at bruge den, selvom det også var muligt. Hvis du har spørgsmål, så lad mig det vide i kommentarerne.
(downloads: 395)
Opgave
Vis en punktopstilling vandret uden punkttegn.
Løsning
Bullet tag
- viser elementer som standard
- lodret over hinanden. For at oprette navigationselementer er det i nogle tilfælde praktisk at vise listen vandret. Der er flere måder at opnå denne listevisning på.
Du bør allerede vide, at HTML har blok- og inline-elementer. Inline-elementer opretter ikke deres egne blokke. Et eksempel på sådanne elementer er tags eller . Blokelementer vises med ny linje og opret en rektangulær blok, et eksempel på sådanne tags
ellerSå her er tagget
- er også et blokelement.
At tagge
- opførte sig ikke som blokelement, kan du bruge CSS til at lave små bogstaver.
Ansvarlig for hvordan elementet vil blive vist i dokumentet CSS ejendom Skærm. Lad os overveje tre af dens betydninger (selvom der er flere):
- blok - elementet vises som et blokelement.
- inline - elementet vises som inline.
- inline-block - block-line element, læs mere om denne type element nedenfor, vi vil bruge det.
Lad os først lave en vandret liste ved at omdanne dens punkttegn til inline-elementer. Lad os i CSS-stil skrive en regel, hvor li-vælgeren er indstillet til at vise egenskab med værdien inline .
Liste vandret Så denne stil fungerede, og vi fik et vandret arrangement af listeelementer:
Figur 1. Eksempel #1 på arbejde.
Denne metode har ulemper. Faktum er, at inline-elementer har nogle begrænsninger sammenlignet med blokelementer. For eksempel kan de ikke gives bredde og højde, men det kan blokere.
For eksempel skal det menuelement, vi laver, have en bredde på 150px og en højde på 40px. Lad os prøve at ændre stilen til følgende, det vil sige tilføje to regler, der angiver størrelsen på menupunktet:
Disse ændringer vil ikke føre til ændringer. For at menupunkter kan placeres vandret og for at kunne indstille deres bredde og højde, skal de indstille typen til inline-blok . Lad os ændre vores eksempelkode:
Liste vandret Denne kode virker, og ændringerne er synlige:
Figur 2. Eksempel nr. 2 i aktion. Men der kan være forskellige varianter, for eksempel skal vi vise indlejrede lister i menuen:
Indlejret liste. Her er resultatet af denne kode:
Figur 3. Eksempel nr. 3 på arbejde. Vi ser, at blokkene ikke er justeret i højden, som vi gerne vil. Selvfølgelig kan du angive den samme højde for alle blokke, men vi kender ikke altid dens nøjagtige værdi på forhånd, og den kan ændre sig.
Men hvorfor sker det egentlig?
Vores blokke har en display-egenskab med værdien inline-block . Det betyder, at de har kvaliteter fra både blokelementer (evnen til at angive bredde og højde) og inline elementer. Det, vi ser, er kvaliteten af de inline-elementer.
Lad os se på en streng med "A"-tegn i forskellige størrelser:
A A A A A A A
Vi ser, at alle bogstaver er lodret justeret langs den nederste linje. Mere præcist, langs grundlinjen, men lad os ikke komme ind i ukrudtet nu. Så det samme skete med vores blokke.
For at justere tekst lodret skal du bruge egenskaben vertikal-justering. I vores eksempel #3 skal vi bruge værdien top , som vil justere den øverste kant af elementet med toppen af selve elementet. højt element linjer.
Lad os nu anvende det på en streng med "A"-tegn i forskellige størrelser:
A A A A A A A
Bogstaverne ser ud til at "springe" lidt. Jeg indstillede CSS-kanten til det højeste bogstav for at vise, at der faktisk ikke er nogen hop, kun tom plads mellem den øverste kant (hvor justeringen sker) og toppen af "A'et".
Egenskaben vertikal-align skal anvendes på hvert inline-element, det nedarves ikke. Du kan læse mere om denne ejendom: vertikal-align .
Efter denne digression vil vi fortsætte med at placere listeelementerne vandret.
Anden vej
Du kan placere listeelementer vandret ved hjælp af float-egenskaben. Denne egenskab angiver, hvilken side elementet er justeret på, og har to positioner: venstre og højre .
Her er et eksempel med denne kode:
Liste vandret Her er resultatet af koden:
Figur 4. Eksempel på arbejde. Eksemplet ser ud til at virke. Men der er en advarsel ved at bruge denne ejendom. Nu vil vi se på det. Lad os for eksempel tage en kode, hvor der er to vandret liste Med på forskellige måder arrangement af elementer vandret: display og flyd:
Liste vandret Her er resultatet af koden:
Figur 5. Eksempel på arbejde. I disse eksempler er listen containere
- har en rød kant på 1 pixel tyk. Men topliste, som bruger egenskaben display, inkluderer listeelementer. Men elementerne i en liste, der er oprettet ved hjælp af float-egenskaben, falder ud af deres beholder.
- stadig er placeret uden for containeren
-
.
- vores liste vil indeholde ét link:
Vores næste opgave er at nulstille standardlistestilene. Vi skal fjerne den ydre og indre polstring fra selve listen og kuglerne fra listeelementerne. Så lad os indstille den nødvendige bredde:
#navbar ( margin: 0; polstring: 0; liste-stil-type: ingen; bredde: 100px; )
Nu er det tid til selv at style linkene. Vi vil tilføje dem baggrundsfarve, skift tekstparametrene: farve, skriftstørrelse og vægt, fjern understregningen, tilføj små indrykninger og redefiner displayet element fra inline til blok. Derudover er venstre og nederste rammer blevet tilføjet til listeelementerne.
Den vigtigste del af vores ændringer er omdefineringen af inline-elementer til at blokere elementer. Nu optager vores links al den tilgængelige plads på listepunkterne, det vil sige, for at følge linket behøver vi ikke længere at holde markøren nøjagtigt over teksten.
#navbar a (baggrundsfarve: #949494; farve: #fff; polstring: 5px; tekst-dekoration: ingen; font-weight: fed; kant-venstre: 5px solid #33ADFF; display: blok; ) #navbar li ( kant-venstre: 10px fast #666;
Vi har kombineret al den ovenfor beskrevne kode til et eksempel, nu kan du ved at klikke på prøv-knappen gå til eksempelsiden og se resultatet:
Dokumentets navn Prøve "Når du holder musen over et menupunkt, vil det udseende kan ændre sig for at tiltrække brugerens opmærksomhed. Du kan oprette en sådan effekt ved at bruge pseudo-class:hoveren.
Lad os vende tilbage til det lodrette menueksempel, der blev diskuteret tidligere, og tilføje følgende regel til typografiarket:
#navbar a:hover (baggrundsfarve: #666; border-venstre: 5px solid #3333FF; ) Prøv »
Vandret menu
I det foregående eksempel så vi på den lodrette navigationslinje, som oftest findes på websteder til venstre eller højre for hovedindholdsområdet. Men menuer med navigationslinks er også ofte placeret vandret øverst på websiden.
En vandret menu kan oprettes ved styling almindelig liste. Vis egenskab for elementer
- du skal tildele værdien inline, så listeelementerne er placeret efter hinanden.
For at placere menupunkter vandret skal du først oprette punktliste med links:
Lad os skrive et par regler for vores liste, der nulstiller standardstilen, der bruges til lister, og omdefinere listeelementerne fra blok til inline:
#navbar ( margin: 0; polstring: 0; liste-stil-type: ingen; ) #navbar li ( display: inline; ) Prøv »
Nu skal vi bare bestemme styling til vores horisontale menu:
#navbar ( margin: 0; polstring: 0; liste-stil-type: ingen; kant: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; ) #navbar a ( farve: #fff; polstring: 5px 10px; tekst-dekoration: ingen; font-weight: fed; display: inline-block; width: 100px; ) #navbar a:hover ( kant-radius: 20px 5px ; baggrundsfarve: #0066FF ) Prøv »
Drop down menu
Den menu, vi vil oprette, vil have de vigtigste navigationslinks placeret i vandret panel navigation og underpunkter, der kun vil blive vist, når du holder musen over det menupunkt, som disse underpunkter vedrører.
Først skal vi oprette HTML-strukturen i vores menu. Vi vil placere de vigtigste navigationslinks i en punktopstilling:
Vi placerer underelementerne i en separat liste, og indlejrer dem i elementet
- , som indeholder det overordnede link vedrørende underpunkterne. Nu har vi en klar struktur for vores fremtidige navigationslinje:
Prøve "Lad os nu komme i gang skrive CSS kode. Først skal du skjule listen med underpunkter ved hjælp af displayet: ingen, så de ikke vises på websiden hele tiden. For at vise underelementer har vi brug for det, når vi holder markøren over et element
- listen er blevet konverteret til et blokelement igen:
#navbar ul ( display: ingen; ) #navbar li:hover ul ( display: blok; )
Vi fjerner standardindrykninger og markører fra begge lister. Vi laver listeelementer med navigationslinks flydende og danner en vandret menu, men for listeelementer, der indeholder underelementer, sætter vi flydende: ingen; så de kommer til syne under hinanden.
#navbar, #navbar ul ( margin: 0; polstring: 0; liste-stil-type: ingen; ) #navbar li ( float: venstre; ) #navbar ul li ( float: ingen; )
Dernæst skal vi sikre os, at vores dropdown-undermenu ikke presser indholdet under navigationslinjen ned. For at gøre dette, vil vi indstille listeelementernes position: relativ; , og en liste med underpunkter position: absolut; og tilføj en topegenskab med en værdi på 100 %, så den absolut placerede undermenu vises præcis under linket.
#navbar ul ( display: ingen; position: absolut; top: 100%; ) #navbar li ( flydende: venstre; position: relativ; ) #navbar ( højde: 30px; ) Prøv »
Højden for den overordnede liste blev tilføjet med vilje, da browsere ikke betragter flydende indhold som elementindhold, uden at tilføje højde vil vores liste blive ignoreret af browseren, og indholdet efter listen vil omslutte vores menu.
Nu mangler vi bare at style begge vores lister, og rullemenuen vil være klar:
#navbar ul ( display: ingen; baggrundsfarve: #f90; position: absolut; top: 100%; ) #navbar li:hover ul ( display: blok; ) #navbar, #navbar ul ( margin: 0; polstring: 0; liste-stil-type: ingen; højde: 100%; ) #navbar li a (display: blok; polstring: 6px; width: 100px; farve: #fff; tekst-dekoration: ingen; tekst-align: center; ) #navbar ul li (float: ingen; ) #navbar li:hover (baggrundsfarve: #f90; ) #navbar ul li:hover (baggrundsfarve: #666; )
Hej kære besøgende på min blog! I dag vi taler om den vandrette hovedmenu på webstedet, nemlig hvordan man justerer den vandrette menu i midten. Ja, ved første øjekast, hvad er så kompliceret ved det - jeg satte de nødvendige indrykninger, justerede dem, og det er det. Men der er nogle nuancer her. Et websted er først og fremmest dynamisk, dvs. vises konstant på siden nyt indhold, der kommer nogle nye blokke med informationer mv. Sådan kan nogle elementer vises/forsvinde i hovedmenuen. Når vi tager alt dette i betragtning, skal vi sikre, at når vi tilføjer eller fjerner et menupunkt, forbliver menuen i midten. Det er selvfølgelig ikke altid nødvendigt at centrere det, det hele afhænger af designet. Men hvis du stadig har til hensigt at placere den vandrette menu i midten, så kan vi ved at bruge et par enkle tricks i CSS opnå det ønskede resultat.
Artikel struktur
Vandret menu i midten uden rullemenuer
Lad os først se på eksemplet med en vandret menu, der ikke har rullemenupunkter.
HTML-kode
Css kode
*, *::after, *::before ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- størrelse: border-box; box-sizing: border-box: 0 ) #mainmenu (baggrund: #444; position: relativ; overløb: skjult; højde: 40px; margin: 30px 0 ) ul ( liste-stil: ingen;. 50% float: venstre margin: 0 10px højde: 40px ) #hovedmenu ul li a:hover (baggrundsfarve: #666;)Lad os se på alt i rækkefølge, alt er enkelt her. Vi opretter en "hovedmenu" beholder, hvor vi placerer vores menu i form af en uordnet liste.
Nu er det et spørgsmål om css stilarter. Først nulstiller vi alle margener og polstring til nul for alle browsere. Dernæst, ved at bruge egenskaben "float:left", flytter vi vores uordnede liste til venstre og derefter, ved hjælp af relativ positionering, flytter vi den 50% til højre. Bredden af "ul"-listen vil være lig med summen af længderne af alle "li"-elementer, der er inde i den. Således, hvis vi mentalt deler browservinduet i to, vil vores menu flytte til højre for skillelinjen. For at justere vil vi også anvende relativ positionering på "li"-elementerne og flytte dem til venstre med 50%, idet vi angiver egenskaben "venstre:-50%". Og også, jeg glemte næsten, at vores "hovedmenu"-beholder skal angive ejendommen "overløb:skjult", ellers får vi vandret stribe rulle.
Det er det, nu er vores menu justeret til midten. Nu kan du tilføje eller trække punkter fra, dette vil ikke påvirke placeringen. Du kan også bruge denne menu på dine hjemmesider ved blot at ændre stilene, så de passer til dit design.
Vandret menu i midten med rullemenupunkter
Lad os nu se på rullemenuens underpunkter. Her er situationen noget anderledes og noget mere kompliceret, pga i det første tilfælde vil vores underpunkter ikke vises, fordi vi har specificeret egenskaben "overflow: hidden" til "hovedmenu"-blokken. Det betyder, at elementer uden for denne blok ikke vil blive vist. Men der er en vej ud.
Så jeg ændrede den tidligere kode og fjernede egenskaben "overflow:hidden" fra den.
HTML-kode
CSS kode
*, *::after, *::before ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- størrelse: border-box; box-sizing: border-box: 0 ) #hovedmenu (position: relativ; baggrund: #444444; højde: 40px; polstring: venstre; bredde: 100%; indeks: 10 ) #mainmenu ul (slet: venstre; position: relativ; højre: 50%; højde: 40px; float: højre; tekstjustering: center; skrifttype: 15px Arial, Helvetica, sans-serif; listestil: ingen; margin: 0 ) /** Hovedpunkter **/ #mainmenu > ul > li (position: relativ; venstre: 50%; float: venstre; højde: 40px; polstring: 0; margin: 0 ) #hovedmenu > ul > li > a ( kant-venstre: 1px fast #666; display: blok; farve: #fff; tekst-dekoration: ingen; polstring: 0 20px; linjehøjde: 40px; ) #mainmenu > ul > li:first- barn > a ( kant: ingen ) #hovedmenu > ul > li:hover > a, #hovedmenu > ul > li.hover > a, #hovedmenu > ul > li aktiv > a (farve: #fff ) #hovedmenu > ul > li:hover, #hovedmenu > ul > li.hover, #hovedmenu > ul > li.aktiv ( baggrund: #666 ) /* Drop-down underpunkter */ #hovedmenu ul li ul (position: absolut; venstre: 0; top: 40px; display: ingen; liste-stil: ingen; synlighed: skjult; polstring: 0; margin: 0; width: 200px ) #mainmenu > ul > li ul li (baggrundsfarve: #666; position: relativ; venstre: 0; display: list-item; float: ingen; højde: auto; margin: 0; text-align: venstre; ) #hovedmenu ul li ul li a (kant-bund: 1px solid #999; display: blok; farve: #fff; polstring: 10px 15px; tekst-dekoration: ingen; ) #mainmenu ul li ul li.parent a ( position: relativ; ) #mainmenu ul li ul > li.parent > a::before ( border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolut; ) /* Rullemenupunkter på andet niveau */ #hovedmenu ul li:hover > ul ( opacitet: 1; synlighed : synlig; margin: 0; ) #hovedmenu ul li ul li ul ( øverst: 0; venstre: 200px; margin: 0 0 0 20px bredde: 180px )Nu er vores menu placeret i midten og underpunkter vises, når du holder musemarkøren over den.
Centreringsmenuer med flexbox
Juster menuen til midten Du kan også anvende en ny regel i css - flexbox. Generelt vil jeg dedikere et separat indlæg til tricks med flexbox, det er det værd, det forenkler i høj grad livet for en layoutdesigner. Generelt vil vi ikke gå dybere her... Jeg vil kun give her css kode for en menu med rullemenupunkter. HTML-koden er den samme som ovenfor.
CSS kode
*, *::after, *::before ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- størrelse: border-box; box-sizing: border-box: 0; -indeks: 10 ) #mainmenu ul (display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horisontal; -webkit- box-direction: normal; center; ** Hovedpunkter **/ #hovedmenu > ul > li (position: relativ; højde: 40px; polstring: 0; margin: 0 ) #hovedmenu > ul > li > a (kant-venstre: 1px fast #666; display: blok farve: #fff tekst-dekoration: ingen; polstring: 0 20px; linjehøjde: 40px; ) #hovedmenu > ul > li:første-barn > a ( grænse: ingen ) #hovedmenu > ul > li:hover > a, #hovedmenu > ul > li.hover > a, #hovedmenu > ul > li.aktiv > a ( farve: #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active (baggrund: #666 ) /* Drop-down underpunkter */ #mainmenu ul li ul ( position: absolut venstre: 0; display: ingen; synlighed: margin: 0; : #666; position: venstre: 0; float: ingen; tekstjustering: venstre; solid #999; farve: #fff; polstring: 10px 15px; tekst-dekoration: ingen a::før (kant-top: 1px solid #fff; border-right: 1px solid #fff; indhold: ""; display: blok; position: absolut; 15px; ; top: 50% transform: translateY(- 50%) rotere(45deg); højde: 6px; bredde: 6px; ) #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover ( baggrundsfarve: #444 ) #mainmenu ul li:hover ul, #mainmenu ul li.hover ul ( display: blok ) /* Drop- ned elementer andet niveau */ #hovedmenu ul li:hover > ul ( opacitet: 1; synlighed: synlig; margin: 0; ) #hovedmenu ul li ul li ul ( øverst: 0; venstre: 200px; margin: 0 0 0 20px ; bredde: 180px)Som du kan se, er reglerne kun ændret for forældrelisten - #hovedmenu ul. Det eneste var, at jeg skulle tilføje præfikser for tidligere versioner browsere. Jeg bemærker, at flexbox-reglen kun forstås korrekt af moderne browsere. Hvis du målretter mod ældre browsere, skal flex-muligheden udskydes. Du kan se, hvilke browsere der godt forstår flexbox
Figur 7. Eksempel på arbejde. Derudover ved vi i arbejde ikke altid, hvilket element der vil følge elementet ved hjælp af float. Den ideelle mulighed ville være at lukke driften af float-ejendommen i den samme blok, hvor den er åben.
Dette gøres ved hjælp af et pseudo-element. Her er koden:
Liste vandret Nu har vi 100% fungerende kode.
Figur 8. Eksempel på arbejde. Denne teknik med float-egenskaben bruges normalt, når du designer websteder for at justere kolonner, der er oprettet af tags
. På denne måde får vi en normal konstruktion af søjler med den nødvendige højdejustering. Når vi opretter en menu, er højden på blokkene i de fleste tilfælde ikke vigtig for os, den er næsten altid den samme. Derfor er det ganske berettiget at bruge reglen (display: inline-blok) i disse tilfælde.Men for fuldstændigheden af emnet har vi gjort os bekendt med alle mulige muligheder. Selvom der kan være andre måder, for eksempel at bruge CSS-tabeller, anbefaler søgemaskiner på det kraftigste kun at bruge tabeller til deres tilsigtede formål, og ikke til at organisere navigationselementer eller noget andet.
Fra forfatteren: Hej allesammen. Af en eller anden grund forbinder webmastere rullemenuer med scripts, men i lang tid kan en sådan navigation udføres helt sikkert på ren css. Desuden vil en sådan menu ikke være værre. I dag vil jeg vise dig, hvordan du opretter en rullemenu i css. Jeg vil så at sige dele opskriften.
Lektionsplan og layout af vores menu
Generelt, lad os først beslutte, hvordan vi vil oprette selve menuen. I html5 på en standard måde Det anses for at oprette det i nav-containeren ved hjælp af en punktopstilling. Lad os gøre netop det. Vi fjerner markørerne senere ved hjælp af css, vi har slet ikke brug for dem i menuen.
Egentlig vil jeg skrive med det samme til html markup med indlejrede lister. Det vil sige, at vores liste vil være på to niveauer - den vil indeholde andre lister. For hvert punkt er der nemlig 1 liste, som vil danne en rullemenu.
Der er vigtigt punkt, hvilket er, at du måske ikke behøver at lave alle elementer i rullemenuen, men blot nogle. Intet problem, så i elementer uden dropdowns opretter vi simpelthen ikke indlejrede lister.
Faktisk, her er det, al opmærkningen:
< nav id = "nav" >
< ul >
< li > < a href = "#" >Afsnit 1< / a >
< ul class = "second" >
< li > < a href = "#" >Underparagraf< / a > < / li >
< li > < a href = "#" >Underparagraf< / a > < / li >
< li > < a href = "#" >Underparagraf< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Punkt 2< / a >
< ul class = "second" >
< li > < a href = "#" >Underparagraf< / a > < / li >
< li > < a href = "#" >Underparagraf< / a > < / li >
< li > < a href = "#" >Underparagraf< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Punkt 3< / a >
< ul class = "second" >
< li > < a href = "#" >Underparagraf< / a > < / li >
< li > < a href = "#" >Underparagraf< / a > < / li >
< li > < a href = "#" >Underparagraf< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Punkt 4< / a >
< ul class = "second" >
< li > < a href = "#" >Underparagraf< / a > < / li >
< li > < a href = "#" >Underparagraf< / a > < / li >
< li > < a href = "#" >Underparagraf< / a > < / li >
< / ul >
< / li >
< / ul >
< / nav >
Jeg forstår, at det er kæmpestort. Dette er problemet med indlejrede lister, at du skal skrive en masse kode. Men husk på, at vi laver 4 hovedpunkter, og for hver vil der være en rullemenu.
Faktisk gav jeg hele navigationen en identifikator af nav, og alle indlejrede lister en stilklasse på sekund for at forstå, at de er indlejrede.
Super, vi har markeringen klar, du kan se resultatet:
Ja, det ser forfærdeligt ud. Men nu vil vi tage med css arbejde og på få minutter vil vores navigation blive forvandlet. Lad os arbejde.
Skrive CSS-stile
Den første ting, jeg vil gøre, er at nulstille al polstring til standard for alle elementer. De vil kun komme i vejen for os; det er bedre at sætte indrykkerne selv senere, hvor det er nødvendigt.
*( margin: 0; polstring: 0; )
margin: 0;
polstring: 0;
#nav( højde: 70px; ) #nav ul( listestil: ingen; )
#nav(
højde: 70px;
#navul(
liste-stil: ingen;
Nu skal vi faktisk beslutte, hvad vores menu skal være. Vandret eller lodret? Jeg foreslår, at du først laver en vandret og ser alt i eksemplet. For at gøre dette skal du skrive følgende stilarter:
#nav > ul > li( flydende: venstre; bredde: 180px; position: relativ;)
#nav > ul > li(
flyde: venstre;
bredde: 180px;
stilling: relativ;
Bemærk, at ved at bruge tegnet > henviser vi til listeelementer, der er direkte indlejret i ul, som er direkte indlejret i nav. Dette er meget vigtigt, fordi det forhindrer stylingen i at blive anvendt på indlejrede listeelementer. Faktum er, at i henhold til min idé vil emnerne i hovedlisten være placeret vandret og i de indlejrede - lodret.
Men du kan selvfølgelig gøre det anderledes, i overensstemmelse med din idé. Du kan sikre dig, at alle punkter er på én linje.
Anyway, ovenstående kode håber jeg du kan forstå. Det tvinger hovedlisteelementerne til at blive skubbet til venstre, så de alle vises på samme linje, selvom de er blokelementer. Jeg gav dem også en eksplicit bredde og relativ positionering.
Hvorfor positionering? Det er nødvendigt for derefter absolut at placere indlejrede lister. Hvis du har studeret positionering i CSS, så ved du sikkert, at hvis du giver en blok relativ positionering, så kan alle elementerne i den placeres absolut inde i netop denne blok, og ikke hele browservinduet.
I mellemtiden er her, hvad vi har fået indtil videre:
Fra dette skærmbillede kan du allerede forestille dig det omtrentlige resultat. Selvfølgelig skal vi stadig designe genstandene smukt, så øjnene ikke beder om nåde, når de ser navigationen.
#nav li a( display: blok; baggrund: #90DA93; kant: 1px fast #060A13; farve: #060A13; polstring: 8px; tekst-align: center; tekst-dekoration: ingen; ) #nav li a:hover( baggrund: #2F718E )
#navli a(
display: blok;
baggrund : #90DA93;
kant : 1px fast #060A13;
farve: #060A13;
polstring: 8px;
tekst-align: center;
tekst-dekoration: ingen;
#nav li a:hover(
baggrund: #2F718E;
Først skal selve links blokeres. Dette er nødvendigt for at det kan fungere polstring og alle egenskaber blev anvendt korrekt. Dernæst specificerer jeg farverne på baggrunden, tekst, rammeparametre, intern polstring og centreret tekstjustering. Til sidst fortryder jeg understregningen af links.
Alle disse parametre skal ikke specificeres, som jeg gjorde. Du kan vælge farverne vilkårligt, lave en anden ramme eller slet ikke bruge den, indrykningerne kan reduceres eller øges.
Bemærk venligst, at i I dette tilfælde vi brugte ikke tegnet >, så specificerede regler vil gælde for alle links, inklusive dem, der er placeret i indlejrede afsnit. Så nu har vi følgende:
Fantastisk, men du forstår, at underpunkter ikke skal være synlige, de skal åbne, når du holder musemarkøren over ønskede vare. Uden dette ligner vores menu et bord. Nå, det er tid til at skjule de indlejrede elementer.
#nav li .second( display: ingen; position: absolut; top: 100%; )
#nav li .second(
display: ingen;
position: absolut;
top: 100%;
Først skjuler vi fuldstændig indlejrede lister. For det andet spørger vi dem absolut positionering og topkoordinat: 100%. Det betyder, at rullemenuen vises tydeligt under det hovedelement, det tilhører, tydeligt i 100 % af det pågældende elements højde.
Nu ser vi kun hovedmenuen på websiden, som er det, vi har brug for.
Lad os implementere frafaldet
Det eneste, vi har tilbage at gøre, er det vigtigste - at realisere selve faldet. Der er ikke noget kompliceret ved det, se denne kode:
#nav li:hover .second( display: blok; )
#nav li:hover .second(
display: blok;
Denne kode vil fungere fejlfrit. Når du holder markøren over et hovedmenupunkt, bliver underlisten synlig. Desuden kun den liste, der er indlejret i det element, som markøren svæver over.
Der er kun et mindre problem - bredden af de indlejrede elementer svarer ikke til bredden af de vigtigste. Men dette kan meget nemt løses ved at tilføje de passende stilarter:
#nav li li( bredde: 180px;)
#navlili(
bredde: 180px;
Det er det, problemet løst:
Alt fungerer perfekt. Når du holder markøren over hovedelementet, vises en rullemenu, der svarer til det. Hvis du flytter markøren til siden, forsvinder den. Hvis du flytter markøren til selve de indlejrede elementer, kan du klikke på dem og gå til påkrævet afsnit websted. Derfor har vi skabt en meget enkel og let rullemenu med absolut ingen scripts til dig.
Konvertering af menuen til lodret
Nå, okay, vi har helt fundet ud af horisontal navigation, men udover det findes vertikal navigation meget ofte på websteder, og det kan også være en drop-down. Faktisk er det meget nemt at ændre menuen fra vandret til lodret, vi behøver kun at ændre et par linjer kode.
Først skal du fjerne float:left fra hovedlisten. Det er denne egenskab, der sikrer, at vores varer vises på én linje, men hvorfor har vi brug for dette, hvis navigationen skal være lodret?
Nu er der kun tilbage at ændre reglerne for #nav li .second-vælgeren, det vil sige for indlejrede lister, de skal nemlig placeres lidt anderledes. Sådan her:
#nav li .second( display: ingen; position: absolut; venstre: 100%; top: 0; )
#nav li .second(
display: ingen;
position: absolut;
venstre: 100%;
top: 0;
Det vil sige, at det er nødvendigt at registrere to koordinater i stedet for én. For det første sagde jeg i tilfælde af horisontal navigation, at som planlagt skulle undermenupunkter vises under hovedpunkterne. I tilfælde af en lodret menu er dette ikke egnet - emnerne skal vises på siden.
Derfor skifter vi top: 100% til venstre: 100%. Derudover har vi også brug for topkoordinaten. Vi sætter den til 0, så undermenuen er på samme niveau som det punkt, den svarer til.
Det er det, nu fungerer alt som det skal. Du kan teste det. Som du kan se, løj jeg ikke, da jeg sagde, at jeg kun skulle omskrive et par linjer kode.
Vandret menu med flere niveauer
Ved at bruge stort set samme tilgang, kan du oprette flere menuniveauer, hvis det er nødvendigt. Lad os for eksempel oprette en liste for det fjerde punkt i hovedmenuen, som vil blive indlejret i et af underpunkterne.
Hvis dit websted er mere end blot en enkelt webside, bør du overveje at tilføje en navigationslinje (menu). Menu er en sektion af et websted designet til at hjælpe besøgende med at navigere på webstedet. Enhver menu er en liste over links, der fører til interne sider websted. For det meste på en enkel måde tilføjelse af en navigationslinje til et websted er at skabe en menu med ved hjælp af CSS og HTML.
Lodret menu
Det første trin i at skabe lodret menu vil oprette en punktopstilling. Vi skal også kunne identificere listen, så vi tilføjer en id-attribut til den med identifikatoren "navbar". Hvert element
- vores liste vil indeholde ét link:
Ved første øjekast fungerer alt. Men lad os bytte vores lister. Lad os sætte listen med menu-1-klassen i koden før listen med menu-2-klassen (nu er den lavere).
Dette er, hvad vi får som resultat:
Figur 6. Eksempel på arbejde. genstande nederste menu også omslutte toppen af menuen, fordi effekten af float-egenskaben ikke er blevet annulleret, og den gælder for alle efterfølgende elementer.
Hvordan løser man dette problem?
For at gøre dette skal du bruge clear-egenskaben, den annullerer elementets omvikling omkring et andet element, hvis det har float-egenskaben sat.
Her er et modificeret eksempel, der bruger egenskaben clear:
Liste vandret Det kan ses, at den nederste liste ikke længere vikler sig om den øverste, elementerne kolliderer ikke med hinanden. Men i den første liste er der tags
- er også et blokelement.