Share
Mega-menyer blir ofte mer og mer populære på e-handel eller på store sider, da de tilbyr en effektiv løsning for å vise mye innhold, samtidig som de holder et rent layout. I denne opplæringen lærer vi hvordan du bygger en kryssbrowser, fantastisk CSS-bare rullegardinmenymeny, ved hjelp av fine CSS3-funksjoner.
Hvis du leter etter et raskt utgangspunkt, kan du bla gjennom våre CSS-maler. Eller ansett en CSS3 ekspert. Ellers, la oss starte denne opplæringen.
La oss begynne med en grunnleggende meny, bygget med en uordnet liste og noen grunnleggende CSS styling.
Vi bruker nå noen grunnleggende CSS styling. For menybeholderen definerer vi en fast bredde som vi senterer ved å sette venstre og høyre marginer til "auto".
#menu listestil: none; bredde: 940px; margin: 30px auto 0px auto; høyde: 43px; polstring: 0px 20px 0px 20px;
Nå, la oss se hvordan vi kan forbedre det med noen CSS3-funksjoner. Vi må bruke forskjellige syntakser for webkitbaserte nettlesere (som Safari) og Mozilla-baserte nettlesere (som Firefox).
For avrundede hjørner vil syntaxen være:
-moz-border-radius: 10px-webkit-grense-radius: 10px; border-radius: 10px;
I bakgrunnen bruker vi gradienter og en fallback-farge for eldre nettlesere. For å holde konsistens når du velger farger, er det et fantastisk verktøy som heter Facade som hjelper deg med å finne lettere og mørkere toner av grunnfarge.
bakgrunn: # 014464; bakgrunn: -moz-lineær gradient (topp, # 0272a7, # 013953); bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# 0272a7) til (# 013953));
Den første linjen gjelder en enkel bakgrunnsfarge (for eldre nettlesere); den andre og tredje linjen oppretter en gradient fra topp til bunn med to farger: # 0272a7 og # 013953.
Vi kan nå legge til en mørkere kant og polere designet med en "falsk" innsatsgrense opprettet med "box-shadow" -funksjonen. Syntaxen er den samme for alle kompatible nettlesere: Den første verdien er den horisontale forskyvningen, den andre er den vertikale forskyvningen, den tredje er sløretradiusen (en liten verdi gjør den skarpere, den vil være 1 piksel i vårt eksempel) . Vi stiller alle offsets til 0 slik at uskarphetverdien vil skape en jevn lysgrense:
-moz-box-shadow: input 0px 0px 1px # edf9ff; -webkit-boks-skygge: innsett 0px 0px 1px # edf9ff; boks-skygge: innsett 0px 0px 1px # edf9ff;
Her er den endelige CSS-koden for #menu-beholderen:
#menu listestil: none; bredde: 940px; margin: 30px auto 0px auto; høyde: 43px; polstring: 0px 20px 0px 20px; / * Avrundet hjørner * / -moz-grense-radius: 10px; -webkit-grense-radius: 10px; border-radius: 10px; / * Bakgrunnsfarge og gradienter * / bakgrunn: # 014464; bakgrunn: -moz-lineær gradient (topp, # 0272a7, # 013953); bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# 0272a7) til (# 013953)); / * Borders * / border: 1px solid # 002232; -moz-box-shadow: input 0px 0px 1px # edf9ff; -webkit-boks-skygge: innsett 0px 0px 1px # edf9ff; boks-skygge: innsett 0px 0px 1px # edf9ff;
Vi vil begynne med alle menyelementene justert til venstre og plassere dem med en margin-høyre (polstring vil være nødvendig for hover-tilstanden):
#menu li float: left; display: block; tekst-Justering: center; stilling: i forhold; polstring: 4px 10px 4px 10px; margin-right: 30px; margin-top: 7px; border: none;
For hover state og drop down, har jeg valgt et grått fargevalg for bakgrunnen.
Fallback-farge vil være en lysegrå (# F4F4F4) og gradienten vil bli brukt fra toppen (# F4F4F4) til bunnen (#EEEEEE). Avrundede hjørner vil bare bli brukt i øverste hjørner, da vi kommer til å falle fast under menyelementene.
bakgrunn: # F4F4F4; bakgrunn: -moz-lineær-gradient (topp, # F4F4F4, #EEEEEE); bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# F4F4F4), til (#EEEEEE));
Venstre og høyre polstring er litt mindre her, fordi vi har en grense på 1 piksel som vises på hover. Hvis vi holder samme polstring, vil menyelementene skyves to piksler til høyre på grunn av venstre og høyre kantlinje lagt til på musepekeren. For å unngå det, fjerner vi 1 piksel med polstring på begge sider, så vi har 9 piksler i stedet for 10.
border: 1px solid # 777777; polstring: 4px 9px 4px 9px;
Deretter legger vi avrundede hjørner til toppen bare, slik at nedgangen vil holde seg perfekt under det overordnede menyelementet:
-moz-border-radius: 5px 5px 0px 0px; -webkit-grense-radius: 5px 5px 0px 0px; grense-radius: 5px 5px 0px 0px;
Her er den endelige CSS for menypunktene på svingeren:
#menu li: svever border: 1px solid # 777777; polstring: 4px 9px 4px 9px; / * Bakgrunnsfarge og gradienter * / bakgrunn: # F4F4F4; bakgrunn: -moz-lineær-gradient (topp, # F4F4F4, #EEEEEE); bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# F4F4F4), til (#EEEEEE)); / * Avrundede hjørner * / -moz-grense-radius: 5px 5px 0px 0px; -webkit-grense-radius: 5px 5px 0px 0px; grense-radius: 5px 5px 0px 0px;
For koblingene bruker vi en fin tekstskygge ved hjelp av en enkel syntaks: de første og andre verdiene er horisontale og vertikale forskyvninger for skyggen (1 piksel i vårt eksempel), den tredje er bluringen (1 piksel også) og da har vi den (svarte) fargen:
tekstskygge: 1px 1px 1px # 000;
Her er den endelige CSS for linkene:
#menu li a font-familie: Arial, Helvetica, sans-serif; font-size: 14 piksler; farge: #EEEEEE; display: block; omriss: 0; text-decoration: none; tekstskygge: 1px 1px 1px # 000;
På musepekeren, siden bakgrunnen er grå, bruker vi en mørkere farge (# 161616) for koblingene og den hvite fargen for tekstskyggen:
#menu li: svever en farge: # 161616; tekstskygge: 1px 1px 1px #FFFFFF;
Endelig trenger vi en måte å indikere om det er en nedgang eller ikke ved å bruke et enkelt pilebilde som bakgrunn, det vil bli plassert til høyre ved hjelp av polstring, og toppmargenen vil justere det riktig. På hover vil denne toppmarginen bli satt til 7 piksler i stedet for 8 da vi har en ekstra ramme som vises på musepekeren (ellers vil pilen skyves 1 piksel nedover på hoveren):
Accentsconagua
#menu li .drop padding-right: 21px; bakgrunn: url ("img / drop.png") no-repeat høyre 8px; #menu li: hover .drop bakgrunn: url ("img / drop.png") no-repeat right 7px; Her er vår siste kode for menybeholderen og linkene; bare "hjemme" -elementet har ikke noe nedslutt innhold for nå:
#menu listestil: none; bredde: 940px; margin: 30px auto 0px auto; høyde: 43px; polstring: 0px 20px 0px 20px; / * Avrundet hjørner * / -moz-grense-radius: 10px; -webkit-grense-radius: 10px; border-radius: 10px; / * Bakgrunnsfarge og gradienter * / bakgrunn: # 014464; bakgrunn: -moz-lineær gradient (topp, # 0272a7, # 013953); bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# 0272a7) til (# 013953)); / * Borders * / border: 1px solid # 002232; -moz-box-shadow: input 0px 0px 1px # edf9ff; -webkit-boks-skygge: innsett 0px 0px 1px # edf9ff; boks-skygge: innsett 0px 0px 1px # edf9ff; #menu li float: left; display: block; tekst-Justering: center; stilling: i forhold; polstring: 4px 10px 4px 10px; margin-right: 30px; margin-top: 7px; border: none; #menu li: svever border: 1px solid # 777777; polstring: 4px 9px 4px 9px; / * Bakgrunnsfarge og gradienter * / bakgrunn: # F4F4F4; bakgrunn: -moz-lineær-gradient (topp, # F4F4F4, #EEEEEE); bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# F4F4F4), til (#EEEEEE)); / * Avrundede hjørner * / -moz-grense-radius: 5px 5px 0px 0px; -webkit-grense-radius: 5px 5px 0px 0px; grense-radius: 5px 5px 0px 0px; #menu li en font-familie: Arial, Helvetica, sans-serif; font-size: 14 piksler; farge: #EEEEEE; display: block; omriss: 0; text-decoration: none; tekstskygge: 1px 1px 1px # 000; #menu li: svever en farge: # 161616; tekstskygge: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; bakgrunn: url ("img / drop.png") no-repeat høyre 8px; #menu li: hover .drop bakgrunn: url ("img / drop.png") no-repeat right 7px; Og resultatet er:
En "klassisk" rullegardinmeny inneholder vanligvis lister som er nestet i oppføringsliste og ser ut som:
For vår Mega-meny, i stedet for nestede lister, bruker vi bare standard DIV, som vil fungere som enhver nestliste:
Dette vil være den grunnleggende strukturen for nedgangen. Tanken bak den er å kunne inkludere alle typer innhold, for eksempel avsnitt, bilder, egendefinerte lister eller et kontaktskjema, organisert i kolonner.
Beholdere med forskjellige størrelser vil holde hele nedkastningsinnholdet. Jeg har valgt taggenavnene i henhold til antall kolonner de vil inneholde.
For å skjule nedtrekkene, bruker vi absolutt posisjonering med negativ venstre margin:
stilling: absolutt; venstre: -999em;
Bakgrunnsbakgrunnsfargen er den samme som den som brukes til menyelementene. Moderne nettlesere vil vise en gradient som starter med #EEEEEE øverst (for å matche overordnet menyelementgradient) og slutter med #BBBBBB nederst:
bakgrunn: # F4F4F4; bakgrunn: -moz-lineær-gradient (topp, #EEEEEE, #BBBBBB); bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (#EEEEEE), til (#BBBBBB));
Vi bruker igjen avrundede hjørner, med unntak av toppen til venstre:
-moz-border-radius: 0px 5px 5px 5px; -webkit-grense-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px;
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; stilling: absolutt; venstre: -999em; / * Skjuler rullegardinmenyen * / tekstjustering: venstre; polstring: 10px 5px 10px 5px; border: 1px solid # 777777; border-top: none; / * Gradient bakgrunn * / bakgrunn: # F4F4F4; bakgrunn: -moz-lineær-gradient (topp, #EEEEEE, #BBBBBB); bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (#EEEEEE), til (#BBBBBB)); / * Avrundet hjørner * / -moz-grense-radius: 0px 5px 5px 5px; -webkit-grense-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px;
For å illustrere dette, la oss se hvordan det ville se ut hvis vi ikke hadde tatt hensyn til detaljer:
Nå er det vårt eksempel:
Som du kan se, slår du ned pinnen til det overordnede menyelementet.
For å få en perfekt drop down container, må vi spesifisere bredden for hver enkelt:
.dropdown_1column width: 140px; .dropdown_2columns width: 280px; .dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .dropdown_5columns width: 700px;
Og for å vise nedtrekkene på musepekeren bruker vi bare:
#menu li: hover .dropdown_1column, #menu li: hover .dropdown_2columns, #menu li: hover .dropdown_3columns, #menu li: hover .dropdown_4columns, #menu li: hover .dropdown_5columns left: -1px; topp: auto;
Våre klasser er klare til å bli inkludert i menyen vår. Vi bruker hver enkelt av dem fra 5-kolonnen, oppsettet til rullegardinmenyen:
5 kolonninnhold
4 kolonner innhold
3 kolonner innhold
2 kolonninnhold
1 Kolonneinnhold
Her er en forhåndsvisning av koden ovenfor:
Nå som vi har beholderne klare, vil vi lage kolonner av økende størrelser, etter prinsippene i 960-nettverket.
.col_1, .col_2, .col_3, .col_4, .col_5 display: inline; flyte: venstre; stilling: relativ; margin-venstre: 5px; margin-høyre: 5px; .col_1 bredde: 130px; .col_2 bredde: 270px; .col_3 bredde: 410px; .col_4 bredde: 550px; .col_5 bredde: 690px;
Her er et eksempel på en rullegardin som inneholder flere kolonner. I dette eksemplet har vi forskjellige kombinasjoner ved hjelp av alle slags kolonner:
Dette er et 5 kolonninnhold
Dette er et 1 kolonneinnhold
Dette er et 1 kolonneinnhold
Dette er et 1 kolonneinnhold
Dette er et 1 kolonneinnhold
Dette er et 1 kolonneinnhold
Dette er et 4 kolonninnhold
Dette er et 1 kolonneinnhold
Dette er et 3 kolonner innhold
Dette er et 2 kolonninnhold
Kode forhåndsvisning:
La oss nå se hvordan vi kan justere menyen vår og rullegardininnholdet til høyre kant av navigeringslinjen. Ikke bare menyelementet, men også nedfallsbeholderen skal endres.
For å oppnå dette, legger vi til en ny klasse som heter .menu_right til hovedlisten, så vi nullstiller høyre margin og flyter den til høyre:
#menu. meny_right float: right; margin-right: 0px;
Neste, la oss se rullegardinmenyen. I forrige CSS-kode ble avrundede hjørner på alle hjørner unntatt den venstre øverste til, for å matche bakgrunnen til det overordnede menyelementet. Nå vil vi ha denne rullegardinmenyen for å holde seg til høyre kant av det overordnede menyelementet. Så overskriver vi grensverdierverdiene med en ny klasse kalt .align_right, og sett øverste høyre hjørne til 0.
#menu li .align_right / * Avrundet hjørner * / -moz-grense-radius: 5px 0px 5px 5px; -webkit-grense-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px;
Sist men ikke minst, vi ønsker å få nedgangen til å vises til høyre; så vi bruker vår nye klasse og tilbakestiller venstreverdien, og gjør den til høyre:
#menu li: svever .align_right left: auto; høyre: -1px; top: auto;
Nå er den klar til bruk i menyen:
Dette er et 1 kolonneinnhold
Og en liten forhåndsvisning av koden ovenfor:
Nå som vi har hele strukturen klar, kan vi legge til så mye innhold som vi vil: tekst, lister, bilder osv.
La oss begynne med noen grunnleggende styling for avsnitt og overskrifter:
#menu p, #menu h2, #menu h3, #menu ul li font-familie: Arial, Helvetica, sans-serif; linje-høyde: 21px; font-size: 12 piksler; tekst-Justering: venstre; tekstskygge: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; font-vekt: 400; brev-Avstand: -1px; margin: 7px 0 14px 0; padding-bottom: 14 piksler; border-bottom: 1px solid # 666666; #menu h3 font-size: 14px; margin: 7px 0 14px 0; padding-bottom: 7px; border-bottom: 1px solid # 888888; #menu p linjehøyde: 18px; margin: 0 0 10px 0; .strong font-weight: bold; .italic font-style: italic;
Vi kan bruke en fin blå farge til koblingene i rullegardinmenyen:
#menu li: svever div a font-size: 12px; color: # 015b86; #menu li: svever div a: hover color: # 029feb;
La oss revolusjonere våre lister; vi må nullstille en styling som bakgrunnsfargen eller grensene som brukes i navigeringsfeltet:
#menu li ul listestil: none; padding: 0; margin: 0 0 12px 0; #menu li ul li font-size: 12px; linje-høyde: 24 piksler; stilling: i forhold; tekstskygge: 1px 1px 1px #ffffff; padding: 0; margin: 0; float: none; tekst-Justering: venstre; bredde: 130px; #menu li ul li: svever bakgrunn: ingen; border: none; padding: 0; margin: 0;
.imgshadow bakgrunn: #FFFFFF; padding: 4 piksler; border: 1px solid # 777777; margin-top: 5 px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-boks-skygge: 0px 0px 5px # 666666; boks-skygge: 0px 0px 5px # 666666;
Og for å lage et avsnitt med et bilde til venstre:
.img_left bredde: auto; float: venstre; margin: 5px 15px 5px 5px;
For å markere noe innhold, her er et eksempel på en mørk boks med avrundede hjørner og en subtil innstikkskygge:
#menu li. black_box bakgrunnsfarge: # 333333; farge: #eeeeee; tekstskygge: 1px 1px 1px # 000; polstring: 4px 6px 4px 6px; / * Avrundet hjørner * / -moz-grense-radius: 5px; -webkit-grense-radius: 5px; border-radius: 5px; / * Skygge * / -webkit-boks-skygge: innsett 0 0 3px # 000000; -moz-box-shadow: input 0 0 3px # 000000; boks-skygge: innsett 0 0 3px # 000000;
Og for å fullføre, her er en annen måte å style lister på med, igjen, noen CSS3:
#menu li .greybox li bakgrunn: # F4F4F4; grense: 1px solid #bbbbbb; margin: 0px 0px 4px 0px; polstring: 4px 6px 4px 6px; bredde: 116 piksler; / * Avrundet hjørner * / -moz-grense-radius: 5px; -webkit-grense-radius: 5px; border-radius: 5px; #menu li .greybox li: svever bakgrunn: #ffffff; grense: 1px solid #aaaaaa; polstring: 4px 6px 4px 6px; margin: 0px 0px 4px 0px;
Alle nettlesere håndterer svever på ikke-ankerkoder ... unntatt Internet Explorer 6; så vår Mega-meny jobber fortsatt ikke med denne gamle nettleseren. Vi kan fikse dette problemet takket være en oppførselsfil som vil legge til denne funksjonaliteten. Du kan finne den her, og bruke betingede kommentarer til å målrette IE6 bare; Flere forklaringer kan bli funnet via denne artikkelen fra CSS-Tricks.
For å målrette mot IE6, bruker vi følgende kode:
Jeg har brukt noen PNG-filer i denne opplæringen, og som alle vet, støtter IE6 ikke gjennomsiktighet, så vi har forskjellige løsninger:
Jeg lar deg velge den som passer til dine behov. Nå, la oss se gjennom et fullt fungerende eksempel.
Mega Drop Down-menyen
Hei og velkommen her! Dette er et showcase av mulighetene til denne fantastiske Mega Drop Down-menyen.
Dette elementet kommer med et stort utvalg av forberedte typografiske stylinger som overskrifter, lister, osv.
Denne mega-menyen har blitt testet i alle de store nettleserne.
Dette er en mørk grå boks tekst. Fusse i metus på enim porta lacinia vitae a bue. Sett sed lacus nulla mollis porta quis.
Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, medus kursus accumsan tincidunt.
Dette er et utvalg av kursiv tekst. Konsekvenser skelerisk. Fusce sed lectus på Arcu mollis accumsan ved nec nisi porta quis sit amet.
Det er ikke nødvendig å skrive en kommentar. Nunc dolor nulla, semper i ultricies vitae, vulputate porttitor neque.
Dette er et utvalg av fet skrift. Alkalisk sodavann er ikke nødvendig, og det er en av de mest kjente valgene.
Maecenas eget eros lorem, ikk pellentesque lacus. Aenean dui orci, rhoncus sitter med tristique eu, tristique sed odio. Praesent ut interdum elit. Sed i sem mauris. Aenean en commodo mi. Praesent augue lacus.Les mer ...
Alkomponentene er feil, og er derfor skarpe. Fusce sed lectus ved arcu mollis accumsan ved nec nisi. Aliquam pretium mollis fringilla. Nunc i leo urna, egen varius metus. Aliquam sodales nisi.Les mer ...
Dette er en svart boks, du kan bruke den til å høyne noe innhold. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, medus kursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus ved velit varius gravida. Nulla ipsum risus.
Maecenas eget eros lorem, ikk pellentesque lacus. Aenean dui orci, rhoncus sitter med tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum. Les mer ...
Alkomponentene er feil, og er derfor skarpe. Fusce sed lectus ved arcu mollis accumsan ved nec nisi. Aliquam pretium mollis fringilla. Tidligere tidsrom er tilgjengelig. Les mer…
kropp, ul, li font-size: 14px; font-familie: Arial, Helvetica, sans-serif; linje-høyde: 21px; tekst-Justering: venstre; / * Navigeringslinje * / #menu listestil: none; bredde: 940px; margin: 30px auto 0px auto; høyde: 43px; polstring: 0px 20px 0px 20px; / * Avrundet hjørner * / -moz-grense-radius: 10px; -webkit-grense-radius: 10px; border-radius: 10px; / * Bakgrunnsfarge og gradienter * / bakgrunn: # 014464; bakgrunn: -moz-lineær gradient (topp, # 0272a7, # 013953); bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# 0272a7) til (# 013953)); / * Borders * / border: 1px solid # 002232; -moz-box-shadow: input 0px 0px 1px # edf9ff; -webkit-boks-skygge: innsett 0px 0px 1px # edf9ff; boks-skygge: innsett 0px 0px 1px # edf9ff; #menu li float: left; tekst-Justering: center; stilling: i forhold; polstring: 4px 10px 4px 10px; margin-right: 30px; margin-top: 7px; border: none; #menu li: svever border: 1px solid # 777777; polstring: 4px 9px 4px 9px; / * Bakgrunnsfarge og gradienter * / bakgrunn: # F4F4F4; bakgrunn: -moz-lineær-gradient (topp, # F4F4F4, #EEEEEE); bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# F4F4F4), til (#EEEEEE)); / * Avrundede hjørner * / -moz-grense-radius: 5px 5px 0px 0px; -webkit-grense-radius: 5px 5px 0px 0px; grense-radius: 5px 5px 0px 0px; #menu li en font-familie: Arial, Helvetica, sans-serif; font-size: 14 piksler; farge: #EEEEEE; display: block; omriss: 0; text-decoration: none; tekstskygge: 1px 1px 1px # 000; #menu li: svever en farge: # 161616; tekstskygge: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; bakgrunn: url ("img / drop.png") no-repeat høyre 8px; #menu li: hover .drop bakgrunn: url ("img / drop.png") no-repeat right 7px; / * Drop Down * / .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; float: venstre; stilling: absolutt; venstre: -999em; / * Skjuler rullegardinmenyen * / tekstjustering: venstre; polstring: 10px 5px 10px 5px; border: 1px solid # 777777; border-top: none; / * Gradient bakgrunn * / bakgrunn: # F4F4F4; bakgrunn: -moz-lineær-gradient (topp, #EEEEEE, #BBBBBB); bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (#EEEEEE), til (#BBBBBB)); / * Avrundet hjørner * / -moz-grense-radius: 0px 5px 5px 5px; -webkit-grense-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; .dropdown_1column width: 280px; dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .dropdown_5columns width: 700px; #menu li: hover .dropdown_1column, # meny li: hover .dropdown_2columns, #menu li: hover .dropdown_3columns, #menu li: hover .dropdown_4columns, #menu li: hover .dropdown_5columns left: -1px; top: auto; / * Kolonner * / .col_1, .col_2, .col_3, .col_4, .col_5 display: inline; flyte: venstre; stilling: relativ; margin-venstre: 5px; margin-høyre: 5px; .col_1 bredde: 130px; .col_2 bredde: 270px; .col_3 width: 410px; .col_4 width: 550px; .col_5 width: 690px; / * Høyrejustering * / #menu. menu_right float: right; margin-right: 0px; #menu li .align_right / * Avrundet hjørner * / -moz-grense-radius: 5px 0px 5px 5px; -webkit-grense-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px; #menu li: svever .align_right left: auto; høyre: -1px; top: auto; / * Drop down Content Stylings * / #menu p, #menu h2, #menu h3, #menu ul li font-familie: Arial, Helvetica, sans-serif; linje-høyde: 21px; font-size: 12 piksler; tekst-Justering: venstre; tekstskygge: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; font-vekt: 400; brev-Avstand: -1px; margin: 7px 0 14px 0; padding-bottom: 14 piksler; border-bottom: 1px solid # 666666; #menu h3 font-size: 14px; margin: 7px 0 14px 0; padding-bottom: 7px; border-bottom: 1px solid # 888888; #menu p linjehøyde: 18px; margin: 0 0 10px 0; #menu li: svever div a font-size: 12px; color: # 015b86; #menu li: svever div a: hover color: # 029feb; .strong font-weight: bold; .italic font-style: italic; .imgshadow bakgrunn: #FFFFFF; padding: 4 piksler; border: 1px solid # 777777; margin-top: 5 px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-boks-skygge: 0px 0px 5px # 666666; boks-skygge: 0px 0px 5px # 666666; .img_left / * Bildestifter til venstre * / bredde: auto; float: venstre; margin: 5px 15px 5px 5px; #menu li. black_box bakgrunnsfarge: # 333333; farge: #eeeeee; tekstskygge: 1px 1px 1px # 000; polstring: 4px 6px 4px 6px; / * Avrundet hjørner * / -moz-grense-radius: 5px; -webkit-grense-radius: 5px; border-radius: 5px; / * Skygge * / -webkit-boks-skygge: innsett 0 0 3px # 000000; -moz-box-shadow: input 0 0 3px # 000000; boks-skygge: innsett 0 0 3px # 000000; #menu li ul listestil: none; padding: 0; margin: 0 0 12px 0; #menu li ul li font-size: 12px; linje-høyde: 24 piksler; stilling: i forhold; tekstskygge: 1px 1px 1px #ffffff; padding: 0; margin: 0; float: none; tekst-Justering: venstre; bredde: 130px; #menu li ul li: svever bakgrunn: ingen; border: none; padding: 0; margin: 0; #menu li .greybox li bakgrunn: # F4F4F4; grense: 1px solid #bbbbbb; margin: 0px 0px 4px 0px; polstring: 4px 6px 4px 6px; bredde: 116 piksler; / * Avrundet hjørner * / -moz-grense-radius: 5px; -webkit-grense-radius: 5px; border-radius: 5px; #menu li .greybox li: svever bakgrunn: #ffffff; grense: 1px solid #aaaaaa; polstring: 4px 6px 4px 6px; margin: 0px 0px 4px 0px; Jeg håper du har hatt denne opplæringen på å skape mega-menyer. Takk for at du følger med!
Også, hvis du trenger et raskt utgangspunkt for å bygge et profesjonelt nettsted, så bla gjennom vårt galleri av CSS Maler. De tilbyr en rekke klare til bruk, profesjonelle funksjoner.
