Enkel css-rullegardinmeny. Flott oversikt over vakre flernivåmenyer med kodepenn
De fleste klassiske nettsteder på Internett bruker en horisontal meny som hovednavigasjonselement. Noen ganger kan den inneholde forskjellige tilleggsfunksjoner - strukturer på flere nivåer, ikoner for underelementer, en søkeblokk, komplekse lister, etc. Nylig var det et lite utvalg på bloggen, og i dag skal vi se på 4 praktiske eksempler på hvordan man lager en rullegardinmeny ved hjelp av CSS + HTML. Informasjonen vil være nyttig for nybegynnere og de som ønsker å endre navigasjonen på nettsiden deres.
Den første CSS3 rullegardinmenyen er den nyeste i samlingen (fra april 2016). Fordeler med løsningen: i denne horisontale rullegardinmenyen for nettstedet inneholder underelementene ikoner, implementeringen og selve CSS-koden er ganske enkle å forstå og implementere.
Trinn 1 - HTML-oppmerking
Det første trinnet er å lage en uordnet liste i HTML med ankerlenker (#) for elementene. Der, i ett av elementene, legger vi til en annen nestet liste, som vil være ansvarlig for undermenyen.
Trinn 2 - Vis menyen
Vi fjerner unødvendige innrykk i CSS for elementer i den horisontale rullegardinmenyen til nettstedet. På samme trinn vil vi sette en fast bredde og høyde på menyelementene, og også legge til avrundede hjørner.
| .menu, .menu ul, .menu li, .menu a ( margin : 0 ; polstring : 0 ; kantlinje : ingen ; disposisjon : ingen ; ) .menu ( høyde : 40px ; bredde : 505px ; bakgrunn : #4c4e5a ; bakgrunn : -webkit-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; #2c2d33 100% ) ; bakgrunn : -ms-lineær-gradient (topp , # 4c4e5a 0% , # 2c2d33 100 % ) : lineær-gradient (topp , # 4c4e5a 0% , # 2c2d33 100 ; border-radius: 5px; border-radius: 5px; .menu li (posisjon: relativ; listestil: ingen; flyte: venstre; display: blokk; høyde: 40px; |
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(topp, #4c4e5a 0%,#2c2d33 100%); 100%); bakgrunn: -ms-lineær-gradient(top, #4c4e5a 0%,#2c2d33 100%; radius: 5px; -moz-border-radius: 5px
Trinn 3 - kobling
I tillegg til de grunnleggende funksjonene i stiler (font, farge, høyde), bruker vi og skaper en jevn overgang av tekstfarge når du svever. Vi legger også til skilletegn i menyen, og fjerner rammen fra det første elementet til venstre og fra det siste til høyre.
| .menu li a ( display : blokk ; utfylling : 0 14px ; margin : 6px 0 ; linjehøyde : 28px ; tekstdekorasjon : ingen ; kantlinje-venstre : 1px solid #393942 ; kantlinje-høyre: 1px5 solid #4f50 font -familie: Helvetica, sans-serif: fet skrift farge: #f3f3f3 tekst-skygge: 1px 1px rgba (0, 0, 0, .6) overgang: color .2s ease-in-out; moz-overgang: farge .2s ease-in-out; -o-overgang: farge .2s ease-in-out; ( border-venstre : ingen ; ) .menu li: siste-barn a( border-right : ingen ; ) .menu li : hover > a ( farge : #8fde62 ; ) |
Meny li a (display: blokk; utfylling: 0 14px; margin: 6px 0; linjehøyde: 28px; tekstdekorering: ingen; kantlinje: venstre: 1px solid #393942; kantlinje: 1px solid #4f5058; font- familie: Helvetica, sans-serif: font-size: 13px 1px rgba(0,0,0,.6: color .2s ease-in-out; overgang: color .2s ease-in-out; -o-transition: color .2s ease-in-out; color .2s ease-in-out; venstre: ingen; ) .menu li:last-child a( border-right: none; ) .menu li: hover > a ( farge: #8fde62; )
Trinn 4 - undermeny
Siden vi har en rullegardinmeny som bruker CSS, bør vi også angi designet for den nestede listen. Sett først en margin på 40px på toppen og 0px til venstre + legg til avrundede hjørner. For å vise/skjule undermenyen setter du først opacitetsegenskapen til null, og når du holder den til én. For å skape effekten av at en undermeny vises, sett listehøydeverdien til null, og med hover = 36px.
| .menu ul ( posisjon : absolutt ; topp : 40px ; venstre : 0 ; opasitet : 0 ; bakgrunn : #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5px; kantlinje 5px -radius : 0 0 5px ; -webkit-overgang: opasitet .25s letthet .1s ; -moz-overgang: opasitet .25s letthet .1s ; overgang : opasitet .25s ease .1s ; .menu li: hover > ul ( opasitet : 1 ; ) .menu ul li ( høyde : 0 ; overløp : skjult ; polstring : 0 ; -webkit-overgang : høyde .25s letthet . 1s ; -moz-overgang: høyde .25s letthet .1s ; -ms-overgang: høyde .25s letthet .1s ) .menu li: hover ;) |
Meny ul (posisjon: absolutt; topp: 40px; venstre: 0; opasitet: 0; bakgrunn: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- radius: 0 5px 5px; -webkit-overgang: opasitet .25s letthet .1s; -moz-overgang: opasitet .25s letthet .1s; hover > ul ( opasitet: 1; ) .menu ul li ( høyde: 0; overløp: skjult; polstring: 0; -webkit-overgang: høyde .25s letthet .1s; -moz-overgang: høyde .25s letthet .1s; -ms-overgang: høyde .25s letthet .1s; .menu li:hover > ul li (høyde: 36px; overløp: synlig; polstring: 0;)
Vi setter bredden på lenkene = 100px, en kant-bunn kant legges til nederst på alle elementene bortsett fra det siste. Hvis du ønsker det, kan du også plassere bilder for undermenyelementene (obs! ikke glem å endre banene til bildene i koden til de du bruker).
| .menu ul li a ( width : 100px ; polstring : 4px 0 4px 40px ; margin : 0 ; border : none ; border-bottom : 1px solid #353539 ; ) .menu ul li : siste-barn a ( kant ;) .menu a.documents ( bakgrunn : url (../img/docs.png ) no-repeat 6px center ; ) .menu a.messages ( bakgrunn : url (../img/bubble.png ) no-repeat 6px center ; ) .menu a.signout ( bakgrunn : url (../img/arrow.png ) no-repeat 6px center ; ) |
Menu ul li a ( width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539; ) .menu ul li: siste-barn a ( kantlinje: ingen; ). meny a.dokumenter ( bakgrunn: url(../img/docs.png) no-repeat 6px center; ) .menu a.messages ( bakgrunn: url(../img/bubble.png) no-repeat 6px center; ) .menu a.signout ( bakgrunn: url(../img/arrow.png) no-repeat 6px center; )
Jeg personlig liker den enkle implementeringen og bruken av ikoner. Her er den siste koden fra codepen:
Josh Risers alternativ er visuelt lik den forrige rullegardinmenyen for HTML og CSS. Koden har ikke en barnevelger ">" (nyttig i design på flere nivåer), men forfatteren benytter seg godt av CSS3-effekter (overgang, boks-skygge og tekst-skygge) for et vakrere resultat. Linken i kilden beskriver ikke prosessen med å lage en horisontal rullegardinmeny, så jeg vil umiddelbart gi den endelige koden:
I dette eksemplet skal vi se på hvordan man lager en rullegardinmeny ved hjelp av CSS, som i tillegg til elementene vil inneholde en søkeblokk. En lignende implementering kan ofte finnes i moderne . Når det gjelder implementeringstid og kompleksitet, er løsningen litt mer komplisert enn de forrige. Den ble publisert i mai 2013, så det kan hende du må justere noen ting, selv om det fungerte bra i testingen vår.
HTML-kode
For navigering brukes som alltid en uordnet liste (med nav-klassen). Vanlige menyelementer er listeelementer (li) og inneholder lenker (a href) uten klasser eller IDer. Unntaket er 3 spesialiserte elementer i denne horisontale rullegardinmenyen med følgende IDer:
- innstillinger — link bilde;
- søk — en blokk med et søk og en tilsvarende knapp;
- alternativer - inneholder en undermeny (implementert gjennom en liste med undernavigasjonsklassen).
Også i koden vil du se et prefiksfritt skript for bruk av CSS-egenskaper uten prefikser. Den endelige HTML-koden for rullegardinmenyen ser slik ut:
|
-
- Søknad
- Borde
- Alternativer
Meny CSS
1. Grunnleggende stiler og menyelementer
Først spesifiserer vi Montserrat-fonten, en mørkegrå bakgrunn og en fast høyde for menyelementene. Alle elementer har flyte: venstrejustering og relativ posisjonering slik at du senere kan legge til en undermeny med posisjon: absolutt;
| @import url (http: //fonts.googleapis.com/css?family= Montserrat) ; |
* ( margin : 0 ; polstring : 0 ; ) .nav ( bakgrunn : #232323 ; høyde : 60px ; display : inline-block ; ) .nav li ( flyte : venstre ; listestil-type : ingen ; posisjon : relativ ; )
@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( margin: 0; polstring: 0; ) .nav ( bakgrunn: #232323; høyde: 60px; display: inline-block; ) .nav li ( flyte: venstre; listestil-type: ingen; posisjon: relativ; )
2. Formatering av lenker
| Menyelementer bruker det grunnleggende designet + . Høyden er den samme som i nav-klassen. For #settings bildelenken i begynnelsen av menyen, er justeringen satt. |
.nav li a ( skriftstørrelse : 16px ; farge : hvit ; display : blokk ; linjehøyde : 60px ; polstring : 0 26px ; tekstdekorasjon : ingen ; kantlinje til venstre : 1px solid #2e2e2e ; font Mont-famirat , sans-serif ; tekst-skygge : 0 0 1px rgba ( 255 , 255 , 255 , 0.5 ); .nav li a: hover ( bakgrunnsfarge : # 2e2e2e ; ) # innstillinger a ( 2 :px høyde : 18 ; skriftstørrelse: 10px ;
Nav li a (skriftstørrelse: 16px; farge: hvit; skjerm: blokk; linjehøyde: 60px; polstring: 0 26px; tekstdekorasjon: ingen; kantlinje: 1px solid #2e2e2e; font-familie: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5) -størrelse: 10px linjehøyde: 24px)
3. Søkeblokk
| #search ( width : 357px ; margin : 4px ; ) #search_text ( width : 297px ; padding : 15px 0 15px 20px ; font-size : 16px ; font-family : font-family : Montsans-s px ; margin-right : 0 ; color : white : #1f7f5c : border-box ; plassholder ( /* Mozilla Firefox 4 til 18 */ farge : hvit ; ) :: -moz-plassholder ( /* Mozilla Firefox 19+ */ farge : hvit ; ) : -ms-input-plassholder ( /* Internet Explorer 10+ */ farge: hvit; ; tekst-align: center; |
#søk ( width: 357px; margin: 4px; ) #search_text( width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif 0 non border: 5 px; ; margin-right: 0; disposisjon: ingen: venstre side:- Firefox 4 til 18 */ farge: hvit ) ::-moz-plassholder ( /* Mozilla Firefox 19+ */ farge: hvit; ) : -ms-input-plassholder ( /* Internet Explorer 10+ */ farge: hvit ; ) #search_text:focus ( bakgrunn: rgb(64, 151, 119); ) #search_button ( kantlinje: 0 ingen; bakgrunn: #1f7f5c url (search.png) senter ingen repetisjon; flyte: venstre; tekstjustering: 52px;
4. Rullegardin undermeny
Den siste berøringen vil tillate oss å lage en rullegardinmeny i CSS som utløses for det siste #options-elementet.
| #alternativer a( kantlinje-venstre : 0 ingen ; ) #alternativer > a ( bakgrunnsbilde : url (triangle.png ) ; bakgrunnsposisjon : 85% sentrum ; bakgrunns-repetisjon : ingen repetisjon ; utfylling-høyre : 42px ; ) .subnav ( synlighet : skjult ; posisjon : absolutt ; topp : 110% ; høyre : 0 ; bredde : 200px ; høyde : auto ; opasitet : 0 ; overgang : alle 0.1s ; bakgrunn : #232323 ; av li .subnav . : ingen ; ) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options : hover .subnav ( synlighet : synlig ; topp : 100 % ; opasitet : 1 ; ) |
#options a( border-left: 0 none; ) #options>a (bakgrunnsbilde: url(triangle.png); bakgrunnsposisjon: 85% sentrum; bakgrunnsgjentakelse: ingen repetisjon; polstring-høyre: 42px; ) .subnav ( synlighet: skjult; posisjon: absolutt; topp: 110%; høyre: 0; bredde: 200px; høyde: auto; opasitet: 0; overgang: alle 0.1s; bakgrunn: #232323; ) .subnav li ( flyte : ingen; ) .subnav li a (border-bottom: 1px solid #2e2e2e; ) #options:hover .subnav (synlighet: synlig; topp: 100%; opasitet: 1;)
I stilene finner du innsetting av et trekantbakgrunnsbilde (triangle.png) for å indikere undermenyen - ikke glem å angi riktig bane for dette og andre bilder i eksemplet. Utseendet til en undermeny implementeres ved å bruke egenskapen opacity. Endelig løsning på codepen:
Dette alternativet bruker hovedsakelig CSS2.1-teknikker, løsningen pluss eller minus er ny - for mars 2015. Hvis du mangler ett undernivå i en horisontal rullegardinmeny for et nettsted, så inneholder dette eksemplet tre samtidig. Ved å bruke pseudo-class:only-child legges et "+"-symbol til elementer for å indikere tilstedeværelsen av en undermeny.
Alt i alt et godt og enkelt eksempel. Vi vil ikke beskrive implementeringsprosessen i detalj, fordi... det ligner på de forrige - først lager du et HTML-rammeverk, og deretter legger du gradvis til stiler for det. Last ned den endelige koden ved å bruke lenken til kilden, du kan delvis se den i Codepen:
Total
Ovenfor så vi på 4 alternativer for hvordan lage en rullegardinmeny ved å bruke CSS + HTML for, selv om det finnes mange flere lignende eksempler på Internett. Det finnes løsninger med jQuery, men dette er mest sannsynlig bare nyttig for å implementere noen spesialeffekter og ikke-standardoppgaver. I de fleste tilfeller vil en kombinasjon av CSS + HTML være nok, spesielt siden hovedkravene til en meny nå er bekvemmelighet og rask lastehastighet.
Til slutt to merknader om kodene ovenfor. Noen eksempler bruker bilder i CSS for rullegardinmenyen, så du må nøye gjennomgå bildebanene og oppgi de riktige verdiene for nettstedet ditt. For det andre er noen av løsningene 2-3 år gamle, så du bør nok en gang i tillegg sjekke ytelsen i forskjellige nettlesere.
Hvis du kjenner til andre interessante moderne implementeringer av horisontale rullegardinmenyer for et nettsted, send lenker i kommentarfeltet.
Hei alle sammen. I dag vil vi fortsette vårt emne om rullegardinmenyer og snakke om hvordan du gjør det. Som vanlig vil en demovisningsmodus være tilgjengelig for hvert eksempel, samt filer for nedlasting.
Hvis du kom til denne siden ved et uhell eller var på utkikk etter en annen, anbefaler jeg deg å følge lenken, det er mange forskjellige menyer for nettstedet samlet der.
Det er ganske mange vertikale menyer for nettsteder, i denne opplæringen vil jeg vise deg bare en vertikal rullegardinmeny på CSS når du holder musepekeren med en rullegardin til høyre og venstre, samt rullegardinmenyer på flere nivåer . Andre alternativer for vertikale menyer for nettstedet vil bli beskrevet i de følgende leksjonene. Og så vil vi overtre.
Sidenavigering:
Som en introduksjon synes jeg det er verdt å fortelle hvordan frafall fungerer i CSS.
Alle nettlesere som kjører fra en PC eller bærbar PC har egenskapen :hover tilgjengelig i CSS (jeg tar litt feil her, det er en pseudoklasse :) på grunnlag av denne kan du bygge nesten hvilken som helst vertikal rullegardinmeny.
Men hva skal man gjøre med mobilnettlesere? - eller på nettbrett spør du.
Heldigvis har utviklere av mobilnettlesere gitt (dessverre ikke overalt) muligheten til å utløse pseudo-class:hoveren ved første klikk på en lenke, hvis den er beskrevet i CSS. Takket være denne innsatsen vil de fleste brukere kunne se din vertikale rullegardinmeny for CSS.
Noen få ord om fordelene med rullegardinmenyer:
- du kan passe veldig lange menyer på begrenset plass;
- designet blir mer elegant;
- atferdsfaktorer forbedres delvis.
Jeg presenterer for deg det første eksemplet: en enkel vertikal rullegardinmeny til høyre når du peker.
Vi vil begynne å skrive menyen med html-kode og gjøre den universell for lister, svaralternativet er identisk med det wordpress returnerer.
Html for vertikal menyJeg tror du ikke vil ha noen vanskeligheter når det gjelder å forstå html, typiske lister med ul- og li-tagger. La oss se på koden:
- Første service
- Andre tjeneste
- Slipp 1
- Slipp 2
- Tredje
- Slipp fra tredje tjeneste 1
- Slipp fra den tredje tjenesten 2
- Kort utbrudd
- 4 tjeneste
- 5 tjeneste
- 111111
- 2222 2222
- 6 tjeneste
- 7 tjeneste
- 8 tjeneste
Meny for et nettsted basert på lister: noen elementer har rullegardinblokker, noen ikke. Alt er ekstremt enkelt, jeg tror ingen forklaring er nødvendig.
Vertikal rullegardinmeny CSSMed CSS-stiler er problemet litt mer komplisert. Jeg vil kun vise deg koden til selve menyen, og du kan se resten av stilene når du laster ned eksemplet.
#menuVertical(width:100%;height:auto;) #menuVertical ul( display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; ) # menuVertical ul li(display:block; width:100%; height:auto; position:relative;) #menuVertical ul li a(posisjon:relative; display:block; width:100%; height:auto; box-sizing:border -boks; font-size:13px; ;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( bakgrunn:#0A3CC1; ) #menuVertical ul li ul(posisjon:absolutt; topp:0px; venstre:100%; display:ingen; width:auto ; ) /*******vis rullegardin på hover********/ #menuVertical ul li: hover ul(display:block;) #menuVertical ul li ul li a( white-space:nowrap; text-transform:none; padding:5px 20px ) #menuVertikal ul li ul li a:hover( bakgrunn:#75C1D4;
farge:#0A3CC1;
)
Her er denne linjen med CSS
#menuVertikal ul li:hover ul(display:block;)
Ansvarlig for å falle ut. Den viser en rullegardinblokk når du holder musepekeren. De resterende stilene trengs for å style selve menyen, samt riktig plassering av lister/menyelementer.
Du kan se hva vi fikk i dette eksemplet på huden:
Du kan se hvordan en vertikal css-rullegardinmeny fungerer i demomodus nedenfor, eller ved å laste ned et eksempel:
Her er et enkelt eksempel på en rullegardinmeny som jeg kom opp med.La oss si at du må lage en rullegardinmeny ved å holde musepekeren med en rullegardin til venstre. Basert på eksemplet med et fall til høyre, skal vi nå implementere det.
Venstre vertikal rullegardinmeny i CSS
For mer komplekse menyer, må du gjøre noen flere endringer. La oss se på stilene:
#menuVertical(width:100%;height:auto;) #menuVertical ul( display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; ) # menuVertical ul li(display:block; width:100%; height:auto; position:relative;) #menuVertical ul li a(posisjon:relative; display:block; width:100%; height:auto; box-sizing:border -boks; font-size:13px; ;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( bakgrunn:#0A3CC1; ) #menuVertical ul li ul(posisjon:absolutt; topp:0px; høyre:100%;/*endret her*/ display :none; width:auto ) /*******vis rullegardinmenyen på hover ******** / #menuVertical ul li:hover ul(display:block;) #menuVertical ul li ul li a ( white-space:nowrap; text-transform:none; padding:5px 20px; ) #menuVertikal ul li ul li a:hover( bakgrunn:#75C1D4;
farge:#0A3CC1;
Det er alt. Vi endte opp med denne menyen. Til venstre er et klikkbart skall, til høyre er en demo og en lenke for å laste ned eksemplet:
Vertikal flernivåmeny
- Første service
- Andre tjeneste
- Slipp 1
- Slipp 2
- I det virkelige liv er vertikale flernivåmenyer som faller ned når du peker, ganske sjeldne. Jeg ønsket å vise et par eksempler fra oppbevaringen min, men jeg kunne dessverre ikke finne dem. jeg skal gjøre det :) Det er ikke noe komplisert i disse menyene for nettstedet, typisk CSS for en rullegardin.
- Slipp fra tredje tjeneste 1
- I det virkelige liv er vertikale flernivåmenyer som faller ned når du peker, ganske sjeldne. Jeg ønsket å vise et par eksempler fra oppbevaringen min, men jeg kunne dessverre ikke finne dem. jeg skal gjøre det :) Det er ikke noe komplisert i disse menyene for nettstedet, typisk CSS for en rullegardin.
- La oss begynne. La oss starte med HTML-koden. Vi vil legge til flere ul li-lister for de neste nivåene på nettstedet. Mitt eksempel vil ha 3 rullegardinundermenyer, så html-koden vil være slik:
- Det er ytterligere fall
- Det er et nedtrekk lenger
- Det er et nedtrekk lenger
- Punkt 1
- La oss begynne. La oss starte med HTML-koden. Vi vil legge til flere ul li-lister for de neste nivåene på nettstedet. Mitt eksempel vil ha 3 rullegardinundermenyer, så html-koden vil være slik:
- Kort utbrudd
- Kort utbrudd
- Kort utbrudd
- 4 tjeneste
- 5 tjeneste
- 111111
- 2222 2222
- 6 tjeneste
Frafall slutt
#menuVertical(width:100%;height:auto;) #menuVertical ul( display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; ) # menuVertical ul li(display:block; width:100%; height:auto; position:relative;) #menuVertical ul li a(posisjon:relative; display:block; width:100%; height:auto; box-sizing:border -boks; font-size:13px; font-weight:line-height:15px; :0px;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( bakgrunn:#0A3CC1; ) #menuVertical ul li ul(posisjon:absolutt; topp:0px; venstre:100%; display:ingen; bredde :150px; ) /*******vis rullegardin på hover********/ #menuVertical ul li:hover > ul(display:block;) #menuVertical ul li ul li a( tekst-transform :ingen; polstring:5px 20px;
farge:#0A3CC1;
)
Dette er stiler for å lage en vertikal rullegardinmeny på flere nivåer til høyre når du peker. Alternativet med et fall til venstre vil være litt lenger. La oss se nedenfor hva vi fikk på bildet (klikkbar hud).
- La oss implementere ideen vår ved å bruke den vanligste CSS. I den neste artikkelen, hvis jeg husker, vil jeg beskrive den samme effekten ved å bruke jQuery. Men for nå, la oss begynne å analysere denne metoden. Men først vil jeg foreslå å se på hva som skjer til slutt:
- Først av alt, la oss skrive HTML-koden for menyen vår. Menyen vil være enkel. For eksempel vil den ha 2 elementer, som hver vil ha en nedtrekksliste med underelementer.
- punkt 1
- Rullegardinelement 1
- Rullegardinelement 2
- Først av alt, la oss skrive HTML-koden for menyen vår. Menyen vil være enkel. For eksempel vil den ha 2 elementer, som hver vil ha en nedtrekksliste med underelementer.
- punkt 1
- Rullegardinelement 1
Rullegardinelement 3
#slow_nav > ul( width: 500px; margin:25px auto 0; ) #slow_nav > ul > li( list-style: none; display: inline-block; position:relative; padding:0; ) #slow_nav a(tekst- dekorasjon:ingen;) #slow_nav > ul > li > a( font-size:18px; padding:5px; background-color:#333; color:#fff; ) #slow_nav li ul(posisjon:absolutt; listestil: ingen; tekst-align: center: font-size: 15px margin: /* Disse linjene er nødvendige for at animasjonen skal fungere korrekt ; -moz-transition:max-height 0.4s linear; /* end */ ) #slow_nav li:hover ul( max-height :300px; ) #slow_nav li ul li( bakgrunnsfarge:#333; border-bottom: 1px solid #888; ) #slow_nav li ul li:last-child( border-bottom:none; ) #slow_nav li ul li a ( padding:5px 12px; farge:#fff; display:block; ) #slow_nav li ul li :hover( bakgrunnsfarge:#444; ) #slow_nav li ul li:first-child( margin-top:25px; posisjon: relativ; ) #slow_nav li ul li:first-child:before( innhold:""; posisjon:absolutt; width:1px; height:1px; border:5px solid transparent; border-bottom-color:#333; left:10px; top :-10px)
CSS-koden er ikke liten, men den er ikke iboende kompleks. Hvis du har ferdigheter i layout, kan du enkelt finne ut hva og hvordan. Jeg vil bare trekke frem noen punkter som er viktige.
Det første er selve animasjonen. Den nødvendige koden er uthevet i kommentarene i koden - /* Disse linjene er nødvendige for at animasjonen skal fungere korrekt */ . Du kan ikke slette fra, ellers slutter animasjonen å fungere. I denne kodebiten satte vi først høyden til null piksler -
max-height:0px;
og sett egenskapen overflow:hidden; for å skjule barnemenyen vår, det vil si rullegardinmenyen. Deretter setter vi opp overgangsegenskapen på tvers av nettlesere, som vil utføre animasjonen.
Webkit-transition:max-height 0,4s lineær; -moz-overgang:maks-høyde 0,4s lineær; overgang: maks-høyde 0,4s lineær;
Her kan du kun endre animasjonstiden. Tiden er for øyeblikket satt til 0,4 sekunder. Umiddelbart etter innstilling av animasjonen, ble det lagt til en egenskap for å sette en ny høyde når du svever over hovedmenyelementene:
#slow_nav li:hover ul( max-height:300px; )
Denne metoden kan brukes ikke bare på selvskrevne menyer, men også på de samme dynamiske menyene som er laget av innholdsstyringssystemer, for eksempel WordPress. For å gjøre dette må du justere stilene litt, og det er det. Det vil si at du ikke trenger å bruke den første HTML-koden, bare stiler. I stilene må du erstatte ID-navnet #slow_nav med det du har, og kanskje rette på noen andre småting. Jeg vil ikke gå i detalj. Hver sak krever en personlig tilnærming, så unnskyld meg :) Jeg ga en idé og en metode, og det er opp til deg å bestemme om du vil bruke den eller ikke.
Det er alt, takk for oppmerksomheten. 🙂
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 på nettstedet. Den enkleste måten å legge til en navigasjonslinje på nettstedet ditt er å lage en meny ved hjelp av CSS og HTML.Vertikal meny
Om oss
Vår neste oppgave er å tilbakestille standard listestiler. Vi må fjerne den ytre og indre polstringen fra selve listen og kulene fra listeelementene. Still inn ønsket bredde:
#navbar ( margin: 0; utfylling: 0; listestil-type: ingen; bredde: 100px; ) Nå er det på tide å style lenkene selv. Vi vil legge til en bakgrunnsfarge til dem, endre tekstparametrene: farge, skriftstørrelse og vekt, fjerne understrekingen, legge til små innrykk og omdefinere 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.
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:
Dokumenttittel #navbar ( margin: 0; utfylling: 0; listestil-type: ingen; width: 100px; ) #navbar li ( kantlinje-venstre: 10px solid #666; border-bottom: 1px solid #666; ) # navbar a ( bakgrunnsfarge: #949494; farge: #fff; polstring: 5px; tekstdekorasjon: ingen; font-weight: bold; border-venstre: 5px solid #33ADFF; display: block; )
Prøv »Når du holder musepekeren over et menyelement, kan dets utseende endres, noe som tiltrekker seg 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 menyI 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 opprettes ved å style en vanlig liste. Vis egenskap for elementer
For å plassere menyelementer horisontalt, lag først en 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å er det bare å definere stylingen 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 »
RullegardinmenyMenyen vi skal lage vil ha hovednavigasjonslenker plassert i den horisontale navigasjonslinjen, og underelementer som kun vises når musepekeren holder over menyelementet som disse underelementene relaterer seg 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
Prøv »
La oss nå begynne å skrive CSS-kode. Først må du skjule listen med underelementer ved å bruke displayet: ingen, slik at de ikke vises på nettsiden hele tiden. For å vise underelementer trenger vi det når vi holder musepekeren over et element
#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; høyde: 100%; ) #navbar li a (display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; ) #navbar ul li ( flyte: ingen; ) #navbar li:hover ( bakgrunnsfarge: #f90; ) #navbar ul li:hover ( bakgrunnsfarge: #666; )
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 enkelt ved å bruke 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årGenerelt sett, la oss først bestemme hvordan vi skal lage selve menyen. I html5 er standardmåten å lage den i nav-beholderen ved hjelp av en punktliste. La oss gjøre akkurat det. Vi vil fjerne markørene senere ved å bruke css, vi trenger dem ikke i menyen.
Egentlig vil jeg umiddelbart skrive markering med nestede lister i html. 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 et viktig poeng her, som er at du kanskje ikke trenger å rulle ned 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 = "#" >Punkt 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 identifikatoren nav, og alle nestede lister stilklassen nummer to for å forstå at de er nestet.
Flott, vi har markeringen klar, du kan se på resultatet:
Ja, det ser forferdelig ut. Men nå vil vi aktivere css og om noen minutter vil navigasjonen vår bli transformert. La oss jobbe.
Skrive CSS-stilerDet 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 polstringen skal fungere og alle egenskaper påføres riktig. Deretter spesifiserer jeg fargene på bakgrunnen, tekst, rammeparametere, intern polstring og tekstjustering til midten. 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 dette tilfellet brukte vi ikke tegnet >, så reglene ovenfor vil gjelde for alle lenker, inkludert de 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 element. 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 gir vi dem absolutt posisjonering og toppkoordinat: 100 %. Dette betyr at rullegardinmenyen vises tydelig under hovedelementet det tilhører, tydelig i 100 % av elementets høyde.
Nå ser vi bare hovedmenyen på nettsiden, som er det vi trenger.
La oss implementere frafalletDet 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 musepekeren 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 utmerket. Når du holder markøren over hovedelementet, vises en rullegardinmeny som tilsvarer det. Hvis du flytter markøren til siden, forsvinner den. Hvis du flytter markøren til de nestede elementene selv, kan du klikke på dem og gå til ønsket del av nettstedet. Derfor har vi laget en veldig enkel og lett rullegardinmeny med absolutt ingen skript.
Konvertering av menyen til vertikalVel, ok, vi har helt funnet ut horisontal navigering, men i tillegg er vertikal navigering veldig vanlig 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. Slik:
#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åerVed å 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.