Share
Ofta används för e-handel eller storskaliga webbplatser blir mega-menyer mer och mer populära, eftersom de erbjuder en effektiv lösning för att visa mycket innehåll samtidigt som du håller en ren layout. I den här handledningen lär vi oss att bygga en cross-browser, en fantastisk CSS-only-rullgardinsmeny med trevliga CSS3-funktioner.
Om du letar efter en snabb startpunkt, bläddra igenom våra CSS-mallar. Eller hyra en CSS3 expert. Annars, låt oss börja denna handledning.
Låt oss börja med en grundmeny, byggd med en oorderad lista och några grundläggande CSS-styling.
Vi använder nu en grundläggande CSS-styling. För menybehållaren definierar vi en fast bredd som vi centrerar genom att ställa in vänster och höger marginal till "auto".
#menu listestil: none; bredd: 940px; marginal: 30px auto 0px auto; höjd: 43px; vaddering: 0px 20px 0px 20px;
Låt oss nu se hur vi kan förbättra det med några CSS3-funktioner. Vi behöver använda olika syntaxer för webbkitbaserade webbläsare (som Safari) och för Mozilla-baserade webbläsare (som Firefox).
För avrundade hörn kommer syntaxen att vara:
-moz-gränsen-radie: 10px -webkit-gräns-radie: 10px; gränsstråle: 10px;
För bakgrunden använder vi gradienter och en fallback-färg för äldre webbläsare. För att hålla konsistens vid val av färger finns ett fantastiskt verktyg som heter Facade som hjälper dig att hitta ljusare och mörkare toner av en grundläggande färg.
bakgrund: # 014464; bakgrund: -moz-linjär gradient (topp, # 0272a7, # 013953); bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (# 0272a7), till (# 013953));
Den första raden gäller en enkel bakgrundsfärg (för äldre webbläsare); Den andra och tredje raden skapar en gradient från topp till botten med två färger: # 0272a7 och # 013953.
Vi kan nu lägga till en mörkare kant och polera designen med en "falsk" insatsgräns skapad med "box-shadow" -funktionen. Syntaxen är densamma för alla kompatibla webbläsare: det första värdet är den horisontella förskjutningen, den andra är vertikal offset, den tredje är suddradien (ett litet värde gör det skarpare, det blir 1 pixel i vårt exempel) . Vi ställer alla offsets till 0 så att suddvärdet kommer att skapa en jämn ljusgräns:
-moz-box-skugga: inset 0px 0px 1px # edf9ff; -webkit-box-skugga: inset 0px 0px 1px # edf9ff; boxskugga: inset 0px 0px 1px # edf9ff;
Här är den slutliga CSS-koden för #menu-behållaren:
#menu listestil: none; bredd: 940px; marginal: 30px auto 0px auto; höjd: 43px; vaddering: 0px 20px 0px 20px; / * Avrundade hörn * / -moz-gräns-radie: 10px; -webkit-gräns-radie: 10px; gränsstråle: 10px; / * Bakgrundsfärg och gradienter * / bakgrund: # 014464; bakgrund: -moz-linjär gradient (topp, # 0272a7, # 013953); bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (# 0272a7), till (# 013953)); / * Borders * / border: 1px solid # 002232; -moz-box-skugga: inset 0px 0px 1px # edf9ff; -webkit-box-skugga: inset 0px 0px 1px # edf9ff; boxskugga: inset 0px 0px 1px # edf9ff;
Vi börjar med alla menyalternativ som är inriktade till vänster och rymmer dem med en marginal-höger (vadderingen kommer att vara nödvändig för svävarläget):
#menu li float: left; display: block; text-align: center; positioner: relativ; vaddering: 4px 10px 4px 10px; margin-höger: 30px; margin-top: 7PX; kant: none;
För svävartillståndet och nedgången har jag valt ett grått färgschema för bakgrunden.
Fallback-färgen kommer att vara ljusgrå (# F4F4F4) och gradienten kommer att appliceras från toppen (# F4F4F4) till botten (#EEEEEE). Avrundade hörn kommer endast att appliceras i övre hörn, eftersom vi kommer att ha nedtryckstangenten precis under menyalternativen.
bakgrund: # F4F4F4; bakgrund: -moz-linjär-gradient (topp, # F4F4F4, #EEEEEE); bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (# F4F4F4), till (#EEEEEE));
Vänster och höger polstring är något mindre här eftersom vi har en kant på 1 pixel som visas på svävaren. Om vi håller samma polstring, kommer menyalternativen att tryckas två pixlar till höger på grund av de vänstra och högra gränserna som läggs till på muspekaren. För att undvika det tar vi bort 1 pixel polstring på båda sidor, så vi har 9 pixlar istället för 10.
gränsen: 1px fast # 777777; vaddering: 4px 9px 4px 9px;
Sedan lägger vi till avrundade hörn till toppen så att nedrullningen stannar perfekt under det överordnade menyalternativet:
-moz-gräns-radie: 5px 5px 0px 0px; -webkit-gräns-radie: 5px 5px 0px 0px; gränsstråle: 5px 5px 0px 0px;
Här är den sista CSS för menyalternativen på svävaren:
#menu li: svävar border: 1px solid # 777777; vaddering: 4px 9px 4px 9px; / * Bakgrundsfärg och gradienter * / bakgrund: # F4F4F4; bakgrund: -moz-linjär-gradient (topp, # F4F4F4, #EEEEEE); bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (# F4F4F4), till (#EEEEEE)); / * Avrundade hörn * / -moz-gräns-radie: 5px 5px 0px 0px; -webkit-gräns-radie: 5px 5px 0px 0px; gränsstråle: 5px 5px 0px 0px;
För länkarna tillämpar vi en fin textskugga med en enkel syntax: de första och andra värdena är horisontella och vertikala förskjutningar för skuggan (1 pixel i vårt exempel), den tredje är blurningen (1 pixel också) och då har vi den (svarta) färgen:
textskugga: 1px 1px 1px # 000;
Här är den slutliga CSS för länkarna:
#menu li a font-family: Arial, Helvetica, sans-serif; font-size: 14px; färg: #EEEEEE; display: block; disposition: 0; text-decoration: none; textskugga: 1px 1px 1px # 000;
På muspekaren, eftersom bakgrunden är grå, använder vi en mörkare färg (# 161616) för länkarna och den vita färgen för textskuggan:
#menu li: sväva en färg: # 161616; textskugga: 1px 1px 1px #FFFFFF;
Slutligen behöver vi ett sätt att indikera om det finns en nedrullning eller inte, genom att använda en enkel pilbild som bakgrund, kommer den att placeras till höger med padding och toppmarginalen anpassas korrekt till den. På svängaren ställs den här högsta marginalen på 7 pixlar istället för 8, eftersom vi har en extra kant som visas på muspekaren (annars skulle pilen tryckas 1 pixel ner på svängaren):
Accentsconagua
#menu li .drop padding-right: 21px; bakgrund: url ("img / drop.png") no-repeat right 8px; #menu li: sväva .drop bakgrund: url ("img / drop.png") no-repeat right 7px; Här är vår sista kod för menybehållaren och länkarna; bara "hem" -objektet har inte några nedsläppsinnehåll för nu:
#menu listestil: none; bredd: 940px; marginal: 30px auto 0px auto; höjd: 43px; vaddering: 0px 20px 0px 20px; / * Avrundade hörn * / -moz-gräns-radie: 10px; -webkit-gräns-radie: 10px; gränsstråle: 10px; / * Bakgrundsfärg och gradienter * / bakgrund: # 014464; bakgrund: -moz-linjär gradient (topp, # 0272a7, # 013953); bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (# 0272a7), till (# 013953)); / * Borders * / border: 1px solid # 002232; -moz-box-skugga: inset 0px 0px 1px # edf9ff; -webkit-box-skugga: inset 0px 0px 1px # edf9ff; boxskugga: inset 0px 0px 1px # edf9ff; #menu li float: left; display: block; text-align: center; positioner: relativ; vaddering: 4px 10px 4px 10px; margin-höger: 30px; margin-top: 7PX; kant: none; #menu li: sväva border: 1px solid # 777777; vaddering: 4px 9px 4px 9px; / * Bakgrundsfärg och gradienter * / bakgrund: # F4F4F4; bakgrund: -moz-linjär-gradient (topp, # F4F4F4, #EEEEEE); bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (# F4F4F4), till (#EEEEEE)); / * Avrundade hörn * / -moz-gräns-radie: 5px 5px 0px 0px; -webkit-gräns-radie: 5px 5px 0px 0px; gränsstråle: 5px 5px 0px 0px; #menu li a font-family: Arial, Helvetica, sans-serif; font-size: 14px; färg: #EEEEEE; display: block; disposition: 0; text-decoration: none; textskugga: 1px 1px 1px # 000; #menu li: sväva en färg: # 161616; textskugga: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; bakgrund: url ("img / drop.png") no-repeat right 8px; #menu li: sväva .drop bakgrund: url ("img / drop.png") no-repeat right 7px; Och resultatet är:
En "klassisk" rullgardinsmeny innehåller vanligtvis listor som är inbädda i föremålsobjekt och ser ut som:
För vår Mega-meny, istället för nestade listor, använder vi helt enkelt standard DIV-filer, som fungerar som alla kapslingar:
Detta kommer att vara den grundläggande strukturen för nedgången. Tanken bakom det är att kunna inkludera någon form av innehåll, till exempel avsnitt, bilder, anpassade listor eller kontaktformulär, organiserade i kolumner.
Behållare med olika storlekar kommer att hålla hela nedrullningsinnehållet. Jag har valt taggen namn enligt antalet kolumner de kommer att innehålla.
För att dölja nedgångarna använder vi absolut positionering med negativ vänster marginal:
position: absolute; vänster: -999em;
Bakgrundsbackback-färgen är densamma som den som används för menyalternativen. Moderna webbläsare visar en gradient som börjar med #EEEEEE överst (för att matcha övergångsmenyns gradient) och slutar med #BBBBBB längst ner:
Bakgrund: # F4F4F4; bakgrund: -moz-linjär-gradient (topp, #EEEEEE, #BBBBBB); bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (#EEEEEE), till (#BBBBBB));
Vi använder igen avrundade hörn, förutom den övre vänstra:
-moz-gräns-radie: 0px 5px 5px 5px; -webkit-gräns-radie: 0px 5px 5px 5px; gränsstråle: 0px 5px 5px 5px;
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; position: absolute; vänster: -999em; / * Döljer nedrullningen * / text-align: left; vaddering: 10px 5px 10px 5px; gränsen: 1px fast # 777777; border-top: none; / * Gradient bakgrund * / bakgrund: # F4F4F4; bakgrund: -moz-linjär-gradient (topp, #EEEEEE, #BBBBBB); bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (#EEEEEE), till (#BBBBBB)); / * Avrundade hörn * / -moz-gräns-radie: 0px 5px 5px 5px; -webkit-gräns-radie: 0px 5px 5px 5px; gränsstråle: 0px 5px 5px 5px;
För att illustrera detta, låt oss se hur det skulle se ut om vi inte hade uppmärksammat detaljerna:
Nu är här vårt exempel:
Som du kan se, sitter nedgången snyggt till sitt överordnade menyalternativ.
För att få en perfekt nedrullningsbehållare måste vi ange bredden för var och en:
.dropdown_1column width: 140px; .dropdown_2columns width: 280px; .dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .dropdown_5columns width: 700px;
Och för att visa nedgångarna på muspekaren använder vi helt enkelt:
#menu li: sväva .dropdown_1column, #menu li: sväva .dropdown_2columns, #menu li: sväva .dropdown_3columns, #menu li: sväva .dropdown_4columns, #menu li: sväva .dropdown_5columns left: -1px; top: auto;
Våra klasser är redo att inkluderas i vår meny. Vi kommer att använda var och en av dem som börjar från 5-kolumnen, layouten till rullgardinsmenyn:
5 kolumner innehåll
4 kolumner innehåll
3 kolumner innehåll
2 kolumner innehåll
1 kolumnhalt
Här är en förhandsvisning av koden ovan:
Nu när vi har behållarna klara, skapar vi kolumner med ökande storlekar, enligt principerna för 960-nätverket.
.col_1, .col_2, .col_3, .col_4, .col_5 display: inline; flyta till vänster; position: relativ; marginal-vänster: 5px; marginal-höger: 5px; .col_1 bredd: 130px; .col_2 bredd: 270px; .col_3 width: 410px; .col_4 width: 550px; .col_5 width: 690px;
Här är ett exempel på en nedrullning som innehåller flera kolumner. I det här exemplet har vi olika kombinationer med alla typer av kolumner:
Detta är ett 5-kolumninnehåll
Detta är en 1 kolumnhalt
Detta är en 1 kolumnhalt
Detta är en 1 kolumnhalt
Detta är en 1 kolumnhalt
Detta är en 1 kolumnhalt
Detta är ett 4-kolumninnehåll
Detta är en 1 kolumnhalt
Detta är ett 3-kolumninnehåll
Detta är ett 2-kolumninnehåll
Kod förhandsvisning:
Låt oss nu se hur vi kan anpassa vår meny och dropdown-innehållet till höger i navigeringsfältet. inte bara menyobjektet, men nedrullningsbehållaren bör också ändras.
För att uppnå detta lägger vi till en ny klass som heter .menu_right till moderlistan, så vi återställer den högra marginalen och flyter den till höger:
#menu. meny_right float: right; margin-höger: 0px;
Låt oss se nedrullningen. I den tidigare CSS-koden applicerades avrundade hörn till alla hörn förutom den vänstra toppen till, för att matcha bakgrunden till det överordnade menyalternativet. Nu vill vi ha den här nedrullningen för att hålla sig till den högra kanten av det överordnade menyalternativet. Så vi skriver över gränsvärdet med en ny klass som heter .align_right, och ställer upp högra hörnet till 0.
#menu li .align_right / * Avrundade hörn * / -moz-gräns-radie: 5px 0px 5px 5px; -webkit-gräns-radie: 5px 0px 5px 5px; gränsstråle: 5px 0px 5px 5px;
Sist men inte minst vill vi göra nedgången till höger; så vi använder vår nya klass och återställer vänstervärdet och gör det till vänster:
#menu li: sväva .align_right left: auto; höger: -1px; top: auto;
Nu är den redo att användas i menyn:
Detta är en 1 kolumnhalt
Och en liten förhandsvisning av koden ovan:
Nu när vi har hela strukturen klar kan vi lägga till så mycket innehåll som vi vill ha: text, listor, bilder mm.
Låt oss börja med några grundläggande styling för stycken och rubriker:
#menu p, #menu h2, #menu h3, #menu ul li font-family: Arial, Helvetica, sans-serif; line-height: 21px; font-size: 12px; text-align: left; textskugga: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; font-weight: 400; knipning: -1px; marginal: 7px 0 14px 0; padding-bottom: 14px; gränsbotten: 1px fast # 666666; #menu h3 font-size: 14px; marginal: 7px 0 14px 0; padding-bottom: 7PX; gränsbotten: 1px fast # 888888; #menu p linjehöjd: 18px; marginal: 0 0 10px 0; .strong font-weight: bold; .italic font-style: italic;
Vi kan applicera en fin blå färg till länkarna i rullgardinsmenyn:
#menu li: sväng div div font-size: 12px; color: # 015b86; #menu li: sväva div a: svävar färg: # 029feb;
Låt oss uppdatera våra listor; vi måste återställa någon styling som bakgrundsfärgen eller de gränser som används i navigeringsfältet:
#menu li ul list-style: none; padding: 0; marginal: 0 0 12px 0; #menu li ul li font-size: 12px; line-height: 24 bildpunkter; positioner: relativ; textskugga: 1px 1px 1px #ffffff; padding: 0; marginal: 0; float: none; text-align: left; bredd: 130 x; #menu li ul li: sväva bakgrund: ingen; kant: none; padding: 0; marginal: 0;
.imgshadow background: #FFFFFF; padding: 4px; gränsen: 1px fast # 777777; margin-top: 5px; -moz-box-skugga: 0px 0px 5px # 666666; -webkit-box-skugga: 0px 0px 5px # 666666; boxskugga: 0px 0px 5px # 666666;
Och för att skapa en punkt med en bild till vänster:
.img_left bredd: auto; flyta till vänster; marginal: 5px 15px 5px 5px;
För att markera lite innehåll är här ett exempel på en mörk låda med avrundade hörn och en subtil insatsskugga:
#menu li. black_box bakgrundsfärg: # 333333; färg: #eeeeee; textskugga: 1px 1px 1px # 000; vaddering: 4px 6px 4px 6px; / * Avrundade hörn * / -moz-gräns-radie: 5px; -webkit-gräns-radie: 5px; gränsstråle: 5px; / * Shadow * / -webkit-box-skugga: inset 0 0 3px # 000000; -moz-box-shadow: inset 0 0 3px # 000000; boxskugga: inset 0 0 3px # 000000;
Och för att avsluta, här är ett annat sätt att utforma dina listor med hjälp av, igen, några CSS3:
#menu li .greybox li background: # F4F4F4; gränsen: 1px solid #bbbbbb; marginal: 0px 0px 4px 0px; vaddering: 4px 6px 4px 6px; bredd: 116px; / * Avrundade hörn * / -moz-gräns-radie: 5px; -webkit-gräns-radie: 5px; gränsstråle: 5px; #menu li .greybox li: sväva bakgrund: #ffffff; gränsen: 1px solid #aaaaaa; vaddering: 4px 6px 4px 6px; marginal: 0px 0px 4px 0px;
Alla webbläsare hanterar svep på icke-ankare-taggar ... förutom Internet Explorer 6; så fungerar vår Mega-meny fortfarande inte med den här gamla webbläsaren. Vi kan åtgärda detta problem tack vare en beteendefil som lägger till den här funktionaliteten. Du kan hitta den här, och använda villkorliga kommentarer för att bara rikta IE6; Mer förklaringar kan hittas via denna artikel från CSS-Tricks.
För att rikta in IE6 använder vi följande kod:
Jag har använt några PNG-filer i denna handledning och, som alla vet, stöder inte IE6 öppenhet så vi har olika lösningar:
Jag låter dig välja den som passar dina behov. Nu ska vi granska ett fullständigt fungerande exempel.
Mega Drop Down Menu
Hej och välkommen här! Detta är en uppvisning av möjligheterna till denna fantastiska Mega Drop Down Menu.
Denna artikel kommer med ett stort antal beredda typografiska stylingar som rubriker, listor etc..
Denna mega-meny har testats i alla större webbläsare.
Detta är en mörkgrå boxtext. Fusce in metus vid enim porta lacinia vitae a bue. Sed sed lacus nulla mollis porta quis.
Phasellus vitae sapien ac leo mollis porta quis sitta amet nisi. Mauris hendrerit, medus kursus accumsan tincidunt.
Detta är ett urval av kursiv text. Konsekvenser skelett. Fusce sed lectus vid arcu mollis accumsan vid nisi nisi porta quis sit amet.
Innehållsförteckning finns inte i förfrågan. Nunc dolor nulla, semper i ultricies vitae, vulputate porttitor neque.
Detta är ett urval av en fet text. Alkalisk soda är inte nödvändigt med en häftad övning.
Maecenas eget eros lorem, icke pellentesque lacus. Aenean dui orci, rhoncus sitter amet tristique eu, tristique sed odio. Preda ut interdum elit. Sed i sem mauris. Aenean en commodo mi. Present augue lacus. Läs mer ...
Allvarliga faktorer är felaktigt skarpa. Fusce sed lectus vid arcu mollis accumsan vid nec nisi. Aliquam pretium mollis fringilla. Nunc i leo urna, egen varius metus. Aliquam sodales nisi. Läs mer ...
Det här är en svart låda, du kan använda den för att höja lite innehåll. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sitta 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 vid velit varius gravida. Nulla ipsum risus.
Maecenas eget eros lorem, icke pellentesque lacus. Aenean dui orci, rhoncus sitter amet tristique eu, tristique sed odio. Preda ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum. Läs mer ...
Allvarliga faktorer är felaktigt skarpa. Fusce sed lectus vid arcu mollis accumsan vid nec nisi. Aliquam pretium mollis fringilla. Det finns tillfälliga möjligheter för män. Läs mer…
kropp, ul, li font-size: 14px; font-family: Arial, Helvetica, sans-serif; line-height: 21px; text-align: left; / * Navigeringsfältet * / #menu listestil: none; bredd: 940px; marginal: 30px auto 0px auto; höjd: 43px; vaddering: 0px 20px 0px 20px; / * Avrundade hörn * / -moz-gräns-radie: 10px; -webkit-gräns-radie: 10px; gränsstråle: 10px; / * Bakgrundsfärg och gradienter * / bakgrund: # 014464; bakgrund: -moz-linjär gradient (topp, # 0272a7, # 013953); bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (# 0272a7), till (# 013953)); / * Borders * / border: 1px solid # 002232; -moz-box-skugga: inset 0px 0px 1px # edf9ff; -webkit-box-skugga: inset 0px 0px 1px # edf9ff; boxskugga: inset 0px 0px 1px # edf9ff; #menu li float: left; text-align: center; positioner: relativ; vaddering: 4px 10px 4px 10px; margin-höger: 30px; margin-top: 7PX; kant: none; #menu li: sväva border: 1px solid # 777777; vaddering: 4px 9px 4px 9px; / * Bakgrundsfärg och gradienter * / bakgrund: # F4F4F4; bakgrund: -moz-linjär-gradient (topp, # F4F4F4, #EEEEEE); bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (# F4F4F4), till (#EEEEEE)); / * Avrundade hörn * / -moz-gräns-radie: 5px 5px 0px 0px; -webkit-gräns-radie: 5px 5px 0px 0px; gränsstråle: 5px 5px 0px 0px; #menu li a font-family: Arial, Helvetica, sans-serif; font-size: 14px; färg: #EEEEEE; display: block; disposition: 0; text-decoration: none; textskugga: 1px 1px 1px # 000; #menu li: sväva en färg: # 161616; textskugga: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; bakgrund: url ("img / drop.png") no-repeat right 8px; #menu li: sväva .drop bakgrund: url ("img / drop.png") no-repeat right 7px; / * Drop Down * / .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; flyta till vänster; position: absolute; vänster: -999em; / * Döljer nedrullningen * / text-align: left; vaddering: 10px 5px 10px 5px; gränsen: 1px fast # 777777; border-top: none; / * Gradient bakgrund * / bakgrund: # F4F4F4; bakgrund: -moz-linjär-gradient (topp, #EEEEEE, #BBBBBB); bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (#EEEEEE), till (#BBBBBB)); / * Avrundade hörn * / -moz-gräns-radie: 0px 5px 5px 5px; -webkit-gräns-radie: 0px 5px 5px 5px; gränsstråle: 0px 5px 5px 5px; .dropdown_1column width: 280px; .dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .downdown_5columns width: 700px; #menu li: hover .dropdown_1column, # meny li: sväva .dropdown_2kolumner, #menu li: sväva .dropdown_3columns, #menu li: sväva .dropdown_4columns, #menu li: sväva .dropdown_5columns left: -1px; top: auto; / * Kolumner * / .col_1, .col_2, .col_3, .col_4, .col_5 display: inline; flyta till vänster; position: relativ; marginal-vänster: 5px; marginal-höger: 5px; .col_1 width: 130px; .col_2 width: 270px; .col_3 width: 410px; .col_4 width: 550px; .col_5 width: 690px; / * Högerjustering * / #menu. menu_right float: right; margin-höger: 0px; #menu li .align_right / * Avrundade hörn * / -moz-gränsen-radie: 5px 0px 5px 5px; -webkit-gräns-radie: 5px 0px 5px 5px; gränsstråle: 5px 0px 5px 5px; #menu li: sväva .align_right left: auto; höger: -1px; top: auto; / * Drop Down Content Stylings * / #menu p, #menu h2, #menu h3, #menu ul li font-family: Arial, Helvetica, sans-serif; line-height: 21px; font-size: 12px; text-align: left; textskugga: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; font-weight: 400; knipning: -1px; marginal: 7px 0 14px 0; padding-bottom: 14px; gränsbotten: 1px fast # 666666; #menu h3 font-size: 14px; marginal: 7px 0 14px 0; padding-bottom: 7PX; gränsbotten: 1px fast # 888888; #menu p linjehöjd: 18px; marginal: 0 0 10px 0; #menu li: sväva div font-size: 12px; color: # 015b86; #menu li: sväva div a: svävar färg: # 029feb; .strong font-weight: bold; .italic font-style: italic; .imgshadow background: #FFFFFF; padding: 4px; gränsen: 1px fast # 777777; margin-top: 5px; -moz-box-skugga: 0px 0px 5px # 666666; -webkit-box-skugga: 0px 0px 5px # 666666; boxskugga: 0px 0px 5px # 666666; .img_left / * Bildstavar till vänster * / bredd: auto; flyta till vänster; marginal: 5px 15px 5px 5px; #menu li. black_box bakgrundsfärg: # 333333; färg: #eeeeee; textskugga: 1px 1px 1px # 000; vaddering: 4px 6px 4px 6px; / * Avrundade hörn * / -moz-gräns-radie: 5px; -webkit-gräns-radie: 5px; gränsstråle: 5px; / * Shadow * / -webkit-box-skugga: inset 0 0 3px # 000000; -moz-box-shadow: inset 0 0 3px # 000000; boxskugga: inset 0 0 3px # 000000; #menu li ul list-style: none; padding: 0; marginal: 0 0 12px 0; #menu li ul li font-size: 12px; line-height: 24 bildpunkter; positioner: relativ; textskugga: 1px 1px 1px #ffffff; padding: 0; marginal: 0; float: none; text-align: left; bredd: 130 x; #menu li ul li: sväva bakgrund: ingen; kant: none; padding: 0; marginal: 0; #menu li .greybox li bakgrund: # F4F4F4; gränsen: 1px solid #bbbbbb; marginal: 0px 0px 4px 0px; vaddering: 4px 6px 4px 6px; bredd: 116px; / * Avrundade hörn * / -moz-gräns-radie: 5px; -webkit-gräns-radie: 5px; gränsstråle: 5px; #menu li .greybox li: sväva bakgrund: #ffffff; gränsen: 1px solid #aaaaaa; vaddering: 4px 6px 4px 6px; marginal: 0px 0px 4px 0px; Jag hoppas att du har haft den här handledningen om att skapa mega-menyer. Tack för att du följer med!
Om du behöver en snabb utgångspunkt för att bygga en professionell webbplats, kan du också bläddra igenom vårt galleri av CSS Templates. De erbjuder ett antal färdiga, professionella funktioner.
