Share
Mega-Menüs, die häufig im E-Commerce oder auf großen Websites verwendet werden, werden immer beliebter, da sie eine effektive Lösung für die Anzeige vieler Inhalte sind und gleichzeitig ein sauberes Layout bieten. In diesem Lernprogramm erfahren Sie, wie Sie ein Browser-einzigartiges Dropdown-Mega-Menü erstellen, das nur CSS enthält und schöne CSS3-Funktionen verwendet.
Wenn Sie nach einem schnellen Ausgangspunkt suchen, stöbern Sie in unseren CSS-Vorlagen. Oder einen CSS3-Experten einstellen. Ansonsten beginnen wir mit diesem Tutorial.
Beginnen wir mit einem einfachen Menü, das aus einer ungeordneten Liste und einem grundlegenden CSS-Stil besteht.
Wir werden jetzt einige grundlegende CSS-Stile anwenden. Für den Menücontainer definieren wir eine feste Breite, die wir zentrieren, indem Sie den linken und den rechten Rand auf "auto" setzen..
#menu list-style: none; Breite: 940px; Marge: 30px auto 0px auto; Höhe: 43px; Auffüllen: 0px 20px 0px 20px;
Nun wollen wir sehen, wie wir es mit einigen CSS3-Funktionen verbessern können. Für Webkit-basierte Browser (wie Safari) und für Mozilla-basierte Browser (wie Firefox) müssen unterschiedliche Syntaxen verwendet werden..
Für abgerundete Ecken lautet die Syntax:
-moz-border-radius: 10px -webkit-border-radius: 10px; Grenzradius: 10px;
Für den Hintergrund verwenden wir für ältere Browser Farbverläufe und eine Fallback-Farbe. Um die Konsistenz bei der Farbauswahl zu erhalten, gibt es ein erstaunliches Werkzeug namens Facade, mit dem Sie hellere und dunklere Töne einer Grundfarbe finden können.
Hintergrund: # 014464; Hintergrund: -moz-linearer Gradient (oben, # 0272a7, # 013953); Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (# 0272a7) bis (# 013953));
Die erste Zeile wendet eine einfache Hintergrundfarbe an (für ältere Browser). Die zweite und dritte Linie erzeugen mit zwei Farben einen Farbverlauf von oben nach unten: # 0272a7 und # 013953.
Wir können jetzt einen dunkleren Rand hinzufügen und das Design mit einem "falschen" Einfügungsrand polieren, der mit der "Box-Shadow" -Funktion erstellt wird. Die Syntax ist für alle kompatiblen Browser gleich: Der erste Wert ist der horizontale Versatz, der zweite ist der vertikale Versatz, der dritte ist der Unschärfekreis (ein kleiner Wert macht ihn schärfer; in unserem Beispiel wird er 1 Pixel sein). . Wir setzen alle Offsets auf 0, damit der Unschärfewert einen einheitlichen hellen Rand erzeugt:
-Moz-Box-Schatten: Inset 0px 0px 1px # edf9ff; -webkit-box-shadow: Einfügung von 0px 0px 1px # edf9ff; Box-Schatten: Einfügen 0px 0px 1px # edf9ff;
Hier ist der endgültige CSS-Code für den # menu-Container:
#menu list-style: none; Breite: 940px; Marge: 30px auto 0px auto; Höhe: 43px; Auffüllen: 0px 20px 0px 20px; / * Abgerundete Ecken * / -moz-border-radius: 10px; -webkit-border-radius: 10px; Grenzradius: 10px; / * Hintergrundfarbe und Farbverläufe * / background: # 014464; Hintergrund: -moz-linearer Gradient (oben, # 0272a7, # 013953); Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (# 0272a7) bis (# 013953)); / * Borders * / border: 1px fest # 002232; -moz-box-shadow: Einfügen 0px 0px 1px # edf9ff; -webkit-box-shadow: Einfügung von 0px 0px 1px # edf9ff; Box-Schatten: Einfügen 0px 0px 1px # edf9ff;
Wir beginnen mit allen Menüpunkten, die nach links ausgerichtet sind, und setzen sie mit einem rechten Rand ein (die Auffüllung wird für den Hover-Status erforderlich sein):
#menu li float: left; Bildschirmsperre; Text ausrichten: Mitte; Position: relativ; Auffüllen: 4px 10px 4px 10px; Rand rechts: 30px; Rand oben: 7px; Grenze: keine;
Für den Hover-Status und das Dropdown-Menü habe ich ein graues Farbschema für den Hintergrund ausgewählt.
Die Fallback-Farbe ist hellgrau (# F4F4F4) und der Farbverlauf wird von oben (# F4F4F4) nach unten (#EEEEEE) angewendet. Abgerundete Ecken werden nur auf die oberen Ecken angewendet, da sich die Dropdown-Liste direkt unter den Menüpunkten befindet.
Hintergrund: # F4F4F4; Hintergrund: -moz-linearer Gradient (oben, # F4F4F4, #EEEEEE); Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (# F4F4F4) bis (#EEEEEE));
Die linke und rechte Auffüllung ist hier etwas kleiner, da beim Schweben ein Rand von 1 Pixel erscheint. Wenn wir die gleiche Auffüllung beibehalten, werden die Menüelemente um zwei Pixel nach rechts verschoben, da der linke und rechte Rand beim Mauszeiger hinzugefügt werden. Um dies zu vermeiden, entfernen wir auf beiden Seiten 1 Pixel Abstand, so dass wir 9 statt 10 Pixel haben.
Grenze: 1px fest # 777777; Polsterung: 4px 9px 4px 9px;
Dann fügen wir nur abgerundete Ecken an der Oberseite hinzu, damit das Dropdown-Menü perfekt unter dem übergeordneten Menüelement bleibt:
-Moz-Border-Radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; Grenzradius: 5px 5px 0px 0px;
Hier ist das letzte CSS für die Menüpunkte in hover:
#menu li: hover border: 1px solid # 777777; Polsterung: 4px 9px 4px 9px; / * Hintergrundfarbe und Farbverläufe * / background: # F4F4F4; Hintergrund: -moz-linearer Gradient (oben, # F4F4F4, #EEEEEE); Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (# F4F4F4) bis (#EEEEEE)); / * Abgerundete Ecken * / -moz-Rahmenradius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; Grenzradius: 5px 5px 0px 0px;
Für die Links wenden wir einen schönen Textschatten mit einer einfachen Syntax an: Der erste und der zweite Wert sind horizontale und vertikale Versätze für den Schatten (in unserem Beispiel 1 Pixel), der dritte ist die Unschärfe (ebenfalls 1 Pixel) und dann haben wir die (schwarze) Farbe:
Text-Schatten: 1px 1px 1px # 000;
Hier ist das letzte CSS für die Links:
#menu li a font-family: Arial, Helvetica, serifenlos; Schriftgröße: 14px; Farbe: #EEEEEE; Bildschirmsperre; Umriss: 0; Textdekoration: keine; Text-Schatten: 1px 1px 1px # 000;
Da der Hintergrund grau ist, verwenden wir bei gedrückter Maustaste eine dunklere Farbe (# 161616) für die Links und die weiße Farbe für den Textschatten:
#menu li: hover a color: # 161616; Text-Schatten: 1px 1px 1px #FFFFFF;
Schließlich benötigen wir eine Möglichkeit, durch Dropdown-Anzeige als Hintergrundbild anzuzeigen, ob ein Dropdown vorhanden ist oder nicht. Er wird durch Auffüllen rechts positioniert und der obere Rand wird richtig ausgerichtet. Beim Schweben wird dieser obere Rand auf 7 Pixel anstelle von 8 gesetzt, da im Mauszeiger ein zusätzlicher Rand angezeigt wird (andernfalls wird der Pfeil beim Schweben um 1 Pixel nach unten verschoben):
Accentsconagua
#menu li .drop padding-right: 21px; Hintergrund: URL ("img / drop.png") keine Wiederholung rechts 8px; #menu li: hover .drop background: url ("img / drop.png") no-repeat right 7px; Hier ist unser endgültiger Code für den Menü-Container und die Links. Nur der "home" -Element hat momentan keinen Dropdown-Inhalt:
#menu list-style: none; Breite: 940px; Marge: 30px auto 0px auto; Höhe: 43px; Auffüllen: 0px 20px 0px 20px; / * Abgerundete Ecken * / -moz-border-radius: 10px; -webkit-border-radius: 10px; Grenzradius: 10px; / * Hintergrundfarbe und Farbverläufe * / background: # 014464; Hintergrund: -moz-linearer Gradient (oben, # 0272a7, # 013953); Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (# 0272a7) bis (# 013953)); / * Borders * / border: 1px fest # 002232; -moz-box-shadow: Einfügen 0px 0px 1px # edf9ff; -webkit-box-shadow: Einfügung von 0px 0px 1px # edf9ff; Box-Schatten: Einfügen 0px 0px 1px # edf9ff; #menu li float: left; Bildschirmsperre; Text ausrichten: Mitte; Position: relativ; Auffüllen: 4px 10px 4px 10px; Rand rechts: 30px; Rand oben: 7px; Grenze: keine; #menu li: hover border: 1px solid # 777777; Polsterung: 4px 9px 4px 9px; / * Hintergrundfarbe und Farbverläufe * / background: # F4F4F4; Hintergrund: -moz-linearer Gradient (oben, # F4F4F4, #EEEEEE); Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (# F4F4F4) bis (#EEEEEE)); / * Abgerundete Ecken * / -moz-Rahmenradius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; Grenzradius: 5px 5px 0px 0px; #menu li a Schriftfamilie: Arial, Helvetica, serifenlos; Schriftgröße: 14px; Farbe: #EEEEEE; Bildschirmsperre; Umriss: 0; Textdekoration: keine; Text-Schatten: 1px 1px 1px # 000; #menu li: hover eine color: # 161616; Text-Schatten: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; Hintergrund: URL ("img / drop.png") keine Wiederholung rechts 8px; #menu li: hover .drop background: url ("img / drop.png") no-repeat right 7px; Und das Ergebnis ist:
Ein "klassisches" Dropdown-Menü enthält normalerweise Listen, die in übergeordneten Listenelementen verschachtelt sind, und sieht folgendermaßen aus:
Für unser Mega-Menü verwenden wir anstelle von verschachtelten Listen einfach Standard-DIVs, die wie jede verschachtelte Liste funktionieren:
Dies ist die Grundstruktur für das Dropdown. Die Idee dahinter ist, beliebige Inhalte wie Absätze, Bilder, benutzerdefinierte Listen oder ein Kontaktformular in Spalten einbinden zu können.
Container mit unterschiedlichen Größen enthalten den gesamten Dropdown-Inhalt. Ich habe die Tag-Namen nach der Anzahl der Spalten ausgewählt, die sie enthalten werden.
Um die Dropdowns auszublenden, verwenden wir die absolute Positionierung mit einem negativen linken Rand:
Position: absolut; links: -999em;
Die Hintergrundfarbe für den Hintergrund ist die gleiche, die für die Menüelemente verwendet wird. Moderne Browser zeigen oben einen Farbverlauf an, der mit #EEEEEE beginnt (entsprechend dem Farbverlauf des übergeordneten Menüelements) und unten mit #BBBBBB enden:
Hintergrund: # F4F4F4; Hintergrund: -moz-linearer Gradient (oben, #EEEEEE, #BBBBBB); Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (#EEEEEE) bis (#BBBBBB));
Wir werden wieder abgerundete Ecken verwenden, mit Ausnahme der oberen linken:
-Moz-Border-Radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; Grenzradius: 0px 5px 5px 5px;
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; Position: absolut; links: -999em; / * Blendet die Dropdown-Liste aus * / text-align: left; Auffüllung: 10px 5px 10px 5px; Grenze: 1px fest # 777777; Rand oben: keine; / * Hintergrund mit Farbverlauf * / background: # F4F4F4; Hintergrund: -moz-linearer Gradient (oben, #EEEEEE, #BBBBBB); Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (#EEEEEE) bis (#BBBBBB)); / * Abgerundete Ecken * / -moz-Rahmenradius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; Grenzradius: 0px 5px 5px 5px;
Um dies zu veranschaulichen, schauen wir uns an, wie es aussehen würde, wenn wir nicht auf Details geachtet hätten:
Hier ist unser Beispiel:
Wie Sie sehen, bleibt das Dropdown-Menü gut an seinem übergeordneten Menüpunkt.
Um einen perfekten Dropdown-Container zu erhalten, müssen wir die Breite für jeden Container angeben:
.dropdown_1column width: 140px; .dropdown_2columns width: 280px; .dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .dropdown_5columns width: 700px;
Um die Dropdowns im Mauszeiger anzuzeigen, verwenden wir einfach:
#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;
Unsere Kurse sind bereit, in unser Menü aufgenommen zu werden. Wir werden jeden von ihnen verwenden, angefangen von der 5-Spalten-Anordnung bis hin zur einzelnen Spalte.
5 Spalteninhalt
4 Spalteninhalt
3 Spalteninhalt
2 Spalteninhalt
1 Spalteninhalt
Hier ist eine Vorschau des obigen Codes:
Jetzt, da wir die Container bereit haben, erstellen wir Säulen mit zunehmender Größe nach den Prinzipien des 960-Rastersystems.
.col_1, .col_2, .col_3, .col_4, .col_5 display: inline; Schwimmer: links; Position: relativ; Rand links: 5px; Rand rechts: 5px; .col_1 Breite: 130px; .col_2 Breite: 270px; .col_3 Breite: 410px; .col_4 Breite: 550px; .col_5 Breite: 690px;
Hier ist ein Beispiel für eine Dropdown-Liste mit mehreren Spalten. In diesem Beispiel haben wir verschiedene Kombinationen mit allen Arten von Spalten:
Dies ist ein Inhalt mit 5 Spalten
Dies ist ein Inhalt von 1 Spalte
Dies ist ein Inhalt von 1 Spalte
Dies ist ein Inhalt von 1 Spalte
Dies ist ein Inhalt von 1 Spalte
Dies ist ein Inhalt von 1 Spalte
Dies ist ein Inhalt von 4 Spalten
Dies ist ein Inhalt von 1 Spalte
Dies ist ein Inhalt von 3 Spalten
Dies ist ein Inhalt von 2 Spalten
Codevorschau:
Nun wollen wir sehen, wie wir unser Menü und den Dropdown-Inhalt am rechten Rand der Navigationsleiste ausrichten können. Nicht nur der Menüpunkt, sondern auch der Dropdown-Container sollte geändert werden.
Um dies zu erreichen, fügen wir eine neue Klasse hinzu .menu_right auf das übergeordnete Listenelement, also setzen wir den rechten Rand zurück und verschieben ihn nach rechts:
#menu .menu_right float: right; Rand rechts: 0px;
Als nächstes sehen wir das Dropdown. Im vorherigen CSS-Code wurden abgerundete Ecken auf alle Ecken mit Ausnahme des linken oberen Bereichs angewendet, um den Hintergrund des übergeordneten Menüelements zu erreichen. Jetzt möchten wir, dass diese Dropdown-Liste am rechten Rand des übergeordneten Menüelements bleibt. Also überschreiben wir die Werte für den Grenzradius mit einer neuen Klasse mit dem Namen .align_right und setzen die obere rechte Ecke auf 0.
#menu li .align_right / * abgerundete Ecken * / -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; Grenzradius: 5px 0px 5px 5px;
Zu guter Letzt wollen wir die Dropdown-Liste auf der rechten Seite erscheinen lassen. Wir werden also unsere neue Klasse verwenden und den linken Wert zurücksetzen und dann rechts halten:
#menu li: hover .align_right left: auto; rechts: -1px; oben: auto;
Jetzt kann es im Menü verwendet werden:
Dies ist ein Inhalt von 1 Spalte
Und eine kleine Vorschau des obigen Codes:
Nun, da wir die gesamte Struktur fertig haben, können wir so viel Inhalt hinzufügen, wie wir möchten: Text, Listen, Bilder usw.
Beginnen wir mit einigen Grundstilen für Absätze und Überschriften:
#menu p, #menu h2, #menu h3, #menu ul li Schriftfamilie: Arial, Helvetica, serifenlos; Zeilenhöhe: 21px; Schriftgröße: 12px; Text ausrichten: links; Text-Schatten: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; Schriftgewicht: 400; Buchstabenabstand: -1px; Marge: 7px 0 14px 0; Polsterung unten: 14px; Rahmen unten: 1px fest # 666666; #menu h3 Schriftgröße: 14px; Marge: 7px 0 14px 0; Polsterung unten: 7px; Rahmen unten: 1px fest # 888888; #menu p Zeilenhöhe: 18px; Marge: 0 0 10px 0; .strong font-weight: fett; .italic font-style: italic;
Wir können den Links innerhalb des Dropdowns eine schöne blaue Farbe zuweisen:
#menu li: hover div a font-size: 12px; Farbe: # 015b86; #menu li: hover div a: hover color: # 029feb;
Lassen Sie uns unsere Listen umgestalten; Wir müssen einige Formatierungen wie die Hintergrundfarbe oder die Ränder, die in der Navigationsleiste verwendet werden, zurücksetzen:
#menu li ul list-style: none; Polsterung: 0; Marge: 0 0 12px 0; #menu li ul li Schriftgröße: 12px; Zeilenhöhe: 24px; Position: relativ; Text-Schatten: 1px 1px 1px #ffffff; Polsterung: 0; Marge: 0; Float: keine; Text ausrichten: links; Breite: 130px; #menu li ul li: hover Hintergrund: keine; Grenze: keine; Polsterung: 0; Marge: 0;
.imgshadow background: #FFFFFF; Polsterung: 4px; Grenze: 1px fest # 777777; Rand oben: 5px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-box-shadow: 0px 0px 5px # 666666; Box-Schatten: 0px 0px 5px # 666666;
Und um einen Absatz mit einem Bild auf der linken Seite zu erstellen:
.img_left width: auto; Schwimmer: links; Marge: 5px 15px 5px 5px;
Um einige Inhalte hervorzuheben, ist hier ein Beispiel für ein dunkles Feld mit abgerundeten Ecken und einem dezenten Schatten im Schatten:
#menu li .black_box Hintergrundfarbe: # 333333; Farbe: #eeeeee; Text-Schatten: 1px 1px 1px # 000; Polsterung: 4px 6px 4px 6px; / * Abgerundete Ecken * / -moz-border-radius: 5px; -webkit-border-radius: 5px; Grenzradius: 5px; / * Shadow * / -webkit-box-shadow: Einfügung 0 0 3px # 000000; -moz-box-shadow: Einfügung 0 0 3px # 000000; Box-Schatten: Einfügung 0 0 3px # 000000;
Zum Abschluss können Sie Ihre Listen noch mit CSS3 gestalten:
#menu li .greybox li background: # F4F4F4; border: 1px fest #bbbbbb; Marge: 0px 0px 4px 0px; Polsterung: 4px 6px 4px 6px; Breite: 116px; / * Abgerundete Ecken * / -moz-border-radius: 5px; -webkit-border-radius: 5px; Grenzradius: 5px; #menu li .greybox li: hover hintergrund: #ffffff; Grenze: 1px fest #aaaaaa; Polsterung: 4px 6px 4px 6px; Marge: 0px 0px 4px 0px;
Alle Browser behandeln den Schwebeflug für Nichtanker-Tags… ausgenommen Internet Explorer 6. Unser Mega Menu funktioniert also immer noch nicht mit diesem alten Browser. Wir können dieses Problem dank einer Verhaltensdatei beheben, die diese Funktionalität hinzufügt. Sie können es hier finden und bedingte Kommentare nur für IE6 verwenden. Weitere Erklärungen finden Sie in diesem Artikel von CSS-Tricks.
Um auf IE6 zu zielen, verwenden wir den folgenden Code:
Ich habe in diesem Tutorial ein paar PNG-Dateien verwendet, und IE6 unterstützt bekanntlich keine Transparenz. Daher haben wir unterschiedliche Lösungen:
Ich lasse Ihnen die Wahl, die Ihren Bedürfnissen entspricht. Lassen Sie uns nun ein vollständiges Funktionsbeispiel betrachten.
Mega Drop Down Menü
Hallo und herzlich willkommen hier! Dies ist ein Showcase der Möglichkeiten dieses fantastischen Mega Drop Down Menüs.
Dieser Artikel enthält eine große Auswahl an vorbereiteten typografischen Stilen wie Überschriften, Listen usw.
Dieses Mega-Menü wurde in allen gängigen Browsern getestet.
Dies ist ein dunkelgrauer Kastentext. Fusce in metus bei enim porta lacinia vitae a arcu. Sed lacus nulla mollis porta quis.
Quasellus vitae sapien ac leo mollis porta quis sitzen amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.
Dies ist ein Beispiel für einen kursiven Text. Konsequenz der Schablonen. Fusce sed lectus bei arcu mollis accumsan bei nec nisi porta quis sitzen amet.
Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultrivité vitae, vulputate porttitor neque.
Dies ist ein Beispiel für einen fetten Text. Aliquam sodales nci nec felis hendrerit ace eleifend lectus feugiat scelerisque.
Maecenas eget eros lorem, ang. Pellentesque lacus. Aenean dui orci, rhoncus sitzen am tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in Sem Mauris. Aenean a commodo mi. Praesent augue lacus.mehr lesen…
Aliquam elementum felis quis felis follat scelerisque. Fusce sed lectus bei arcu mollis accumsan bei nec nisi. Aliquam Pretium Mollis Fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.mehr lesen…
Dies ist eine Blackbox, mit der Sie einige Inhalte hervorheben können. Sed sed lacus nulla und lacinia risus. Quasellus vitae sapien ac leo mollis porta quis sitzen amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Queque vestibulum nisi non nunc blandit placerat. Mauris Facilisis, Risus ut lobortis posuere, Diamus cus congue lorem, utimentum ligula est vel orci. Donec interdum lacus bei velit varius gravida. Nulla ipsum Risus.
Maecenas eget eros lorem, ang. Pellentesque lacus. Aenean dui orci, rhoncus sitzen am tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, Lorem Sem Condimentum.Lesen Sie mehr…
Aliquam elementum felis quis felis follat scelerisque. Fusce sed lectus bei arcu mollis accumsan bei nec nisi. Aliquam Pretium Mollis Fringilla. Vestibulum tempor facilisis malesuada. Weiterlesen…
Körper, ul, li Schriftgröße: 14px; Schriftfamilie: Arial, Helvetica, Serifenlose; Zeilenhöhe: 21px; Text ausrichten: links; / * Navigationsleiste * / #menu list-style: none; Breite: 940px; Marge: 30px auto 0px auto; Höhe: 43px; Auffüllen: 0px 20px 0px 20px; / * Abgerundete Ecken * / -moz-border-radius: 10px; -webkit-border-radius: 10px; Grenzradius: 10px; / * Hintergrundfarbe und Farbverläufe * / background: # 014464; Hintergrund: -moz-linearer Gradient (oben, # 0272a7, # 013953); Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (# 0272a7) bis (# 013953)); / * Borders * / border: 1px fest # 002232; -moz-box-shadow: Einfügen 0px 0px 1px # edf9ff; -webkit-box-shadow: Einfügung von 0px 0px 1px # edf9ff; Box-Schatten: Einfügen 0px 0px 1px # edf9ff; #menu li float: left; Text ausrichten: Mitte; Position: relativ; Auffüllen: 4px 10px 4px 10px; Rand rechts: 30px; Rand oben: 7px; Grenze: keine; #menu li: hover border: 1px solid # 777777; Polsterung: 4px 9px 4px 9px; / * Hintergrundfarbe und Farbverläufe * / background: # F4F4F4; Hintergrund: -moz-linearer Gradient (oben, # F4F4F4, #EEEEEE); Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (# F4F4F4) bis (#EEEEEE)); / * Abgerundete Ecken * / -moz-Rahmenradius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; Grenzradius: 5px 5px 0px 0px; #menu li a Schriftfamilie: Arial, Helvetica, serifenlos; Schriftgröße: 14px; Farbe: #EEEEEE; Bildschirmsperre; Umriss: 0; Textdekoration: keine; Text-Schatten: 1px 1px 1px # 000; #menu li: hover eine color: # 161616; Text-Schatten: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; Hintergrund: URL ("img / drop.png") keine Wiederholung rechts 8px; #menu li: hover .drop background: url ("img / drop.png") no-repeat right 7px; / * Drop Down * / .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; Schwimmer: links; Position: absolut; links: -999em; / * Blendet die Dropdown-Liste aus * / text-align: left; Auffüllung: 10px 5px 10px 5px; Grenze: 1px fest # 777777; Rand oben: keine; / * Hintergrund mit Farbverlauf * / background: # F4F4F4; Hintergrund: -moz-linearer Gradient (oben, #EEEEEE, #BBBBBB); Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (#EEEEEE) bis (#BBBBBB)); / * Abgerundete Ecken * / -moz-Rahmenradius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; Grenzradius: 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. menu li: hover .dropdown_2columns, #menu li: hover .dropdown_3columns, #menu li: hover .dropdown_4columns, #menu li: hover .dropdown_5columns left: -1px; oben: auto; / * Spalten * / .col_1, .col_2, .col_3, .col_4, .col_5 display: inline; Schwimmer: links; Position: relativ; Rand links: 5px; Rand rechts: 5px; .col_1 Breite: 130px; .col_2 Breite: 270px; .col_3 Breite: 410px; .col_4 Breite: 550px; .col_5 Breite: 690px; / * Ausrichtung * / #menu. menu_right float: right; Rand rechts: 0px; #menu li .align_right / * abgerundete Ecken * / -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; Grenzradius: 5px 0px 5px 5px; #menu li: hover .align_right left: auto; rechts: -1px; oben: auto; / * Drop Down Content Stylings * / #menu p, #menu h2, #menu h3, #menu ul li Schriftfamilie: Arial, Helvetica, Sans-Serif; Zeilenhöhe: 21px; Schriftgröße: 12px; Text ausrichten: links; Text-Schatten: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; Schriftgewicht: 400; Buchstabenabstand: -1px; Marge: 7px 0 14px 0; Polsterung unten: 14px; Rahmen unten: 1px fest # 666666; #menu h3 Schriftgröße: 14px; Marge: 7px 0 14px 0; Polsterung unten: 7px; Rahmen unten: 1px fest # 888888; #menu p Zeilenhöhe: 18px; Marge: 0 0 10px 0; #menu li: hover div a font-size: 12px; Farbe: # 015b86; #menu li: hover div a: hover color: # 029feb; .strong font-weight: fett; .italic font-style: italic; .imgshadow background: #FFFFFF; Polsterung: 4px; Grenze: 1px fest # 777777; Rand oben: 5px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-box-shadow: 0px 0px 5px # 666666; Box-Schatten: 0px 0px 5px # 666666; .img_left / * Bild bleibt links * / width: auto; Schwimmer: links; Marge: 5px 15px 5px 5px; #menu li .black_box Hintergrundfarbe: # 333333; Farbe: #eeeeee; Text-Schatten: 1px 1px 1px # 000; Polsterung: 4px 6px 4px 6px; / * Abgerundete Ecken * / -moz-border-radius: 5px; -webkit-border-radius: 5px; Grenzradius: 5px; / * Shadow * / -webkit-box-shadow: Einfügung 0 0 3px # 000000; -moz-box-shadow: Einfügung 0 0 3px # 000000; Box-Schatten: Einfügung 0 0 3px # 000000; #menu li ul list-style: none; Polsterung: 0; Marge: 0 0 12px 0; #menu li ul li Schriftgröße: 12px; Zeilenhöhe: 24px; Position: relativ; Text-Schatten: 1px 1px 1px #ffffff; Polsterung: 0; Marge: 0; Float: keine; Text ausrichten: links; Breite: 130px; #menu li ul li: hover Hintergrund: keine; Grenze: keine; Polsterung: 0; Marge: 0; #menu li .greybox li background: # F4F4F4; border: 1px fest #bbbbbb; Marge: 0px 0px 4px 0px; Polsterung: 4px 6px 4px 6px; Breite: 116px; / * Abgerundete Ecken * / -moz-border-radius: 5px; -webkit-border-radius: 5px; Grenzradius: 5px; #menu li .greybox li: hover hintergrund: #ffffff; Grenze: 1px fest #aaaaaa; Polsterung: 4px 6px 4px 6px; Marge: 0px 0px 4px 0px; Ich hoffe, Ihnen hat dieses Tutorial zum Erstellen von Mega-Menüs gefallen. Danke fürs Mitmachen!
Wenn Sie einen schnellen Einstiegspunkt benötigen, um eine professionelle Website zu erstellen, durchsuchen Sie unsere Galerie mit CSS-Vorlagen. Sie bieten eine Reihe von gebrauchsfertigen, professionellen Funktionen.
