Share
Vaak gebruikt op e-commerce of grootschalige websites, mega-menu's worden steeds populairder, omdat ze een effectieve oplossing bieden voor het weergeven van veel inhoud met behoud van een schone lay-out. In deze zelfstudie leren we hoe u een geweldig, alleen-CSS mega-dropdownmenu kunt bouwen met behulp van leuke CSS3-functies.
Als u op zoek bent naar een snel startpunt, bladert u door onze CSS-sjablonen. Of huur een CSS3-expert in. Laten we anders beginnen met deze zelfstudie.
Laten we beginnen met een basismenu, gebouwd met een ongeordende lijst en wat standaard CSS-styling.
We zullen nu wat standaard CSS-styling toepassen. Voor de menubox definiëren we een vaste breedte die we centreren door de linker- en rechtermarges in te stellen op "automatisch".
#menu lijststijl: geen; width: 940px; marge: 30px auto 0px auto; hoogte: 43px; opvulling: 0px 20px 0px 20px;
Laten we nu kijken hoe we dit kunnen verbeteren met enkele CSS3-functies. We moeten verschillende syntaxes gebruiken voor Webkit-gebaseerde browsers (zoals Safari) en voor Mozilla-gebaseerde browsers (zoals Firefox).
Voor afgeronde hoeken is de syntaxis:
-moz-border-radius: 10px -webkit-border-radius: 10px; grensradius: 10px;
Voor de achtergrond gebruiken we verlopen en een terugvalkleur voor oudere browsers. Om consistentie te behouden bij het kiezen van kleuren, is er een geweldige tool genaamd Facade waarmee je lichtere en donkerdere tonen van een basiskleur kunt vinden.
achtergrond: # 014464; achtergrond: -moz-linear-gradient (top, # 0272a7, # 013953); achtergrond: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (# 0272a7), tot (# 013953));
De eerste regel past een eenvoudige achtergrondkleur toe (voor oudere browsers); de tweede en derde regel maken een verloop van boven naar beneden met twee kleuren: # 0272a7 en # 013953.
We kunnen nu een donkerdere rand toevoegen en het ontwerp oppoetsen met een "fake" insteekrand gemaakt met de "box-shadow" -functie. De syntaxis is hetzelfde voor alle compatibele browsers: de eerste waarde is de horizontale verschuiving, de tweede is de verticale verschuiving, de derde is de vervagingsradius (een kleine waarde maakt het scherper, het zal in ons voorbeeld 1 pixel zijn) . We hebben alle verschuivingen op 0 gezet, zodat de vervagingswaarde een uniforme lichtgrens zal creëren:
-moz-box-shadow: inzet 0px 0px 1px # edf9ff; -webkit-box-shadow: inzet 0px 0px 1px # edf9ff; box-shadow: inzet 0px 0px 1px # edf9ff;
Dit is de uiteindelijke CSS-code voor de container #menu:
#menu lijststijl: geen; width: 940px; marge: 30px auto 0px auto; hoogte: 43px; opvulling: 0px 20px 0px 20px; / * Afgeronde hoeken * / -moz-border-radius: 10px; -webkit-border-radius: 10px; grensradius: 10px; / * Achtergrondkleur en verlopen * / achtergrond: # 014464; achtergrond: -moz-linear-gradient (top, # 0272a7, # 013953); achtergrond: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (# 0272a7), tot (# 013953)); / * Grenzen * / rand: 1px vast # 002232; -moz-box-shadow: inzet 0px 0px 1px # edf9ff; -webkit-box-shadow: inzet 0px 0px 1px # edf9ff; box-shadow: inzet 0px 0px 1px # edf9ff;
We beginnen met alle menu-items links uitgelijnd en plaatsen deze met een marge-rechts (de opvulling is nodig voor de hover-status):
#menu li float: left; display: block; text-align: center; position: relative; opvulling: 4px 10px 4px 10px; margin-right: 30px; margin-top: 7px; border: none;
Voor de hover-status en de vervolgkeuzelijst heb ik een grijs kleurenschema voor de achtergrond gekozen.
De fallback-kleur is lichtgrijs (# F4F4F4) en het verloop wordt van boven (# F4F4F4) naar beneden (#EEEEEE) toegepast. Afgeronde hoeken worden alleen toegepast op de bovenste hoeken, omdat we het vervolgkeuzemenu onder de menu-items plakken.
achtergrond: # F4F4F4; achtergrond: -moz-linear-gradient (bovenaan, # F4F4F4, #EEEEEE); achtergrond: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (# F4F4F4), tot (#EEEEEE));
De linker- en rechterpadding zijn hier iets kleiner omdat we een rand van 1 pixel hebben bij het zweven. Als we dezelfde opvulling behouden, worden menu-items twee pixels aan de rechterkant ingedrukt vanwege de linker- en rechtergrenzen die zijn toegevoegd aan de muisaanwijzer. Om dat te voorkomen, verwijderen we aan beide zijden 1 pixel padding, dus we hebben 9 pixels in plaats van 10 pixels.
rand: 1px vast # 777777; opvulling: 4px 9px 4px 9px;
Vervolgens voegen we alleen afgeronde hoeken toe aan de bovenkant, zodat de vervolgkeuzelijst perfect blijft onder het bovenliggende menu-item:
-moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; grensradius: 5px 5px 0px 0px;
Hier is de uiteindelijke CSS voor de menu-items bij zweven:
#menu li: hover border: 1px solid # 777777; opvulling: 4px 9px 4px 9px; / * Achtergrondkleur en -verlopen * / achtergrond: # F4F4F4; achtergrond: -moz-linear-gradient (bovenaan, # F4F4F4, #EEEEEE); achtergrond: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (# F4F4F4), tot (#EEEEEE)); / * Afgeronde hoeken * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; grensradius: 5px 5px 0px 0px;
Voor de links passen we een mooie tekstschaduw toe met een eenvoudige syntaxis: de eerste en tweede waarden zijn horizontale en verticale verschuivingen voor de schaduw (1 pixel in ons voorbeeld), de derde is de vervaging (ook 1 pixel) en dan hebben we de (zwarte) kleur:
tekstschaduw: 1px 1px 1px # 000;
Hier is de definitieve CSS voor de links:
#menu li a font-family: Arial, Helvetica, sans-serif; font-size: 14px; kleur: #EEEEEE; display: block; schets: 0; text-decoration: none; tekstschaduw: 1px 1px 1px # 000;
Als de muisaanwijzer grijs is, gebruiken we een donkerdere kleur (# 161616) voor de links en de witte kleur voor de tekstschaduw:
#menu li: hover a color: # 161616; text-shadow: 1px 1px 1px #FFFFFF;
Ten slotte hebben we een manier nodig om aan te geven of er een vervolgkeuzelijst is of niet, door een eenvoudige pijlafbeelding als achtergrond te gebruiken, deze wordt rechts geplaatst met behulp van opvulling en de bovenmarge past zich er goed aan aan. Bij zweven wordt deze bovenmarge ingesteld op 7 pixels in plaats van 8 omdat er een extra rand verschijnt bij een muisaanwijzer (anders wordt de pijl 1 pixel omlaag geduwd bij zweven):
Accentsconagua
#menu li .drop padding-right: 21px; achtergrond: url ("img / drop.png") no-repeat right 8px; #menu li: hover .drop background: url ("img / drop.png") no-repeat right 7px; Hier is onze definitieve code voor de menubox en links; alleen het item 'startpagina' heeft voorlopig geen vervolgkeuzemenu:
#menu lijststijl: geen; width: 940px; marge: 30px auto 0px auto; hoogte: 43px; opvulling: 0px 20px 0px 20px; / * Afgeronde hoeken * / -moz-border-radius: 10px; -webkit-border-radius: 10px; grensradius: 10px; / * Achtergrondkleur en verlopen * / achtergrond: # 014464; achtergrond: -moz-linear-gradient (top, # 0272a7, # 013953); achtergrond: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (# 0272a7), tot (# 013953)); / * Grenzen * / rand: 1px vast # 002232; -moz-box-shadow: inzet 0px 0px 1px # edf9ff; -webkit-box-shadow: inzet 0px 0px 1px # edf9ff; box-shadow: inzet 0px 0px 1px # edf9ff; #menu li zweven: links; display: block; text-align: center; position: relative; opvulling: 4px 10px 4px 10px; margin-right: 30px; margin-top: 7px; border: none; #menu li: hover border: 1px solid # 777777; opvulling: 4px 9px 4px 9px; / * Achtergrondkleur en -verlopen * / achtergrond: # F4F4F4; achtergrond: -moz-linear-gradient (bovenaan, # F4F4F4, #EEEEEE); achtergrond: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (# F4F4F4), tot (#EEEEEE)); / * Afgeronde hoeken * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; grensradius: 5px 5px 0px 0px; #menu li a font-family: Arial, Helvetica, sans-serif; font-size: 14px; kleur: #EEEEEE; display: block; schets: 0; text-decoration: none; tekstschaduw: 1px 1px 1px # 000; #menu li: hover a color: # 161616; text-shadow: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; achtergrond: url ("img / drop.png") no-repeat right 8px; #menu li: hover .drop background: url ("img / drop.png") no-repeat right 7px; En het resultaat is:
Een "klassiek" vervolgkeuzemenu bevat meestal lijsten die zijn genest in bovenliggende lijstitems en ziet er als volgt uit:
Voor ons Mega-menu gebruiken we in plaats van geneste lijsten gewoon standaard DIV's, die werken zoals elke geneste lijst:
Dit wordt de basisstructuur voor de vervolgkeuzelijst. Het idee erachter is om elke soort inhoud te kunnen opnemen, zoals alinea's, afbeeldingen, aangepaste lijsten of een contactformulier, georganiseerd in kolommen.
Containers met verschillende formaten bevatten de volledige inhoud van de vervolgkeuzelijst. Ik heb de tagnamen gekozen op basis van het aantal kolommen dat ze bevatten.
Om de vervolgkeuzelijsten te verbergen, gebruiken we absolute positionering met een negatieve linkermarge:
positie: absoluut; left: -999em;
De fallback-achtergrondkleur is dezelfde als die voor de menu-items. Moderne browsers geven een verloop weer beginnend met #EEEEEE bovenaan (om overeen te komen met het bovenliggende menu-item verloop) en eindigend met #BBBBBB onderaan:
background: # F4F4F4; achtergrond: -moz-linear-gradient (bovenaan, #EEEEEE, #BBBBBB); achtergrond: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (#EEEEEE), tot (#BBBBBB));
We gebruiken opnieuw afgeronde hoeken, behalve de linkerbovenhoek:
-moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; grensradius: 0px 5px 5px 5px;
.dropdown_1 column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; positie: absoluut; left: -999em; / * Verbergt het vervolgkeuzemenu * / text-align: left; opvulling: 10px 5px 10px 5px; rand: 1px vast # 777777; border-top: none; / * Gradient achtergrond * / achtergrond: # F4F4F4; achtergrond: -moz-linear-gradient (bovenaan, #EEEEEE, #BBBBBB); achtergrond: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (#EEEEEE), tot (#BBBBBB)); / * Afgeronde hoeken * / -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; grensradius: 0px 5px 5px 5px;
Laten we, om dit te illustreren, eens kijken hoe het eruit zou zien als we geen aandacht hadden besteed aan details:
Dit is ons voorbeeld:
Zoals u kunt zien, blijft de vervolgkeuzelijst mooi bij het bovenliggende menu-item.
Om een perfecte dropdown-container te hebben, moeten we de breedte voor elke container specificeren:
.dropdown_1column width: 140px; .dropdown_2columns width: 280px; .dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .dropdown_5columns width: 700px;
En om de drop-downs op de muisaanwijzer weer te geven, gebruiken we eenvoudigweg:
#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; top: auto;
Onze lessen staan klaar om te worden opgenomen in ons menu. We gebruiken ze allemaal vanaf de 5-kolommenindeling tot de vervolgkeuzelijst met één kolom:
5 Kolommen inhoud
4 Kolommen inhoud
3 Kolommen inhoud
2 Kolommen inhoud
1 Kolominhoud
Hier is een voorbeeld van de bovenstaande code:
Nu we de containers klaar hebben, maken we kolommen van steeds groter formaat, volgens de principes van het 960-rastersysteem.
.col_1, .col_2, .col_3, .col_4, .col_5 display: inline; zweven: links; positie: relatief; marge links: 5px; margin-right: 5px; .col_1 width: 130px; .col_2 width: 270px; .col_3 width: 410px; .col_4 width: 550px; .col_5 width: 690px;
Hier is een voorbeeld van een drop-down die meerdere kolommen bevat. In dit voorbeeld hebben we verschillende combinaties met allerlei kolommen:
Dit is een inhoud van 5 kolommen
Dit is een inhoud van 1 kolom
Dit is een inhoud van 1 kolom
Dit is een inhoud van 1 kolom
Dit is een inhoud van 1 kolom
Dit is een inhoud van 1 kolom
Dit is een inhoud van 4 kolommen
Dit is een inhoud van 1 kolom
Dit is een inhoud van 3 kolommen
Dit is een inhoud van 2 kolommen
Voorbeeld code:
Laten we nu eens kijken hoe we ons menu en de vervolgkeuzemenu's kunnen afstellen op de rechterrand van de navigatiebalk; niet alleen het menu-item, maar de dropdown-container moet ook worden gewijzigd.
Om dit te bereiken, voegen we een nieuwe klasse toe genaamd .menu_right naar het bovenliggende lijstitem, dus we stellen de rechtermarge opnieuw in en duwen deze naar rechts:
#menu .menu_right float: right; margin-right: 0px;
Laten we vervolgens de vervolgkeuzelijst bekijken. In de vorige CSS-code zijn afgeronde hoeken toegepast op alle hoeken, behalve de linkerbovenhoek, om de achtergrond van het bovenliggende menu-item overeen te laten komen. Nu willen we dat dit vervolgkeuzemenu bij de rechterrand van het bovenliggende menu-item blijft. Dus we overschrijven de grensradiuswaarden met een nieuwe klasse met de naam .align_right en stellen de rechterbovenhoek in op 0.
#menu li .align_right / * Afgeronde hoeken * / -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; grensradius: 5px 0px 5px 5px;
Last but not least, we willen dat de drop-down aan de rechterkant verschijnt; dus we zullen onze nieuwe klasse gebruiken en de linkse waarde resetten, en het vervolgens naar rechts laten plakken:
#menu li: hover .align_right left: auto; rechts: -1px; top: auto;
Nu is het klaar om te worden gebruikt in het menu:
Dit is een inhoud van 1 kolom
En een kleine preview van de bovenstaande code:
Nu we de hele structuur gereed hebben, kunnen we zoveel inhoud toevoegen als we willen: tekst, lijsten, afbeeldingen, enz.
Laten we beginnen met een basisstijl voor alinea's en kopjes:
#menu p, #menu h2, #menu h3, #menu ul li font-family: Arial, Helvetica, sans-serif; line-height: 21px; font-size: 12px; text-align: left; text-shadow: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; font-weight: 400; letter-spacing: -1px; marge: 7px 0 14px 0; padding-bottom: 14px; border-bottom: 1px solid # 666666; #menu h3 font-size: 14px; marge: 7px 0 14px 0; padding-bottom: 7px; border-bottom: 1px solid # 888888; #menu p line-height: 18px; marge: 0 0 10px 0; .strong font-weight: bold; .italic font-style: italic;
We kunnen een mooie blauwe kleur toepassen op de links in de vervolgkeuzelijst:
#menu li: hover div a font-size: 12px; color: # 015b86; #menu li: hover div a: hover color: # 029feb;
Laten we onze lijsten vernieuwen; we moeten een aantal styling resetten, zoals de achtergrondkleur of de randen die in de navigatiebalk worden gebruikt:
#menu li ul lijststijl: geen; padding: 0; marge: 0 0 12px 0; #menu li ul li font-size: 12px; line-height: 24px; position: relative; text-shadow: 1px 1px 1px #ffffff; padding: 0; margin: 0; float: none; text-align: left; Breedte: 130 x; #menu li ul li: hover background: none; border: none; padding: 0; margin: 0;
.imgshadow background: #FFFFFF; padding: 4px; rand: 1px vast # 777777; margin-top: 5px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-box-shadow: 0px 0px 5px # 666666; vakschaduw: 0px 0px 5px # 666666;
En om een alinea met een afbeelding aan de linkerkant te maken:
.img_left width: auto; float: left; marge: 5px 15px 5px 5px;
Om bepaalde inhoud te markeren, is hier een voorbeeld van een donkere doos met afgeronde hoeken en een subtiele inzetschaduw:
#menu li .black_box background-colour: # 333333; kleur: #eeeeee; tekstschaduw: 1px 1px 1px # 000; opvulling: 4px 6px 4px 6px; / * Afgeronde hoeken * / -moz-border-radius: 5px; -webkit-border-radius: 5px; grensradius: 5px; / * Schaduw * / -webkit-vak-schaduw: inzet 0 0 3px # 000000; -moz-box-shadow: inzet 0 0 3px # 000000; vakschaduw: inzet 0 0 3px # 000000;
En om te eindigen, hier is een andere manier om je lijsten te stijlen met, wederom, wat CSS3:
#menu li .greybox li achtergrond: # F4F4F4; rand: 1px vast #bbbbbb; marge: 0px 0px 4px 0px; opvulling: 4px 6px 4px 6px; width: 116px; / * Afgeronde hoeken * / -moz-border-radius: 5px; -webkit-border-radius: 5px; grensradius: 5px; #menu li .greybox li: hover background: #ffffff; border: 1px solid #aaaaaa; opvulling: 4px 6px 4px 6px; marge: 0px 0px 4px 0px;
Alle browsers hanteren de zweeftekst op niet-ankertags ... behalve Internet Explorer 6; dus ons Mega-menu werkt nog steeds niet met deze oude browser. We kunnen dit probleem oplossen dankzij een gedragsbestand dat deze functionaliteit zal toevoegen. Je kunt het hier vinden en conditionele opmerkingen gebruiken om alleen IE6 te targeten; meer uitleg is te vinden via dit artikel van CSS-Tricks.
Als u IE6 wilt targeten, gebruiken we de volgende code:
Ik heb in deze zelfstudie enkele PNG-bestanden gebruikt en, zoals iedereen weet, biedt IE6 geen ondersteuning voor transparantie, daarom hebben we verschillende oplossingen:
Ik zal je de keuze laten die past bij jouw behoeften. Laten we nu eens een volledig werkend voorbeeld bekijken.
Mega vervolgkeuzemenu
Hallo en welkom hier! Dit is een demonstratie van de mogelijkheden van dit geweldige Mega Drop Down Menu.
Dit item wordt geleverd met een groot aantal voorbereide typografische stijlen, zoals kopjes, lijsten, enz.
Dit megamenu is getest in alle gangbare browsers.
Dit is een donkergrijze boxtekst. Fusce in metus bij enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.
Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.
Dit is een voorbeeld van een cursieve tekst. Consequat scelerisque. Fusce sed lectus bij arcu mollis accumsan bij nec nisi porta quis sit amet.
Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, sempre in ultricies vitae, vulputate porttitor neque.
Dit is een voorbeeld van een vetgedrukte tekst. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.
Maecenas eget eros lorem, neg pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.Lees meer ...
Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.Lees meer ...
Dit is een zwarte doos, je kunt het gebruiken om wat inhoud op te fleuren. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut specimentum ligula est vel orci. Donec interdum lacus bij velit varius gravida. Nulla ipsum risus.
Maecenas eget eros lorem, neg pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem specimentum.Lees meer ...
Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. Lees verder…
body, ul, li font-size: 14px; font-family: Arial, Helvetica, sans-serif; line-height: 21px; text-align: left; / * Navigatiebalk * / #menu lijststijl: geen; width: 940px; marge: 30px auto 0px auto; hoogte: 43px; opvulling: 0px 20px 0px 20px; / * Afgeronde hoeken * / -moz-border-radius: 10px; -webkit-border-radius: 10px; grensradius: 10px; / * Achtergrondkleur en verlopen * / achtergrond: # 014464; achtergrond: -moz-linear-gradient (top, # 0272a7, # 013953); achtergrond: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (# 0272a7), tot (# 013953)); / * Grenzen * / rand: 1px vast # 002232; -moz-box-shadow: inzet 0px 0px 1px # edf9ff; -webkit-box-shadow: inzet 0px 0px 1px # edf9ff; box-shadow: inzet 0px 0px 1px # edf9ff; #menu li zweven: links; text-align: center; position: relative; opvulling: 4px 10px 4px 10px; margin-right: 30px; margin-top: 7px; border: none; #menu li: hover border: 1px solid # 777777; opvulling: 4px 9px 4px 9px; / * Achtergrondkleur en -verlopen * / achtergrond: # F4F4F4; achtergrond: -moz-linear-gradient (bovenaan, # F4F4F4, #EEEEEE); achtergrond: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (# F4F4F4), tot (#EEEEEE)); / * Afgeronde hoeken * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; grensradius: 5px 5px 0px 0px; #menu li a font-family: Arial, Helvetica, sans-serif; font-size: 14px; kleur: #EEEEEE; display: block; schets: 0; text-decoration: none; tekstschaduw: 1px 1px 1px # 000; #menu li: hover a color: # 161616; text-shadow: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; achtergrond: url ("img / drop.png") no-repeat right 8px; #menu li: hover .drop background: url ("img / drop.png") no-repeat right 7px; / * Drop Down * / .dropdown_1 column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; float: left; positie: absoluut; left: -999em; / * Verbergt het vervolgkeuzemenu * / text-align: left; opvulling: 10px 5px 10px 5px; rand: 1px vast # 777777; border-top: none; / * Gradient achtergrond * / achtergrond: # F4F4F4; achtergrond: -moz-linear-gradient (bovenaan, #EEEEEE, #BBBBBB); achtergrond: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (#EEEEEE), tot (#BBBBBB)); / * Afgeronde hoeken * / -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; grensradius: 0px 5px 5px 5px; .dropdown_1column width: 140px; .dropdown_2columns width: 280px; .dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .dropdown_5columns width: 700px; #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; top: auto; / * Kolommen * / .col_1, .col_2, .col_3, .col_4, .col_5 display: inline; zweven: links; positie: relatief; marge links: 5px; margin-right: 5px; .col_1 width: 130px; .col_2 width: 270px; .col_3 width: 410px; .col_4 width: 550px; .col_5 width: 690px; / * Right alignment * / #menu. menu_right float: right; margin-right: 0px; #menu li .align_right / * Afgeronde hoeken * / -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; grensradius: 5px 0px 5px 5px; #menu li: hover .align_right left: auto; rechts: -1px; top: auto; / * Dropdown 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; text-shadow: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; font-weight: 400; letter-spacing: -1px; marge: 7px 0 14px 0; padding-bottom: 14px; border-bottom: 1px solid # 666666; #menu h3 font-size: 14px; marge: 7px 0 14px 0; padding-bottom: 7px; border-bottom: 1px solid # 888888; #menu p line-height: 18px; marge: 0 0 10px 0; #menu li: hover div a font-size: 12px; color: # 015b86; #menu li: hover div a: hover color: # 029feb; .strong font-weight: bold; .italic font-style: italic; .imgshadow background: #FFFFFF; padding: 4px; rand: 1px vast # 777777; margin-top: 5px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-box-shadow: 0px 0px 5px # 666666; vakschaduw: 0px 0px 5px # 666666; .img_left / * Afbeelding blijft aan de linkerkant plakken * / width: auto; float: left; marge: 5px 15px 5px 5px; #menu li .black_box background-colour: # 333333; kleur: #eeeeee; tekstschaduw: 1px 1px 1px # 000; opvulling: 4px 6px 4px 6px; / * Afgeronde hoeken * / -moz-border-radius: 5px; -webkit-border-radius: 5px; grensradius: 5px; / * Schaduw * / -webkit-vak-schaduw: inzet 0 0 3px # 000000; -moz-box-shadow: inzet 0 0 3px # 000000; vakschaduw: inzet 0 0 3px # 000000; #menu li ul lijststijl: geen; padding: 0; marge: 0 0 12px 0; #menu li ul li font-size: 12px; line-height: 24px; position: relative; text-shadow: 1px 1px 1px #ffffff; padding: 0; margin: 0; float: none; text-align: left; Breedte: 130 x; #menu li ul li: hover background: none; border: none; padding: 0; margin: 0; #menu li .greybox li background: # F4F4F4; rand: 1px vast #bbbbbb; marge: 0px 0px 4px 0px; opvulling: 4px 6px 4px 6px; width: 116px; / * Afgeronde hoeken * / -moz-border-radius: 5px; -webkit-border-radius: 5px; grensradius: 5px; #menu li .greybox li: hover background: #ffffff; border: 1px solid #aaaaaa; opvulling: 4px 6px 4px 6px; marge: 0px 0px 4px 0px; Ik hoop dat je deze tutorial leuk vond om mega-menu's te maken. Bedankt voor het volgende!
Als u een snel startpunt voor het bouwen van een professionele website nodig hebt, bladert u dan door onze galerij met CSS-sjablonen. Ze bieden een aantal kant-en-klare, professionele functies.
