Rullegardinmeny for CSS3. Få fullversjonen

CSS3 endrer teknologien for å lage nettsteder. Mens mange er motvillige til å begynne å bruke CSS3 på grunn av mangelen på støtte i enkelte nettlesere, er det de som går videre og lager fantastiske ting ved å bruke de fantastiske funksjonene til CSS3. Du trenger ikke lenger stole på skript og bilder for å lage stilige nettsideelementer som knapper og menyer.

Du kan lage en moderne meny uten Javascript eller bilder ved å effektivt bruke de nye CSS3-egenskapene: kantradius og animasjon. Denne menyen fungerer utmerket med Firefox, Opera, Chrome og Safari. Rullegardinmenyen fungerer også i nettlesere som ikke støtter CSS3, for eksempel IE7+, men avrundede hjørner og skygger vil ikke vises. CSS3-effekter vil en dag erstatte alle jQuery-animasjoner som designere bruker.

Menyfunksjoner Hent fullversjon

Det kreves et gebyr for kommersiell bruk. Bedriftsversjonen av CSS3Menu gir i tillegg muligheten til å lage en flerkolonnemeny og inkluderer et utvidet sett med menymaler og ikoner.

Når du har fullført betalingen via et sikkert skjema, vil du umiddelbart motta lisensinformasjonen din via e-post. Du kan velge den mest passende betalingsmåten: kredittkort, bankoverføring, sjekk, PayPal, etc.

Last ned gratis versjon
for Windows og Mac
Last ned kommersiell versjon
for Windows og Mac - $59

Hjelp Hvordan lage en stilig animert CSS3-meny uten JavaScript

1) Åpne CSS3 Meny-applikasjonen, klikk på knappene "Legg til element" og "Legg til undermeny" på CSS3-menyens verktøylinje for å lage en meny. Du kan også bruke knappen "Slett element" for å fjerne noen knapper.

2) Bruk ferdige maler. For å gjøre dette, velg temaet du liker fra "Maler"-listen. Dobbeltklikk på et tema for å bruke det.

3) Tilpass utseendet på menyen.
3.1. Klikk på elementet og endre innstillingene for knapputseende for normale tilstander og tilstander med sveve, angi koblingen og verdien for målattributtet på fanen "Hovedmeny".
3.2. Klikk for å velge et element og endre utseende undermeny for normal- og hover-tilstander, angi koblingen og målattributtverdien i fanen Undermeny.

4) Lagre menyen.
4.1. Lagrer prosjektfilen. For å lagre prosjektet, klikk på "Lagre"-knappen på verktøylinjen eller velg "Lagre" eller "Lagre..." i hovedmenyen.
4.2. Publisering av menyer i HTML-format. For å gjøre dette, klikk på "Publiser"-knappen på verktøylinjen.

Ta kontakt med oss

CSS3-meny
Hvis du finner feil i driften av programmet, eller har spørsmål eller forslag, ta kontakt teknisk støtte. Sørg for at e-posten din inneholder informasjon om nettleseren din, OS, CSS3Menu-versjonen og en lenke til siden din. I de fleste tilfeller vil du motta svar innen én virkedag. Vennligst les FAQ først. Spørsmålet ditt er kanskje allerede besvart.
E-post:

De fleste klassiske nettsteder på Internett bruker horisontal meny som hovednavigasjonselementet. Noen ganger kan det inneholde forskjellig ekstra sjetonger— design på flere nivåer, ikoner for underelementer, søkeblokk, komplekse lister og så videre. Nylig var det et lite utvalg på bloggen, men i dag skal vi se på 4 praktiske eksempler hvordan lage 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 av nettstedets horisontale rullegardinmeny. På samme stadium vil vi installere fast bredde og høyden på menyelementene, og legg også 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% ); bakgrunn : -moz-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; bakgrunn : -o-linear-gradient (top , #4c4e5a 0% , #2c2d33 100% ) ; bakgrunn : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; bakgrunn : linear-gradient(top , #4c4e5a 0% 2c2d33 100% ); -webkit-border-radius: 5px ; -moz-border-radius: 5px ; border-radius : 5px ; ) .menu li (posisjon : relativ ; listestil : ingen ; flytende : 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(top, #4c4e5a 0%,#2c2d33 100%); bakgrunn: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); bakgrunn: -o-linear-gradient( topp, #4c4e5a 0%,#2c2d33 100%); bakgrunn: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); bakgrunn: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; .menu li (posisjon: relativ; listestil: ingen; flytende: venstre; display: blokk ; høyde: 40px;)

Trinn 3 - kobling

I tillegg til de grunnleggende funksjonene i stiler (font, farge, høyde), bruker og lager vi Glatt overgang hover tekstfarger. 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, Arial, sans-serif ; font-weight : bold ; font-size : 13px ; farge : #f3f3f3 ; text-shadow : 1px 1px 1px rgba (0 , 0 , 0 , -.6t)- overgang: farge .2s ease-in-out; -moz-transition: farge .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in -ut; overgang : farge .2s lett-inn-ut; ) .menu li: førstebarn a (kant-venstre : ingen ; ) .menu li: siste barn a( kant-høyre : 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, Arial, sans-serif; font-weight: fet; font-size: 13px; farge: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : farge .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in- ut; overgang: farge .2s 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: #8fde62; )

Trinn 4 - undermeny

Siden vi har en rullegardinmeny som bruker CSS, bør vi også angi et design 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 undermenyer må du først angi gjennomsiktighetsegenskapen (opasitet) lik null, og når du svever - en. For å skape effekten av at en undermeny vises, sett verdien av listehøyden 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 5px ; -webkit-overgang: opacity .25s ease .1s ; -moz-transition: opacity .25s ease .1s ; -o-transition: opacity .25s ease .1s ; -ms-transition: opacity .25s letthet .1s ; overgang : opasitet .25s letthet .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 ; -o-overgang: høyde .25s letthet .1s ; -ms-overgang: høyde .25s letthet .1s ; overgang : høyde .25s letthet .1s ; ) .menu li: hover > ul li ( høyde : 36px ; overløp : synlig ; polstring : 0 ; )

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 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity . 25s letthet .1s; overgang: opasitet .25s letthet .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; -o-overgang: høyde .25s letthet .1s; -ms-overgang: høyde .25s letthet .1s; 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 endelige 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 i dette eksemplet Vi skal 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:

applikasjon
Borde
Alternativer
- Innstillinger
- applikasjon
- Borde
- Alternativer

applikasjon
Borde
Alternativer
- Innstillinger
- applikasjon
- 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 ; text-shadow : 0 0 1px rgba ( 255 , 255 , 255 , 0.5 ) ; ) .nav li a: hover ( bakgrunnsfarge : #2e2e2e ; ) #settings a ( padding : 18 :px høyde : 18x ; skriftstørrelse : 10px ; linjehøyde : 24px ; )

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); ) .nav li a:hover ( bakgrunnsfarge: #2e2e2e; ) #settings a ( padding: 18px; høyde: 24px; skriftstørrelse: 10px; linjehøyde: 24px; )

3. Søkeblokk

Dette elementet har en fast bredde og består av flere deler - et inndatafelt (#søk_tekst) med grønn bakgrunn og en søkeknapp (#søk_knapp). I noen nettlesere kan bakgrunnsfargen være grå.

#search ( width : 357px ; margin : 4px ; ) #search_text ( width : 297px ; padding : 15px 0 15px 20px ; font-size : 16px ; font-family : font-family : fonts-5 2px ; marg-høyre : 0 ; farge : hvit ; kontur : ingen ; bakgrunn : #1f7f5c ; float : venstre ; boksstørrelse : kantboks ; overgang : alle 0.15s ; ) :: -webkit-input-plassholder ( /* WebKit-nettlesere */ farge: hvit; ): -moz-plassholder ( /* Mozilla Firefox 4 til 18 */ farge: hvit; ) :: -moz-plassholder ( /* Mozilla Firefox 19+ */ farge: hvit ; ) : -ms-input-plassholder ( /* Internet Explorer 10+ */ farge : hvit ; ) #søketekst : fokus ( bakgrunn : rgb (64 , 151 , 119 ) ; ) #søkeknapp ( kantlinje : 0 ingen ; bakgrunn : #1f7f5c url (search.png ) senter ingen repetisjon ; bredde : 60px: venstre; : 0 ; tekstjustering : senter ; høyde : 52px ; markør : peker ; )

#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; farge: hvit; disposisjon: ingen; bakgrunn: #1f7f5c; float: venstre; boksstørrelse: kantlinje; overgang: alle 0.15s; ) ::-webkit-input-placeholder ( /* WebKit-nettlesere */ farge: hvit; ) :-moz-plassholder ( /* Mozilla Firefox 4 til 18 */ farge: hvit; ) ::-moz-plassholder ( /* Mozilla Firefox 19+ */ farge: hvit; ): -ms-input-placeholder ( /* Internet Explorer 10+ */ farge: hvit; ) #søketekst:fokus (bakgrunn: rgb(64, 151, 119); ) #søkeknapp (kant: 0 ingen; bakgrunn: #1f7f5c url (search.png) senter ingen gjentakelse; bredde: 60px; flyte: venstre; utfylling: 0; tekstjustering: senter; høyde: 52px; markør: peker; )

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 ( kant-bunn : 1px solid #2e2e2e ; ) #alternativer : 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 et innlegg bakgrunnsbilde triangle (triangle.png) for å indikere en undermeny - 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:

I dette alternativet CSS2.1-teknikker brukes hovedsakelig, 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 hastighet nedlastinger.

Til slutt to merknader om kodene ovenfor. Noen eksempler bruker bilder for rullegardinmenyen i CSS, så du må nøye gjennomgå bildebanene og spesifisere riktige verdier 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.

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 linker 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 ved hjelp av CSS og HTML.

Vertikal meny

Det første trinnet i å lage en vertikal meny er å lage 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:

Vår neste oppgave er å tilbakestille standard listestiler. Vi må fjerne eksterne og polstring ved selve listen og markører ved 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: 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:

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 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 opprettes ved å style en 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 linker:

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 »

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 er konvertert igjen til blokkelement:

#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; )

Rullegardinmeny i CSS3 basert på brukergrensesnittet laget av Vladimir Kudinov - impresjonistisk brukergrensesnitt

HTML

Først, la oss lage en enkel liste:

CSS

La oss starte med å fjerne polstring (indre og ytre), kanter og konturer fra alle menyelementene våre.

Deretter legger vi til en fast høyde og bredde, runder hjørnene og legger til en CSS3-gradient. For å plassere koblingene horisontalt, bruk float:left , pluss angi relativ posisjonering for ytterligere justering av undermenyen:

For å designe menykoblingene, la oss legge til noen grunnleggende CSS-egenskaper, for eksempel farge, utfylling, fonter, etc.

Deretter vil vi legge til en skygge for teksten og en overgang for jevn endring koblingsfarger når du holder musepekeren. For å opprette en koblingsseparator, legg til en kantlinje på venstre og høyre side, og fjern deretter venstre kant for den første koblingen og høyre kant for siste lenke.

La oss nå gå videre til undermenyen.

La oss først installere absolutt posisjonering med en margin på 40px øverst og 0px til venstre for menyelementene og legg til avrundinger for hjørnene. La oss sette opasiteten til 0, og ved å holde musepekeren til 1. For lysbildeeffekten (opp/ned) må vi sette listehøyden til 0px in skjult tilstand, og 36px i hover-tilstand.

La oss sette bredden på undermenyen til 100px og legge til en bunnkant som skilletegn. For den siste lenken vil vi fjerne den nederste kantlinjen.

Menu ul li a ( width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539; ) .menu ul li:last-child a ( kantlinje: ingen; )

Til slutt må vi legge til ikoner til hver undermenykobling. For å gjøre dette, for hver lenke vil vi lage vår egen klasse og tilordne den som bakgrunn bildet ditt:

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; )

Habr, hei!

Mye vises på Codepen gode beslutninger fra forskjellige spesialister, og jeg mener at de beste av dem bør samles på ett sted. Derfor begynte jeg for 2 år siden å spare på datamaskinen min interessante manus om ulike emner.

Jeg pleide å legge dem ut i produktgruppen mr cloud IDE. Gefest, dette var sammenstillinger av 5-8 løsninger. Men nå har jeg begynt å samle 15-30 skript i forskjellige emner (knapper, menyer, verktøytips og så videre).

Slike store sett bør vises mer spesialister. Det er derfor jeg legger dem ut på Habr. Jeg håper de vil være nyttige for deg.

I denne anmeldelsen skal vi se på flernivåmenyer.

Flat horisontal navigering

Vakker navigasjonslinjen med en jevnt vises undermeny. Koden er godt strukturert og bruker js. Etter funksjonene som brukes, fungerer den i ie8+.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header m/ Justert dropdowns

Adaptiv lenkelinje med to-kolonne undermeny. Alt gjøres i css og html. Brukte css3-velgere som ikke støttes i ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Glatt trekkspill rullegardinmeny

Stilig vertikal meny med lett åpnende elementer. Transition, transform js-kode brukes.
http://codepen.io/fainder/pen/AydHJ

Pure CSS Dark Inline Navigation Menu

Mørk vertikal navigasjonslinje med ikoner fra ionikoner. JavaScript brukes. I ie8 vil det mest sannsynlig fungere uten animasjon.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Ren CSS3 Mega rullegardinmeny med animasjon

Stilig meny med to utdataformater: horisontal og vertikal. Ikoner og CSS3-animasjon brukes. Det vil definitivt se forferdelig ut i ie8, men i andre nettlesere er alt kult.
Vertikal lenke: http://codepen.io/rizky_k_r/full/sqcAn/
Link til horisontal: http://codepen.io/rizky_k_r/pen/xFjqs

CSS3 rullegardinmeny

Horisontal meny med store elementer og en rullegardinliste med lenker. Ren og minimalistisk kode uten js.
http://codepen.io/ojbravo/pen/tIacg

Enkel Pure CSS rullegardinmeny

Enkel, men stilig horisontal meny. Bruker font-awesome. Alt fungerer på css og html, uten js. Det vil fungere i ie8.
http://codepen.io/Responsive/pen/raNrEW

Bootstrap 3 mega-rullegardinmeny

En utmerket løsning for nettbutikker. Viser flere nivåer av kategorier og store bilder (for eksempel et produkt på salg). Den er basert på boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Flat navigasjon

Stilig navigasjonslinje med jevn undermeny. I eldre nettlesere vil det vise problemer.
http://codepen.io/andytran/pen/YPvQQN

3D nestet navigasjon

Horisontal meny med veldig kul animasjon uten js!
http://codepen.io/devilishalchemist/pen/wBGVor

Responsive Mega Menu - Navigasjon

Horisontal responsiv meny. Det ser bra ut, men mobilversjonen er litt halt. CSS, html og js brukes.
http://codepen.io/samiralley/pen/xvFdc

Ren Css3-meny

Original meny. Med enkel og ren kode uten js. Bruk for "wow"-effekter.
http://codepen.io/Sonick/pen/xJagi

Full CSS3 rullegardinmeny

Fargerik rullegardinmeny med ett hekkenivå. Ikoner fra font-awesome, html og css brukes.
http://codepen.io/daniesy/pen/pfxFi

Css3 bare rullegardinmeny

En ganske god horisontal meny med tre nivåer av hekking. Fungerer uten js.
http://codepen.io/riogrande/pen/ahBrb

Rullegardinmenyer

Minimalistisk meny med original effekt utseendet til en nestet liste med elementer. Jeg er glad for at denne løsningen også er uten javascript.
http://codepen.io/kkrueger/pen/qfoLa

Ren CSS DropDown Meny

Primitivt, men effektiv løsning. Kun css og html.
http://codepen.io/andornagy/pen/xhiJH

Pull Menu - Meny Interaction Concept

Interessant menykonsept for mobiltelefon. Jeg har aldri sett noe lignende før. Bruker html, css og javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Lag en enkel rullegardinmeny

Ren og enkel kode, ingen js. Det vil definitivt fungere i ie8.
http://codepen.io/nyekrip/pen/pJoYgb

Ren CSS-rullegardin

Løsningen er ikke dårlig, men den bruker for mange klasser. Jeg er glad det ikke er noen js.
http://codepen.io/jonathlee/pen/mJMzgR

Nedtrekksmenyen

Fin vertikal meny med minimalt med javascript-kode. JQuery brukes ikke!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 rullegardinmeny

En horisontal meny med ekstra bildetekster kan dekorere nettstedet ditt godt. Koden er enkel og oversiktlig. Javascript brukes ikke.
http://codepen.io/ibeeback/pen/qdEZjR

Nydelig løsning med stort beløp kode (html, css og js). 3 undermenyformater er opprettet. Løsningen egner seg godt for nettbutikker.
http://codepen.io/martinridgway/pen/KVdKQJ

CSS3 Meny Dropdowns (spesiell løsning)!

Mørk horisontal meny med tretten (13) animasjonsalternativer! Jeg anbefaler deg definitivt å lese den, den vil være nyttig i hverdagen.
http://codepen.io/cmcg/pen/ofFiz

P.S.
Jeg håper du likte samlingen med 23 løsninger. Hvis du vil fortsette å lese dem, så ta undersøkelsen nedenfor.
Nyt arbeidet deres alle sammen.