Enkel horisontal meny på tvers av nettlesere. Hvordan lage en horisontal skrå meny
I denne opplæringen skal vi lage horisontal meny i CSS. Selvfølgelig kan du allerede bruke ferdige løsninger, for eksempel leie programmerere for CMS Made Simple. Men du leter ikke etter enkle måter, er du? :bølle:
Trinn 1 - HTML-oppmerking
Først må vi lage listeelementer med en tag for hvert element i vår horisontale meny. For å lage en undermeny må du legge til en annen underordnet liste i den overordnede.
Trinn 2 - Lag CSS-stiler for den horisontale menyen
Til å begynne med ser menyen vertikal ut, for å fikse dette vil vi skrive noen stiler, redigere innrykk, kantlinjer, bakgrunnsfarge og runde hjørnene. Vi vil gjøre bredde og høyde fast. Vi vil justere menyelementene til venstre ved å bruke float: left (slik at navigasjonen får en horisontal struktur).
Meny, .menu ul, .menu li, .menu a ( margin: 0; utfylling: 0; kantlinje: ingen; disposisjon: ingen; ) .menu ( høyde: 40px; bredde: 505px; bakgrunn: #4c4e5a; bakgrunn: - webkit-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); bakgrunn: -moz-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); bakgrunn: -o-linear-gradient( topp, #5c5e6a 0%,#3c3d44 100%); bakgrunn: -ms-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); bakgrunn: linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; ) .menu li (posisjon: relativ; listestil: ingen; flytende: venstre; display: blokk ; høyde: 40px;)
La oss skrive følgende stil en stund, og skjule rullegardinlisten. Dette vil gjøre redigeringen enklere.
Trinn 3 - Link-menystil
Deretter vil vi skrive stiler som legger til noen grunnleggende CSS-egenskaper som skrifttype, farger, utfylling, etc. Deretter legger vi til en skygge for teksten og fargeovergangene for å skape en jevn effekt der fargen endres ikke umiddelbart, men med et visst intervall. For å lage en koblingsseparator, la oss legge til en kantlinje til venstre og høyre, og deretter fjerne venstre kant i den første lenken og høyre kant i siste lenke. Når du holder musepekeren over menyen, vil bare fargen endres.
Meny li a (display: blokk; utfylling: 0 14px; margin: 6px 0; linjehøyde: 28px; tekstdekorering: ingen; kantlinje: venstre: 1px solid #494942; kantlinje: 1px solid #4f5058; font- familie: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f4f4f4; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : farge .3s ease-in-out; -moz-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; -ms-transition: color .3s ease-in- ut; overgang: farge .3s lett-inn-ut; ) .menu li:førstebarn a (kant-venstre: ingen; ) .menu li:siste-barn a( kant-høyre: ingen; ) .meny li: hover > a ( farge: #9fde63; )
Trinn 4 - Rullegardinmeny
Først av alt, la oss fjerne denne kodelinjen som vi la til i det andre trinnet.
Meny ul ( display: ingen; )
Nå skal vi redigere stilen for undermenyen. La oss legge til en undermenyplassering på 40px øverst og 0px til venstre for menyelementet og legge til avrundede hjørner under. La oss sette opasiteten til null og endre den til 1 ved sveving for å skape en fade inn/ut-effekt. For lysbildeeffekten opp/ned må vi sette listehøyden til 0px når rullegardinmenyen er skjult, og 36px når du holder musepekeren over rullegardinlisten.
Meny ul (posisjon: absolutt; topp: 40px; venstre: 0; opasitet: 0; bakgrunn: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border- radius: 0 0 4px 4px; -webkit-transition: opacity .3s ease .1s; -moz-transition: opacity .3s ease .1s; -o-transition: opacity .3s ease .1s; -ms-transition: opacity . 3s letthet .1s; overgang: opasitet .3s letthet .1s; ) .menu li:hover > ul ( opasitet: 1; ) .menu ul li (høyde: 0; overløp: skjult; polstring: 0; -webkit-overgang: høyde .3s letthet .1s; -moz-overgang: høyde .3s letthet .1s; -o-overgang: høyde .3s letthet .1s; -ms-overgang: høyde .3s letthet .1s; overgang: høyde .3s letthet . 1s; ) .menu li:hover > ul li ( høyde: 36px; overløp: synlig; polstring: 0; )
Sett bredden på den klikkbare rullegardinmenyen til 100 piksler. Etter hver lenke la jeg til en kantlinje for å skille dem. Vi fjerner grensen i den siste lenken.
Menu ul li a ( width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #464649; ) .menu ul li:last-child a ( kantlinje: ingen; )
For å fullføre en horisontal CSS-meny, må du legge til et ikon for hver rullegardinundermeny. For å gjøre dette vil vi lage en egendefinert klasse for hver av undermenyene og legge til et bakgrunnsbilde.
Meny a.d ( bakgrunn: url(docs.png) no-repeat 6px center; ) .menu a.m ( bakgrunn: url(bubble.png) no-repeat 6px center; ) .menu a.s (bakgrunn: url(arrow.png) no - gjenta 6px senter;)
Konklusjon
Vi har med hell laget en horisontal rullegardinmeny med CSS3-stiler og uten å bruke den, selv om det også var mulig. Hvis du har spørsmål, gi meg beskjed i kommentarene.
(nedlastinger: 395)
Oppgave
Vis en punktliste horisontalt uten kuler.
Løsning
Bullet tag
- viser elementer som standard
- vertikalt over hverandre. For å lage navigasjonselementer er det i noen tilfeller praktisk å vise listen horisontalt. Det er flere måter å oppnå denne listevisningen på.
Du bør allerede vite at HTML har blokk- og innebygde elementer. Inline-elementer lager ikke sine egne blokker; et eksempel på slike elementer er tagger eller . Blokkelementer vises med ny linje og lag en rektangulær blokk, et eksempel på slike tagger
ellerSå her er taggen
- er også et blokkelement.
Å merke
- oppførte seg ikke som blokkelement, kan du bruke CSS for å gjøre det små bokstaver.
Ansvarlig for hvordan elementet skal vises i dokumentet CSS-eiendom vise. La oss vurdere tre av betydningene (selv om det er flere):
- blokk - elementet vises som et blokkelement.
- inline - elementet vises som inline.
- inline-block - block-line element, les mer om denne typen element nedenfor, vi vil bruke det.
Først, la oss lage en horisontal liste ved å gjøre punktene om til innebygde elementer. I CSS-stil, la oss skrive en regel der li-velgeren er satt til å vise egenskap med verdien inline .
Liste horisontalt Så denne stilen fungerte og vi fikk et horisontalt arrangement av listeelementer:
Figur 1. Eksempel #1 på jobb.
Denne metoden har ulemper. Faktum er at inline-elementer har noen begrensninger sammenlignet med blokkelementer. For eksempel kan de ikke gis bredde og høyde, men blokker kan.
For eksempel trenger vi at menyelementet vi lager har en bredde på 150px og en høyde på 40px. La oss prøve å endre stilen til følgende, det vil si å legge til to regler som angir størrelsen på menyelementet:
Disse endringene vil ikke føre til endringer. For at menyelementer skal plasseres horisontalt og for å kunne stille inn bredde og høyde, må de sette typen til inline-block . La oss endre eksempelkoden vår:
Liste horisontalt Denne koden fungerer og endringene er synlige:
Figur 2. Eksempel nr. 2 i aksjon. Men det kan være det forskjellige varianter, for eksempel må vi vise nestede lister i menyen:
Nestet liste. Her er resultatet av denne koden:
Figur 3. Eksempel nr. 3 på jobb. Vi ser at blokkene ikke er justert i høyden slik vi ønsker. Selvfølgelig kan du angi samme høyde for alle blokker, men vi vet ikke alltid den nøyaktige verdien på forhånd, og den kan endres.
Men egentlig, hvorfor skjer dette?
Blokkene våre har en visningsegenskap satt til inline-block . Dette betyr at de har egenskapene til både blokkelementer (muligheten til å spesifisere bredde og høyde) og innebygde elementer. Det vi ser er kvaliteten på de innebygde elementene.
La oss se på en streng med "A"-tegn i forskjellige størrelser:
A A A A A A A
Vi ser at alle bokstaver er vertikalt justert langs bunnlinjen. Mer presist, langs grunnlinjen, men la oss ikke gå inn i ugresset nå. Så det samme skjedde med blokkene våre.
For å justere tekst vertikalt, bruk egenskapen vertikal-justering. I vårt eksempel #3 må vi bruke verdien topp , som vil justere den øverste kanten av elementet med toppen av selve elementet. høyt element linjer.
La oss nå bruke den på en streng med "A"-tegn i forskjellige størrelser:
A A A A A A A
Bokstavene ser ut til å "hoppe" litt. Jeg satte CSS-kanten til den høyeste bokstaven for å vise at det faktisk ikke er noen hopp, bare tom plass mellom toppkanten (der justeringen skjer) og topppunktet til "A".
Egenskapen vertikal-justering må brukes på hvert innebygde element, det arves ikke. Du kan lese mer om denne egenskapen: vertikal-align .
Etter denne digresjonen vil vi fortsette å plassere listeelementene horisontalt.
Andre vei
Du kan plassere listeelementer horisontalt ved å bruke flyteegenskapen. Denne egenskapen spesifiserer hvilken side elementet er justert på, og har to posisjoner: venstre og høyre .
Her er et eksempel som bruker denne koden:
Liste horisontalt Her er resultatet av koden:
Figur 4. Eksempel på arbeid. Eksemplet ser ut til å fungere. Men det er ett forbehold ved å bruke denne egenskapen. Nå skal vi se på det. La oss for eksempel ta en kode der det er to horisontal liste Med på forskjellige måter arrangement av elementer horisontalt: visning og flyte:
Liste horisontalt Her er resultatet av koden:
Figur 5. Eksempel på arbeid. I disse eksemplene er listen containere
- har en rød kant på 1 piksel tykk. Men toppliste, som bruker egenskapen display, inkluderer listeelementer. Men elementene i en liste opprettet ved hjelp av float-egenskapen faller ut av beholderen.
- er fortsatt plassert utenfor containeren
-
.
- listen vår vil inneholde én lenke:
Vår neste oppgave er å tilbakestille standard listestiler. Vi må fjerne den ytre og indre polstringen fra selve listen og kulene fra listeelementene. Så la oss sette den nødvendige bredden:
#navbar ( margin: 0; utfylling: 0; listestil-type: ingen; bredde: 100px; )
Nå er det på tide å style lenkene selv. Vi vil legge til dem bakgrunnsfarge, endre tekstparametrene: farge, skriftstørrelse og vekt, fjern understrekingen, legg til små innrykk og redefiner skjermen element fra inline til blokk. I tillegg er venstre og nederste rammer lagt til i listeelementene.
Den viktigste delen av endringene våre er redefineringen av innebygde elementer for å blokkere elementer. Nå opptar lenkene våre all tilgjengelig plass til listeelementene, det vil si at for å følge koblingen trenger vi ikke lenger å holde markøren nøyaktig over teksten.
#navbar a ( bakgrunnsfarge: #949494; farge: #fff; polstring: 5px; tekstdekorering: ingen; font-weight: fet; kantlinje til venstre: 5px solid #33ADFF; display: block; ) #navbar li ( border-venstre: 10px solid #666; border-bottom: 1px solid #666; )
Vi har kombinert all koden beskrevet ovenfor til ett eksempel, nå ved å klikke på prøv-knappen kan du gå til eksempelsiden og se resultatet:
Dokumentets navn Prøv »Når du holder musepekeren over et menyelement, vil det utseende kan endres for å tiltrekke brukerens oppmerksomhet. Du kan lage en slik effekt ved å bruke pseudo-class:hoveren.
La oss gå tilbake til det vertikale menyeksemplet diskutert tidligere og legge til følgende regel i stilarket:
#navbar a:hover ( bakgrunnsfarge: #666; border-venstre: 5px solid #3333FF; ) Prøv »
Horisontal meny
I forrige eksempel så vi på den vertikale navigasjonslinjen, som oftest finnes på nettsteder til venstre eller høyre for hovedinnholdsområdet. Men menyer med navigasjonslenker er også ofte plassert horisontalt øverst på nettsiden.
En horisontal meny kan lages ved styling vanlig liste. Vis egenskap for elementer
- du må tilordne verdien inline slik at listeelementene er plassert etter hverandre.
For å plassere menyelementer horisontalt, må du først opprette punktliste med lenker:
La oss skrive et par regler for listen vår som tilbakestiller standardstilen som brukes for lister, og omdefinere listeelementene fra blokk til innebygd:
#navbar ( margin: 0; utfylling: 0; listestil-type: ingen; ) #navbar li ( display: inline; ) Prøv »
Nå må vi bare bestemme oss styling for vår horisontale meny:
#navbar ( margin: 0; polstring: 0; listestil-type: ingen; kantlinje: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; tekstjustering: senter; bakgrunnsfarge: #33ADFF; ) #navbar a ( farge: #fff; polstring: 5px 10px; tekstdekor: ingen; font-weight: bold; display: inline-block; width: 100px; ) #navbar a:hover ( border-radius: 20px 5px ; bakgrunnsfarge: #0066FF; ) Prøv »
Nedtrekksmenyen
Menyen vi lager vil ha hovednavigasjonslenkene plassert i horisontalt panel navigasjon, og underelementer som vil vises først etter at du holder musen over menyelementet som disse underelementene er knyttet til.
Først må vi lage HTML-strukturen til menyen vår. Vi vil plassere hovednavigasjonslenkene i en punktliste:
Vi vil plassere underelementene i en egen liste, og legge dem inn i elementet
- , som inneholder den overordnede lenken angående underelementene. Nå har vi en klar struktur for vår fremtidige navigasjonslinje:
Prøv »La oss nå komme i gang skrive CSS kode. Først må du skjule listen med underelementer ved å bruke displayet: ingen; erklæring slik at de ikke vises på nettsiden hele tiden. For å vise underelementer trenger vi det når vi holder musepekeren over et element
- listen har blitt konvertert til et blokkelement igjen:
#navbar ul ( display: none; ) #navbar li:hover ul ( display: block; )
Vi fjerner standardinnrykk og markører fra begge listene. Vi gjør listeelementer med navigasjonslenker flytende, og danner en horisontal meny, men for listeelementer som inneholder underelementer setter vi flytende: ingen; slik at de vises under hverandre.
#navbar, #navbar ul ( margin: 0; polstring: 0; listestil-type: ingen; ) #navbar li ( flyte: venstre; ) #navbar ul li ( flyte: ingen; )
Deretter må vi sørge for at rullegardinundermenyen vår ikke skyver innholdet under navigasjonslinjen ned. For å gjøre dette, vil vi sette listen elementer posisjon: relativ; , og en liste som inneholder underelementer posisjon: absolutt; og legg til en toppeiendom med en verdi på 100 % slik at den absolutt plasserte undermenyen vises nøyaktig under lenken.
#navbar ul ( visning: ingen; posisjon: absolutt; topp: 100%; ) #navbar li ( flyte: venstre; posisjon: relativ; ) #navbar ( høyde: 30px; ) Prøv »
Høyden for den overordnede listen ble lagt til med vilje, siden nettlesere ikke anser flytende innhold som elementinnhold, uten å legge til høyde vil listen vår bli ignorert av nettleseren og innholdet etter listen vil gå rundt menyen vår.
Nå trenger vi bare å style begge listene våre, og rullegardinmenyen vil være klar:
#navbar ul (display: ingen; bakgrunnsfarge: #f90; posisjon: absolutt; topp: 100%; ) #navbar li:hover ul (display: block; ) #navbar, #navbar ul (margin: 0; padding: 0; liste-stil-type: ingen; ) #navbar (høyde: 30px; bakgrunnsfarge: #666; polstring-venstre: 25px; min-bredde: 470px; ) #navbar li ( flyte: venstre; posisjon: relativ; høyde: 100%; ) #navbar li a (skjerm: blokk; polstring: 6px; width: 100px; farge: #fff; tekstdekorasjon: ingen; tekstjustering: center; ) #navbar ul li ( flyte: ingen; ) #navbar li:hover ( bakgrunnsfarge: #f90; ) #navbar ul li:hover ( bakgrunnsfarge: #666; )
Hei kjære besøkende på bloggen min! I dag vi vil snakke om den horisontale hovedmenyen på nettstedet, nemlig hvordan du justerer den horisontale menyen i midten. Ja, ved første øyekast, hva er så komplisert med det - jeg satte inn de nødvendige innrykk, justerte dem og det er det. Men det er noen nyanser her. Et nettsted er for det første dynamisk, dvs. vises stadig på nettstedet nytt innhold, noen nye blokker med informasjon dukker opp osv. Slik kan enkelte elementer vises/forsvinne i hovedmenyen. Med alt dette i betraktning, må vi sørge for at når vi legger til eller fjerner et menyelement, forblir menyen i sentrum. Selvfølgelig er det ikke alltid nødvendig å sentrere det, alt avhenger av designet. Men hvis du fortsatt har tenkt å plassere den horisontale menyen i sentrum, kan vi ved å bruke noen få enkle triks i CSS oppnå ønsket resultat.
Artikkelstruktur
Horisontal meny i midten uten rullegardinelementer
La oss først se på eksemplet med en horisontal meny som ikke har rullegardinelementer.
HTML-kode
Css-kode
*, *::etter, *::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; margin: 0; polstring: 0; ) #hovedmeny (bakgrunn: #444; posisjon: relativ; overløp: skjult; høyde: 40px; margin: 30px 0 ) #hovedmeny ul ( listestil: ingen; margin: 0; utfylling: 0; posisjon: relativ; venstre: 50%; flyte: venstre; skrift: 14px Arial, Helvetica, sans-serif; høyde: 40px ) #hovedmeny ul li (posisjon : relativ; venstre: -50%; flyte: venstre; margin: 0 10px; høyde: 40px ) #hovedmeny ul li a (farge: #fff; display: blokk; tekstdekorasjon: ingen; utfylling: 0 15px; linje- høyde: 40px; ) #hovedmeny ul li a:hover ( bakgrunnsfarge: #666; )La oss se på alt i rekkefølge, alt er enkelt her. Vi lager en "hovedmeny"-beholder der vi plasserer menyen vår i form av en uordnet liste.
Nå er det snakk om css-stiler. Først tilbakestiller vi alle marginer og utfylling til null for alle nettlesere. Deretter, ved å bruke "float:left"-egenskapen, flytter vi vår uordnede liste til venstre, og deretter, ved å bruke relativ posisjonering, flytter vi den 50% til høyre. Bredden på "ul"-listen vil være lik summen av lengdene til alle "li"-elementene som er inne i den. Dermed, hvis vi mentalt deler nettleservinduet i to, vil menyen vår flyttes til høyre for skillelinjen. For å justere vil vi også bruke relativ posisjonering på "li"-elementene og flytte dem til venstre med 50 %, og spesifisere egenskapen "venstre:-50%". Og også, jeg glemte nesten, vår "hovedmeny"-beholder må spesifisere egenskapen "overflow:hidden", ellers får vi horisontal stripe bla.
Det er det, nå er menyen vår midtstilt. Nå kan du legge til eller trekke fra poeng, dette vil ikke påvirke plasseringen. Du kan også bruke denne menyen på nettsidene dine ved ganske enkelt å endre stilene for å passe til ditt design.
Horisontal meny i midten med rullegardinelementer
La oss nå se på rullegardinunderelementene. Her er situasjonen noe annerledes og noe mer komplisert, pga i det første tilfellet vil ikke underelementene våre vises, fordi vi har spesifisert egenskapen "overflow: hidden" til "hovedmeny"-blokken. Dette betyr at elementer utenfor denne blokken ikke vil bli vist. Men det er en vei ut.
Så jeg endret den forrige koden og fjernet egenskapen "overflow:hidden" fra den.
HTML-kode
CSS-kode
*, *::etter, *::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; margin: 0; polstring: 0; ) #mainmenu (posisjon: relativ; bakgrunn: #444444; høyde: 40px; margin: 30px 0; polstring: 0; flyte: venstre; bredde: 100%; z-indeks: 10 ) #mainmenu ul (slett: venstre; posisjon: relativ; høyre: 50%; høyde: 40px; flyte: høyre; tekstjustering: center; font: 15px Arial, Helvetica , sans-serif; listestil: ingen; utfylling: 0; margin: 0 ) /** Hovedpunkter **/ #mainmenu > ul > li (posisjon: relativ; venstre: 50%; flyte: venstre; høyde: 40px ; polstring: 0; margin: 0 ) #hovedmeny > ul > li > a (kant-venstre: 1px solid #666; display: blokk; farge: #fff; tekstdekorasjon: ingen; utfylling: 0 20px; linjehøyde : 40px; ) #hovedmeny > ul > li:førstebarn > a ( kantlinje: ingen ) #hovedmeny > ul > li:hover > a, #hovedmeny > ul > li.hover > a, #hovedmeny > ul > li. aktiv > a ( farge: #fff ) #hovedmeny > ul > li:hover, #hovedmeny > ul > li.hover, #hovedmeny > ul > li.aktiv (bakgrunn: #666) /* Rullegardinunderelementer */ # hovedmeny ul li ul ( posisjon: absolutt; venstre: 0; topp: 40px; display: ingen; liste-stil: ingen; synlighet: skjult; polstring: 0; margin: 0; bredde: 200px ) #hovedmeny > ul > li ul li ( bakgrunnsfarge: #666; posisjon: relativ; venstre: 0; display: listeelement; flyte: ingen; høyde: auto; margin: 0; tekstjustering: venstre; ) #hovedmeny ul li ul li a ( border-bottom: 1px solid #999; display: block; color: #fff; polstring: 10px 15px; tekstdekorasjon: ingen; ) #mainmenu ul li ul li.parent a ( posisjon: relativ; ) #mainmenu ul li ul > li.parent > a::before ( border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolutt; høyre: 15px; topp: 50%; transform: translateY(-50%) rotate(45deg); høyde: 6px; width: 6px; ) #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover ( bakgrunnsfarge: #444 ) #hovedmeny ul li:hover ul, #hovedmeny ul li.hover ul ( display: blokk ) /* rullegardinelementer på andre nivå */ #hovedmeny ul li:hover > ul ( opasitet: 1; synlighet : synlig; margin: 0; ) #hovedmeny ul li ul li ul ( øverst: 0; venstre: 200px; margin: 0 0 0 20px; bredde: 180px )Nå er menyen vår plassert i midten og underelementer vises når du holder musepekeren over den.
Sentreringsmenyer med flexbox
Juster menyen til midten Du kan også bruke en ny regel i css - flexbox. Generelt vil jeg dedikere et eget innlegg til triks med flexbox, det er verdt det, det forenkler livet til en layoutdesigner. Generelt skal vi ikke gå dypere her... Jeg vil bare gi her css-kode for en meny med rullegardinelementer. HTML-koden er den samme som ovenfor.
CSS-kode
*, *::etter, *::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; margin: 0; polstring: 0; ) #mainmenu (posisjon: relativ; bakgrunn: #444444; høyde: 40px; margin: 30px 0; polstring: 0; width: 100%; z-indeks: 10 ) #mainmenu ul ( display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horisontal; -webkit- box-direction: normal; -webkit-flex-direction: rad; -ms-flex-direction: rad; flex-retning: rad; høyde: 40px; tekstjustering: center; font: 15px Arial, Helvetica, sans-serif ; listestil: ingen; polstring: 0; margin: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; ) / ** Hovedpunkter **/ #mainmenu > ul > li (posisjon: relativ; høyde: 40px; polstring: 0; margin: 0 ) #mainmenu > ul > li > a (kant-venstre: 1px solid #666; display: blokk; farge: #fff; tekst-dekorasjon: ingen; polstring: 0 20px; linjehøyde: 40px; ) #mainmenu > ul > li:førstebarn > a ( kantlinje: ingen ) #hovedmeny > ul > li:hover > a, #hovedmeny > ul > li.hover > a, #hovedmeny > ul > li.aktiv > a ( farge: #fff ) #hovedmeny > ul > li:hover, #hovedmeny > ul > li.hover, #hovedmeny > ul > li.aktiv ( bakgrunn: #666 ) /* Nedtrekksunderelementer */ #hovedmeny ul li ul (posisjon: absolutt; venstre: 0; topp: 40px; visning: ingen; listestil: ingen; synlighet: skjult; utfylling: 0; margin: 0; bredde: 200px ) #hovedmeny > ul > li ul li ( bakgrunnsfarge : #666; posisjon: relativ; venstre: 0; display: listeelement; flyte: ingen; høyde: auto; margin: 0; tekstjustering: venstre; ) #hovedmeny ul li ul li a ( kantlinje -bunn: 1px solid #999; display: blokk; farge: #fff; polstring: 10px 15px; tekstdekorasjon: ingen; ) #mainmenu ul li ul li.parent a (posisjon: relativ; ) #mainmenu ul li ul > li.parent > a::before ( border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform : translateY(- 50%) rotere(45grader); høyde: 6px; bredde: 6px; ) #hovedmeny ul li ul li:hover, #hovedmeny ul li ul li.hover ( bakgrunnsfarge: #444 ) #hovedmeny ul li:hover ul, #hovedmeny ul li.hover ul ( display: blokk ) /* Drop- ned elementer andre nivå */ #hovedmeny ul li:hover > ul ( opasitet: 1; synlighet: synlig; margin: 0; ) #hovedmeny ul li ul li ul ( øverst: 0; venstre: 200px; margin: 0 0 0 20px ; bredde: 180px)Som du kan se, er reglene endret kun for foreldrelisten - #hovedmeny ul. Det eneste var at jeg måtte legge til prefikser for tidligere versjoner nettlesere. Jeg legger merke til at flexbox-regelen er korrekt forstått bare av moderne nettlesere. Hvis du retter deg mot eldre nettlesere, må flex-alternativet utsettes. Du kan se hvilke nettlesere som forstår flexbox godt
Figur 7. Eksempel på arbeid. I tillegg vet vi ikke alltid i arbeid hvilket element som vil følge elementet ved bruk av float. Det ideelle alternativet ville være å stenge driften av flyteeiendommen i samme blokk der den er åpen.
Dette gjøres ved hjelp av et pseudoelement. Her er koden:
Liste horisontalt Nå har vi 100% fungerende kode.
Figur 8. Eksempel på arbeid. Denne teknikken med float-egenskapen brukes vanligvis når du designer nettsteder for å justere kolonner opprettet av tagger
. På denne måten får vi en normal konstruksjon av søyler med nødvendig høydejustering. Når vi lager en meny, er i de fleste tilfeller ikke høyden på blokkene viktig for oss, den er nesten alltid den samme. Derfor er det ganske berettiget å bruke regelen (display: inline-block) i disse tilfellene.Men for fullstendigheten av emnet har vi gjort oss kjent med alle mulige alternativer. Selv om det kan være andre måter, for eksempel å bruke CSS-tabeller, anbefaler søkemotorer på det sterkeste å bruke tabeller kun for det tiltenkte formålet, og ikke for å organisere navigasjonselementer eller noe annet.
Fra forfatteren: Hei alle sammen. Av en eller annen grunn forbinder webmastere rullegardinmenyer med skript, men i lang tid kan slik navigering gjøres helt trygt på ren css. Dessuten vil en slik meny ikke være verre. I dag skal jeg vise deg hvordan du lager en rullegardinmeny i css. Jeg skal dele så å si oppskriften.
Leksjonsplan og oppsett av menyen vår
Generelt sett, la oss først bestemme hvordan vi skal lage selve menyen. I html5 på en standard måte Det anses å opprette det i nav-beholderen ved hjelp av en punktliste. La oss gjøre akkurat det. Vi vil fjerne markørene senere ved hjelp av css; vi trenger dem ikke i det hele tatt i menyen.
Egentlig skal jeg skrive til med en gang html-oppmerking med nestede lister. Det vil si at listen vår vil være to-nivå - den vil inneholde andre lister. For hvert element er det nemlig 1 liste, som vil danne en rullegardinmeny.
Det er viktig poeng, som er at du kanskje ikke trenger å gjøre rullegardinmenyen for alle elementer, men bare noen. Ikke noe problem, da i elementer uten rullegardinlister lager vi ganske enkelt ikke nestede lister.
Faktisk, her er den, all markeringen:
< nav id = "nav" >
< ul >
< li > < a href = "#" >Paragraf 1< / a >
< ul class = "second" >
< li > < a href = "#" >Underklausul< / a > < / li >
< li > < a href = "#" >Underklausul< / a > < / li >
< li > < a href = "#" >Underklausul< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Punkt 2< / a >
< ul class = "second" >
< li > < a href = "#" >Underklausul< / a > < / li >
< li > < a href = "#" >Underklausul< / a > < / li >
< li > < a href = "#" >Underklausul< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Punkt 3< / a >
< ul class = "second" >
< li > < a href = "#" >Underklausul< / a > < / li >
< li > < a href = "#" >Underklausul< / a > < / li >
< li > < a href = "#" >Underklausul< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Punkt 4< / a >
< ul class = "second" >
< li > < a href = "#" >Underklausul< / a > < / li >
< li > < a href = "#" >Underklausul< / a > < / li >
< li > < a href = "#" >Underklausul< / a > < / li >
< / ul >
< / li >
< / ul >
< / nav >
Jeg forstår at det er stort. Dette er problemet med nestede lister, at du må skrive mye kode. Men husk det faktum at vi lager 4 hovedpunkter og for hver vil det være en rullegardinmeny.
Faktisk ga jeg hele navigasjonen en identifikator av nav, og alle nestede lister en stilklasse på andre for å forstå at de er nestet.
Flott, vi har markeringen klar, du kan se på resultatet:
Ja, det ser forferdelig ut. Men nå skal vi inkludere css arbeid og på bare noen få minutter vil navigasjonen vår bli transformert. La oss jobbe.
Skrive CSS-stiler
Det første jeg skal gjøre er å tilbakestille all polstring til standard for alle elementer. De vil bare komme i veien for oss; det er bedre å sette inn innrykk selv senere, der det er nødvendig.
*( margin: 0; utfylling: 0; )
margin: 0;
polstring: 0;
#nav( høyde: 70px; ) #nav ul( listestil: ingen; )
#nav(
høyde: 70px;
#navul(
liste-stil: ingen;
Nå må vi faktisk bestemme hva menyen vår skal være. Horisontal eller vertikal? Jeg foreslår å gjøre den horisontale først og se alt i eksemplet. For å gjøre dette må du skrive følgende stiler:
#nav > ul > li( flyte: venstre; bredde: 180px; posisjon: relativ; )
#nav > ul > li(
flyte: venstre;
bredde: 180px;
stilling: pårørende;
Merk at ved å bruke >-tegnet referer vi til listeelementer som er direkte nestet i ul, som er direkte nestet i nav. Dette er veldig viktig fordi det forhindrer at stilen brukes på nestede listeelementer. Faktum er at i henhold til ideen min vil elementene i hovedlisten være plassert horisontalt, og i de nestede - vertikalt.
Men du kan selvfølgelig gjøre det annerledes, i samsvar med ideen din. Du kan sørge for at alle punktene er på én linje.
Uansett, koden ovenfor håper jeg du kan forstå. Det tvinger hovedlisteelementene til å skyves til venstre slik at de alle vises på samme linje, selv om de er blokkelementer. Jeg ga dem også en eksplisitt bredde og relativ posisjonering.
Hvorfor posisjonering? Det er nødvendig for å så absolutt plassere nestede lister. Hvis du har studert posisjonering i CSS, så vet du sannsynligvis at hvis du gir en blokk relativ posisjonering, så kan alle elementene i den plasseres absolutt inne i denne blokken, og ikke hele nettleservinduet.
I mellomtiden, her er det vi har så langt:
Fra dette skjermbildet kan du allerede forestille deg det omtrentlige resultatet. Selvfølgelig må vi fortsatt designe varene vakkert slik at øynene ikke ber om nåde når de ser på navigasjonen.
#nav li a( display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; ) #nav li a:hover( bakgrunn: #2F718E; )
#navli a(
display: blokk;
bakgrunn : #90DA93;
kantlinje: 1px solid #060A13;
farge : #060A13;
polstring: 8px;
tekst - align : center ;
tekst - dekorasjon : ingen ;
#nav li a:hover(
bakgrunn : #2F718E;
Først må selve koblingene blokkeres. Dette er nødvendig for at det skal fungere polstring og alle egenskaper ble brukt riktig. Deretter spesifiserer jeg fargene på bakgrunnen, tekst, rammeparametere, intern polstring og sentrert tekstjustering. Til slutt opphever jeg understrekingen av lenker.
Alle disse parameterne trenger ikke spesifiseres slik jeg gjorde. Du kan velge fargene vilkårlig, lage en annen ramme eller ikke bruke den i det hele tatt, innrykkene kan reduseres eller økes.
Vær oppmerksom på at i i dette tilfellet vi brukte ikke tegnet >, så spesifiserte regler vil gjelde for alle koblinger, inkludert de som ligger i nestede avsnitt. Så nå har vi følgende:
Flott, men du forstår at underelementer ikke skal være synlige, de skal åpne seg når du holder musepekeren over ønsket vare. Uten dette ser menyen vår ut som et bord. Vel, det er på tide å skjule de nestede elementene.
#nav li .second( visning: ingen; posisjon: absolutt; topp: 100 %; )
#nav li .second(
display: ingen;
posisjon: absolutt;
topp: 100 %;
Først skjuler vi fullstendig nestede lister. For det andre spør vi dem absolutt posisjonering og toppkoordinat: 100%. Dette betyr at rullegardinmenyen vises tydelig under hovedelementet den tilhører, tydelig i 100 % av elementets høyde.
Nå ser vi bare hovedmenyen på nettsiden, som er det vi trenger.
La oss implementere frafallet
Det som gjenstår for oss å gjøre er det viktigste – å realisere selve fallet. Det er ikke noe komplisert med det, se på denne koden:
#nav li:hover .second( display: block; )
#nav li:hover .second(
display: blokk;
Denne koden vil fungere feilfritt. Når du holder markøren over et hovedmenyelement, vil underlisten bli synlig. Dessuten er det bare listen som er nestet i elementet som markøren peker over.
Det er bare ett mindre problem - bredden på de nestede elementene samsvarer ikke med bredden på de viktigste. Men dette kan veldig enkelt løses ved å legge til passende stiler:
#nav li li( bredde: 180px; )
#navlili(
bredde: 180px;
Det er det, problemet løst:
Alt fungerer perfekt. Når du holder musepekeren over hovedelementet, vises en rullegardinmeny som tilsvarer det. Hvis du flytter markøren til siden, forsvinner den. Hvis du flytter markøren til selve de nestede elementene, kan du klikke på dem og gå til nødvendig seksjon nettstedet. Derfor har vi laget en veldig enkel og lett rullegardinmeny med absolutt ingen skript.
Konvertering av menyen til vertikal
Vel, ok, vi har helt funnet ut horisontal navigering, men i tillegg til det, er vertikal navigasjon veldig ofte funnet på nettsteder, og det kan også være en rullegardin. Faktisk er det veldig enkelt å endre menyen fra horisontal til vertikal; vi trenger bare å endre et par linjer med kode.
Først må du fjerne float:left fra hovedlisteelementene. Det er denne egenskapen som sørger for at varene våre vises på én linje, men hvorfor trenger vi dette hvis navigasjonen må være vertikal?
Nå gjenstår det bare å endre reglene for #nav li .second-velgeren, det vil si for nestede lister, nemlig at de må plasseres litt annerledes. Som dette:
#nav li .second( display: ingen; posisjon: absolutt; venstre: 100%; topp: 0; )
#nav li .second(
display: ingen;
posisjon: absolutt;
venstre: 100 %;
topp: 0;
Det vil si at det er nødvendig å registrere to koordinater i stedet for én. For det første, når det gjelder horisontal navigering, sa jeg at undermenyelementer som planlagt skal vises under hovedelementene. I tilfellet med en vertikal meny er dette ikke egnet - elementene skal vises på siden.
Derfor endrer vi topp: 100 % til venstre: 100 %. I tillegg trenger vi også toppkoordinaten. Vi setter den til 0 slik at undermenyen er på samme nivå som elementet den tilsvarer.
Det er det, nå fungerer alt som det skal. Du kan teste det. Som du kan se, løy jeg ikke da jeg sa at jeg bare måtte skrive om noen få linjer med kode.
Horisontal meny med flere nivåer
Ved å bruke omtrent samme tilnærming, kan du lage flere menynivåer om nødvendig. La oss for eksempel lage en liste for det fjerde elementet i hovedmenyen, som vil bli nestet i et av underelementene.
Hvis nettstedet ditt er mer enn bare en enkelt nettside, bør du vurdere å legge til en navigasjonslinje (meny). Meny er en del av et nettsted designet for å hjelpe besøkende med å navigere på nettstedet. Enhver meny er en liste over lenker som fører til interne sider nettstedet. Det meste på en enkel måteå legge til en navigasjonslinje på et nettsted er å lage en meny med bruker CSS og HTML.
Vertikal meny
Det første trinnet i å skape vertikal meny vil opprette en punktliste. Vi må også kunne identifisere listen, så vi vil legge til et id-attributt til den med identifikatoren "navbar". Hvert element
- listen vår vil inneholde én lenke:
Ved første øyekast fungerer alt. Men la oss bytte ut listene våre. La oss sette listen med meny-1-klassen i koden før listen med meny-2-klassen (nå er den lavere).
Dette er hva vi får som resultat:
Figur 6. Eksempel på kjøring. Varer bunnmenyen vikle også rundt toppen av menyen, fordi effekten av float-egenskapen ikke er kansellert og den gjelder for alle påfølgende elementer.
Hvordan løse dette problemet?
For å gjøre dette, må du bruke clear-egenskapen, den kansellerer elementets vikling rundt et annet element hvis det har float-egenskapen satt.
Her er et modifisert eksempel som bruker clear-egenskapen:
Liste horisontalt Det kan sees at den nedre listen ikke lenger vikler seg rundt den øvre, elementene kolliderer ikke med hverandre. Men i den første listen er det tagger
- er også et blokkelement.