German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)
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 bei gleichzeitig sauberem Layout bieten. In diesem Tutorial erfahren Sie, wie Sie mit netten CSS3-Funktionen ein browserübergreifendes, fantastisches Dropdown-Mega-Menü nur für CSS erstellen.
Schritt 1: Erstellen der Navigationsleiste
Beginnen wir mit einem Grundmenü, das aus einer ungeordneten Liste und einigen grundlegenden CSS-Stilen besteht.
1 |
<ul id="menu"> |
2 |
<li><a href="#">Home</a></li> |
3 |
<li><a href="#">About</a></li> |
4 |
<li><a href="#">Services</a></li> |
5 |
<li><a href="#">Portfolio</a></li> |
6 |
<li><a href="#">Contact</a></li> |
7 |
</ul>
|
Menücontainer erstellen
Wir werden jetzt einige grundlegende CSS-Stile anwenden. Für den Menücontainer definieren wir eine feste Breite, die wir zentrieren, indem wir den linken und rechten Rand auf "auto" setzen.
1 |
#menu { |
2 |
list-style:none; |
3 |
width:940px; |
4 |
margin:30px auto 0px auto; |
5 |
height:43px; |
6 |
padding:0px 20px 0px 20px; |
7 |
}
|
Nun wollen wir sehen, wie wir es mit einigen CSS3-Funktionen verbessern können. Wir müssen unterschiedliche Syntaxen für Webkit-basierte Browser (wie Safari) und für Mozilla-basierte Browser (wie Firefox) verwenden. Wir müssen unterschiedliche Syntaxen für Webkit-basierte Browser (wie Safari) und für Mozilla-basierte Browser (wie Firefox) verwenden.
Für abgerundete Ecken lautet die Syntax:
1 |
-moz-border-radius: 10px |
2 |
-webkit-border-radius: 10px; |
3 |
border-radius: 10px; |
Für den Hintergrund verwenden wir Farbverläufe und eine Fallback-Farbe für ältere Browser. Um die Konsistenz bei der Auswahl der Farben zu gewährleisten, gibt es ein fantastisches Tool namens Facade, mit dem Sie hellere und dunklere Töne einer Grundfarbe finden können.
1 |
background: #014464; |
2 |
background: -moz-linear-gradient(top, #0272a7, #013953); |
3 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); |
In der ersten Zeile wird eine einfache Hintergrundfarbe angewendet (für ältere Browser). Die zweite und dritte Zeile erzeugen einen Farbverlauf von oben nach unten in zwei Farben: #0272a7 und #013953.
Wir können jetzt einen dunkleren Rand hinzufügen und das Design mit einem "fake" Rand polieren, der mit der Funktion "box-shadow" erstellt wurde. Die Syntax ist für alle kompatiblen Browser gleich: Der erste Wert ist der horizontale Versatz, der zweite der vertikale Versatz, der dritte der Unschärferadius (ein kleiner Wert macht ihn schärfer; in unserem Beispiel beträgt er 1 Pixel). Wir setzen alle Offsets auf 0, damit der Unschärfewert einen einheitlichen Lichtrand erzeugt:
1 |
-moz-box-shadow:inset 0px 0px 1px #edf9ff; |
2 |
-webkit-box-shadow:inset 0px 0px 1px #edf9ff; |
3 |
box-shadow:inset 0px 0px 1px #edf9ff; |
Hier ist der endgültige CSS-Code für den #menu container:
1 |
#menu { |
2 |
list-style:none; |
3 |
width:940px; |
4 |
margin:30px auto 0px auto; |
5 |
height:43px; |
6 |
padding:0px 20px 0px 20px; |
7 |
|
8 |
/* Rounded Corners */
|
9 |
|
10 |
-moz-border-radius: 10px; |
11 |
-webkit-border-radius: 10px; |
12 |
border-radius: 10px; |
13 |
|
14 |
/* Background color and gradients */
|
15 |
|
16 |
background: #014464; |
17 |
background: -moz-linear-gradient(top, #0272a7, #013953); |
18 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); |
19 |
|
20 |
/* Borders */
|
21 |
|
22 |
border: 1px solid #002232; |
23 |
|
24 |
-moz-box-shadow:inset 0px 0px 1px #edf9ff; |
25 |
-webkit-box-shadow:inset 0px 0px 1px #edf9ff; |
26 |
box-shadow:inset 0px 0px 1px #edf9ff; |
27 |
}
|
Styling-Menüpunkte
Wir beginnen mit allen nach links ausgerichteten Menüelementen und platzieren sie mit einem margin-right (das Auffüllen ist für den Schwebezustand erforderlich):
1 |
#menu li { |
2 |
float:left; |
3 |
display:block; |
4 |
text-align:center; |
5 |
position:relative; |
6 |
padding: 4px 10px 4px 10px; |
7 |
margin-right:30px; |
8 |
margin-top:7px; |
9 |
border:none; |
10 |
}
|
Für den Schwebezustand und das Dropdown habe ich ein graues Farbschema für den Hintergrund gewä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 das Dropdown-Menü direkt unter den Menüelementen angezeigt wird.
1 |
background: #F4F4F4; |
2 |
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); |
3 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); |
Die linke und rechte Polsterung ist hier etwas kleiner, da beim Schweben ein Rand von 1 Pixel angezeigt wird. Wenn wir den gleichen Abstand beibehalten, werden die Menüelemente um zwei Pixel nach rechts verschoben, da beim Bewegen des Mauszeigers der linke und der rechte Rand hinzugefügt werden. Um dies zu vermeiden, entfernen wir 1 Pixel Polsterung auf beiden Seiten, sodass wir 9 statt 10 Pixel haben.
1 |
border: 1px solid #777777; |
2 |
padding: 4px 9px 4px 9px; |
Dann fügen wir oben nur abgerundete Ecken hinzu, damit das Dropdown-Menü perfekt unter dem übergeordneten Menüpunkt bleibt:
1 |
-moz-border-radius: 5px 5px 0px 0px; |
2 |
-webkit-border-radius: 5px 5px 0px 0px; |
3 |
border-radius: 5px 5px 0px 0px; |
Hier ist das endgültige CSS für die Menüpunkte beim Hover:
1 |
#menu li:hover { |
2 |
border: 1px solid #777777; |
3 |
padding: 4px 9px 4px 9px; |
4 |
|
5 |
/* Background color and gradients */
|
6 |
|
7 |
background: #F4F4F4; |
8 |
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); |
9 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); |
10 |
|
11 |
/* Rounded corners */
|
12 |
|
13 |
-moz-border-radius: 5px 5px 0px 0px; |
14 |
-webkit-border-radius: 5px 5px 0px 0px; |
15 |
border-radius: 5px 5px 0px 0px; |
16 |
}
|
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 Offsets für den Schatten (in unserem Beispiel 1 Pixel), der dritte ist die Unschärfe (auch 1 Pixel) und dann haben wir die (schwarze) Farbe:
1 |
text-shadow: 1px 1px 1px #000; |
Hier ist das endgültige CSS für die Links:
1 |
#menu li a { |
2 |
font-family:Arial, Helvetica, sans-serif; |
3 |
font-size:14px; |
4 |
color: #EEEEEE; |
5 |
display:block; |
6 |
outline:0; |
7 |
text-decoration:none; |
8 |
text-shadow: 1px 1px 1px #000; |
9 |
}
|
Beim Bewegen der Maus verwenden wir, da der Hintergrund grau ist, eine dunklere Farbe (#161616) für die Links und die weiße Farbe für den Textschatten:
1 |
#menu li:hover a { |
2 |
color:#161616; |
3 |
text-shadow: 1px 1px 1px #FFFFFF; |
4 |
}
|
Schließlich benötigen wir eine Möglichkeit, um anzuzeigen, ob ein Dropdown-Menü vorhanden ist oder nicht, indem wir ein einfaches Pfeilbild als Hintergrund verwenden. Es wird mithilfe der Polsterung rechts positioniert und der obere Rand wird richtig darauf ausgerichtet. Beim Hover wird dieser obere Rand auf 7 statt 8 Pixel gesetzt, da beim Hover mit der Maus ein zusätzlicher Rand angezeigt wird (andernfalls würde der Pfeil beim Hover um 1 Pixel nach unten gedrückt):
1 |
#menu li .drop { |
2 |
padding-right:21px; |
3 |
background:url("img/drop.png") no-repeat right 8px; |
4 |
}
|
5 |
#menu li:hover .drop { |
6 |
background:url("img/drop.png") no-repeat right 7px; |
7 |
}
|
Hier ist unser endgültiger Code für den Menücontainer und die Links. Nur das Element "Home" enthält derzeit keinen Dropdown-Inhalt:
1 |
<ul id="menu"> |
2 |
<li><a href="#">Home</a></li> |
3 |
<li><a href="#" class="drop">About</a></li> |
4 |
<li><a href="#" class="drop">Services</a></li> |
5 |
<li><a href="#" class="drop">Portfolio</a></li> |
6 |
<li><a href="#" class="drop">Contact</a></li> |
7 |
</ul>
|
1 |
#menu { |
2 |
list-style:none; |
3 |
width:940px; |
4 |
margin:30px auto 0px auto; |
5 |
height:43px; |
6 |
padding:0px 20px 0px 20px; |
7 |
|
8 |
/* Rounded Corners */
|
9 |
|
10 |
-moz-border-radius: 10px; |
11 |
-webkit-border-radius: 10px; |
12 |
border-radius: 10px; |
13 |
|
14 |
/* Background color and gradients */
|
15 |
|
16 |
background: #014464; |
17 |
background: -moz-linear-gradient(top, #0272a7, #013953); |
18 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); |
19 |
|
20 |
/* Borders */
|
21 |
|
22 |
border: 1px solid #002232; |
23 |
|
24 |
-moz-box-shadow:inset 0px 0px 1px #edf9ff; |
25 |
-webkit-box-shadow:inset 0px 0px 1px #edf9ff; |
26 |
box-shadow:inset 0px 0px 1px #edf9ff; |
27 |
}
|
28 |
|
29 |
#menu li { |
30 |
float:left; |
31 |
display:block; |
32 |
text-align:center; |
33 |
position:relative; |
34 |
padding: 4px 10px 4px 10px; |
35 |
margin-right:30px; |
36 |
margin-top:7px; |
37 |
border:none; |
38 |
}
|
39 |
|
40 |
#menu li:hover { |
41 |
border: 1px solid #777777; |
42 |
padding: 4px 9px 4px 9px; |
43 |
|
44 |
/* Background color and gradients */
|
45 |
|
46 |
background: #F4F4F4; |
47 |
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); |
48 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); |
49 |
|
50 |
/* Rounded corners */
|
51 |
|
52 |
-moz-border-radius: 5px 5px 0px 0px; |
53 |
-webkit-border-radius: 5px 5px 0px 0px; |
54 |
border-radius: 5px 5px 0px 0px; |
55 |
}
|
56 |
|
57 |
#menu li a { |
58 |
font-family:Arial, Helvetica, sans-serif; |
59 |
font-size:14px; |
60 |
color: #EEEEEE; |
61 |
display:block; |
62 |
outline:0; |
63 |
text-decoration:none; |
64 |
text-shadow: 1px 1px 1px #000; |
65 |
}
|
66 |
|
67 |
#menu li:hover a { |
68 |
color:#161616; |
69 |
text-shadow: 1px 1px 1px #FFFFFF; |
70 |
}
|
71 |
#menu li .drop { |
72 |
padding-right:21px; |
73 |
background:url("img/drop.png") no-repeat right 8px; |
74 |
}
|
75 |
#menu li:hover .drop { |
76 |
background:url("img/drop.png") no-repeat right 7px; |
77 |
}
|
Und das Ergebnis ist:
Schritt 2: Codieren des Dropdowns
Ein "klassisches" Dropdown-Menü enthält normalerweise Listen, die in übergeordneten Listenelementen verschachtelt sind, und sieht folgendermaßen aus:
1 |
<ul id="menu"> |
2 |
<li><a href="#">Item 1</a>< |
3 |
<ul> |
4 |
<li><a href="#">Subitem 1</a></li> |
5 |
<li><a href="#">Subitem 2</a></li> |
6 |
<li><a href="#">Subitem 3</a></li> |
7 |
</ul>
|
8 |
</li>
|
9 |
<li><a href="#">Item 2</a>< |
10 |
<ul> |
11 |
<li><a href="#">Subitem 1</a></li> |
12 |
<li><a href="#">Subitem 2</a></li> |
13 |
</ul>
|
14 |
</li>
|
15 |
</ul>
|
Allgemeine Struktur
Für unser Mega-Menü verwenden wir anstelle von verschachtelten Listen einfach Standard-DIVs, die wie jede verschachtelte Liste funktionieren:
1 |
<ul id="menu"> |
2 |
<li><a href="#">Item 1</a> |
3 |
<div>
|
4 |
Drop down Content |
5 |
<div>
|
6 |
</li>
|
7 |
<li><a href="#">Item 2</a> |
8 |
<div>
|
9 |
Drop down Content |
10 |
<div>
|
11 |
</li>
|
12 |
</ul>
|
Dies ist die Grundstruktur für das Dropdown. Die Idee ist, alle Arten von Inhalten wie Absätze, Bilder, benutzerdefinierte Listen oder ein Kontaktformular, die in Spalten organisiert sind, einschließen zu können.
Dropdown-Container
Container mit unterschiedlichen Größen enthalten den gesamten Dropdown-Inhalt. Ich habe die Tag-Namen entsprechend der Anzahl der Spalten ausgewählt, die sie enthalten sollen.
Um die Dropdowns auszublenden, verwenden wir die absolute Positionierung mit einem negativen linken Rand:
1 |
position:absolute; |
2 |
left:-999em; |
Die Hintergrund-Fallback-Farbe entspricht der für die Menüelemente verwendeten. Moderne Browser zeigen einen Verlauf an, der oben mit #EEEEEE beginnt (passend zum Verlauf des übergeordneten Menüelements) und unten mit #BBBBBB endet:
1 |
background:#F4F4F4; |
2 |
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); |
3 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); |
Wir werden wieder abgerundete Ecken verwenden, mit Ausnahme der oberen linken:
1 |
-moz-border-radius: 0px 5px 5px 5px; |
2 |
-webkit-border-radius: 0px 5px 5px 5px; |
3 |
border-radius: 0px 5px 5px 5px; |
1 |
.dropdown_1column, |
2 |
.dropdown_2columns, |
3 |
.dropdown_3columns, |
4 |
.dropdown_4columns, |
5 |
.dropdown_5columns { |
6 |
margin:4px auto; |
7 |
position:absolute; |
8 |
left:-999em; /* Hides the drop down */ |
9 |
text-align:left; |
10 |
padding:10px 5px 10px 5px; |
11 |
border:1px solid #777777; |
12 |
border-top:none; |
13 |
|
14 |
/* Gradient background */
|
15 |
background:#F4F4F4; |
16 |
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); |
17 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); |
18 |
|
19 |
/* Rounded Corners */
|
20 |
-moz-border-radius: 0px 5px 5px 5px; |
21 |
-webkit-border-radius: 0px 5px 5px 5px; |
22 |
border-radius: 0px 5px 5px 5px; |
23 |
}
|
Um das zu veranschaulichen, wollen wir sehen, wie es aussehen würde, wenn wir nicht auf Details geachtet hätten:
Hier ist unser Beispiel:
Wie Sie sehen können, bleibt das Dropdown-Menü gut beim übergeordneten Menüpunkt.
Um einen perfekten Dropdown-Container zu haben, müssen wir die Breite für jeden angeben:
1 |
.dropdown_1column {width: 140px;} |
2 |
.dropdown_2columns {width: 280px;} |
3 |
.dropdown_3columns {width: 420px;} |
4 |
.dropdown_4columns {width: 560px;} |
5 |
.dropdown_5columns {width: 700px;} |
Und um die Dropdowns beim Mauszeiger anzuzeigen, verwenden wir einfach:
1 |
#menu li:hover .dropdown_1column, |
2 |
#menu li:hover .dropdown_2columns, |
3 |
#menu li:hover .dropdown_3columns, |
4 |
#menu li:hover .dropdown_4columns, |
5 |
#menu li:hover .dropdown_5columns { |
6 |
left:-1px;top:auto; |
7 |
}
|
Verwenden der Dropdown-Container
Unsere Kurse sind bereit, in unser Menü aufgenommen zu werden. Wir werden jeden von ihnen verwenden, beginnend mit dem 5-Spalten-Layout bis zum Dropdown-Menü für eine einzelne Spalte:
1 |
<ul id="menu"> |
2 |
<li><a href="#">Home</a></li> |
3 |
<li><a href="#" class="drop">5 Columns</a> |
4 |
<div class="dropdown_5columns"> |
5 |
<p>5 Columns content</p> |
6 |
</div>
|
7 |
</li>
|
8 |
<li><a href="#" class="drop">4 Columns</a> |
9 |
<div class="dropdown_4columns"> |
10 |
<p>4 Columns content</p> |
11 |
</div>
|
12 |
</li>
|
13 |
<li><a href="#" class="drop">3 Columns</a> |
14 |
<div class="dropdown_3columns"> |
15 |
<p>3 Columns content</p> |
16 |
</div>
|
17 |
</li>
|
18 |
<li><a href="#" class="drop">2 Columns</a> |
19 |
<div class="dropdown_2columns"> |
20 |
<p>2 Columns content</p> |
21 |
</div>
|
22 |
</li>
|
23 |
<li><a href="#" class="drop">1 Column</a> |
24 |
<div class="dropdown_1column"> |
25 |
<p>1 Column content</p> |
26 |
</div>
|
27 |
</li>
|
28 |
</ul>
|
Hier ist eine Vorschau des obigen Codes:
Schritt 3: Erstellen der Dropdown-Containerspalten
Nachdem wir die Container bereit haben, erstellen wir Spalten mit zunehmender Größe nach den Prinzipien des 960-Rastersystems.
1 |
.col_1, |
2 |
.col_2, |
3 |
.col_3, |
4 |
.col_4, |
5 |
.col_5 { |
6 |
display:inline; |
7 |
float: left; |
8 |
position: relative; |
9 |
margin-left: 5px; |
10 |
margin-right: 5px; |
11 |
}
|
12 |
.col_1 {width:130px;} |
13 |
.col_2 {width:270px;} |
14 |
.col_3 {width:410px;} |
15 |
.col_4 {width:550px;} |
16 |
.col_5 {width:690px;} |
Spalten verwenden
Hier ist ein Beispiel für ein Dropdown-Menü mit mehreren Spalten. In diesem Beispiel haben wir verschiedene Kombinationen mit allen Arten von Spalten:
1 |
<ul id="menu"> |
2 |
<li><a href="#" class="drop">5 Columns</a> |
3 |
<div class="dropdown_5columns"> |
4 |
<div class="col_5"> |
5 |
<p>This is a 5 Columns content</p> |
6 |
</div>
|
7 |
<div class="col_1"> |
8 |
<p>This is a 1 Column content</p> |
9 |
</div>
|
10 |
<div class="col_1"> |
11 |
<p>This is a 1 Column content</p> |
12 |
</div>
|
13 |
<div class="col_1"> |
14 |
<p>This is a 1 Column content</p> |
15 |
</div>
|
16 |
<div class="col_1"> |
17 |
<p>This is a 1 Column content</p> |
18 |
</div>
|
19 |
<div class="col_1"> |
20 |
<p>This is a 1 Column content</p> |
21 |
</div>
|
22 |
<div class="col_4"> |
23 |
<p>This is a 4 Columns content</p> |
24 |
</div>
|
25 |
<div class="col_1"> |
26 |
<p>This is a 1 Column content</p> |
27 |
</div>
|
28 |
<div class="col_3"> |
29 |
<p>This is a 3 Columns content</p> |
30 |
</div>
|
31 |
<div class="col_2"> |
32 |
<p>This is a 2 Columns content</p> |
33 |
</div>
|
34 |
</div>
|
35 |
</li>
|
36 |
</ul>
|
Code-Vorschau:
Schritt 4: Nach rechts ausrichten
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 dem übergeordneten Listenelement eine neue Klasse mit dem Namen .menu_right hinzu. Daher setzen wir den rechten Rand zurück und verschieben ihn nach rechts:
1 |
#menu .menu_right { |
2 |
float:right; |
3 |
margin-right:0px; |
4 |
}
|
Als nächstes sehen wir uns das Dropdown an. Im vorherigen CSS-Code wurden abgerundete Ecken auf alle Ecken mit Ausnahme der linken oberen Ecke angewendet, um dem Hintergrund des übergeordneten Menüelements zu entsprechen. Jetzt möchten wir, dass dieses Dropdown-Menü am rechten Rand des übergeordneten Menüelements bleibt. Also überschreiben wir die Randradiuswerte mit einer neuen Klasse namens .align_right und setzen die obere rechte Ecke auf 0.
1 |
#menu li .align_right { |
2 |
/* Rounded Corners */
|
3 |
-moz-border-radius: 5px 0px 5px 5px; |
4 |
-webkit-border-radius: 5px 0px 5px 5px; |
5 |
border-radius: 5px 0px 5px 5px; |
6 |
}
|
Zu guter Letzt möchten wir, dass das Dropdown-Menü rechts angezeigt wird. Also werden wir unsere neue Klasse verwenden und den linken Wert zurücksetzen und ihn dann rechts halten:
1 |
#menu li:hover .align_right { |
2 |
left:auto; |
3 |
right:-1px; |
4 |
top:auto; |
5 |
}
|
Jetzt kann es im Menü verwendet werden:
1 |
<li class="menu_right"><a href="#" class="drop">Right</a> |
2 |
<div class="dropdown_1column align_right"> |
3 |
<div class="col_1"> |
4 |
<p>This is a 1 Column content</p> |
5 |
</div>
|
6 |
</div>
|
7 |
</li>
|
Und eine kleine Vorschau des obigen Codes:
Schritt 5: Hinzufügen und Gestalten von Inhalten
Nachdem wir die gesamte Struktur fertig haben, können wir so viel Inhalt hinzufügen, wie wir möchten: Text, Listen, Bilder usw.
Allgemeine Stylings
Beginnen wir mit einigen grundlegenden Stilen für Absätze und Überschriften:
1 |
#menu p, #menu h2, #menu h3, #menu ul li { |
2 |
font-family:Arial, Helvetica, sans-serif; |
3 |
line-height:21px; |
4 |
font-size:12px; |
5 |
text-align:left; |
6 |
text-shadow: 1px 1px 1px #FFFFFF; |
7 |
}
|
8 |
#menu h2 { |
9 |
font-size:21px; |
10 |
font-weight:400; |
11 |
letter-spacing:-1px; |
12 |
margin:7px 0 14px 0; |
13 |
padding-bottom:14px; |
14 |
border-bottom:1px solid #666666; |
15 |
}
|
16 |
#menu h3 { |
17 |
font-size:14px; |
18 |
margin:7px 0 14px 0; |
19 |
padding-bottom:7px; |
20 |
border-bottom:1px solid #888888; |
21 |
}
|
22 |
#menu p { |
23 |
line-height:18px; |
24 |
margin:0 0 10px 0; |
25 |
}
|
26 |
.strong { |
27 |
font-weight:bold; |
28 |
}
|
29 |
.italic { |
30 |
font-style:italic; |
31 |
}
|
Wir können den Links in der Dropdown-Liste eine schöne blaue Farbe zuweisen:
1 |
#menu li:hover div a { |
2 |
font-size:12px; |
3 |
color:#015b86; |
4 |
}
|
5 |
#menu li:hover div a:hover { |
6 |
color:#029feb; |
7 |
}
|
Listet Stylings auf
Lassen Sie uns unsere Listen überarbeiten. Wir müssen einige Stile wie die Hintergrundfarbe oder die Ränder, die in der Navigationsleiste verwendet werden, zurücksetzen:
1 |
#menu li ul { |
2 |
list-style:none; |
3 |
padding:0; |
4 |
margin:0 0 12px 0; |
5 |
}
|
6 |
#menu li ul li { |
7 |
font-size:12px; |
8 |
line-height:24px; |
9 |
position:relative; |
10 |
text-shadow: 1px 1px 1px #ffffff; |
11 |
padding:0; |
12 |
margin:0; |
13 |
float:none; |
14 |
text-align:left; |
15 |
width:130px; |
16 |
}
|
17 |
#menu li ul li:hover { |
18 |
background:none; |
19 |
border:none; |
20 |
padding:0; |
21 |
margin:0; |
22 |
}
|
Styling von Bildern
1 |
.imgshadow { |
2 |
background:#FFFFFF; |
3 |
padding:4px; |
4 |
border:1px solid #777777; |
5 |
margin-top:5px; |
6 |
-moz-box-shadow:0px 0px 5px #666666; |
7 |
-webkit-box-shadow:0px 0px 5px #666666; |
8 |
box-shadow:0px 0px 5px #666666; |
9 |
}
|
Und um einen Absatz mit einem Bild links zu erstellen:
1 |
.img_left { |
2 |
width:auto; |
3 |
float:left; |
4 |
margin:5px 15px 5px 5px; |
5 |
}
|
Textfelder
Um einige Inhalte hervorzuheben, ist hier ein Beispiel für eine dunkle Box mit abgerundeten Ecken und einem subtilen Schatten:
1 |
#menu li .black_box { |
2 |
background-color:#333333; |
3 |
color: #eeeeee; |
4 |
text-shadow: 1px 1px 1px #000; |
5 |
padding:4px 6px 4px 6px; |
6 |
|
7 |
/* Rounded Corners */
|
8 |
-moz-border-radius: 5px; |
9 |
-webkit-border-radius: 5px; |
10 |
border-radius: 5px; |
11 |
|
12 |
/* Shadow */
|
13 |
-webkit-box-shadow:inset 0 0 3px #000000; |
14 |
-moz-box-shadow:inset 0 0 3px #000000; |
15 |
box-shadow:inset 0 0 3px #000000; |
16 |
}
|
Restylings-Listen
Und zum Abschluss gibt es noch eine andere Möglichkeit, Ihre Listen mit etwas CSS3 zu gestalten:
1 |
#menu li .greybox li { |
2 |
background:#F4F4F4; |
3 |
border:1px solid #bbbbbb; |
4 |
margin:0px 0px 4px 0px; |
5 |
padding:4px 6px 4px 6px; |
6 |
width:116px; |
7 |
|
8 |
/* Rounded Corners */
|
9 |
-moz-border-radius: 5px; |
10 |
-webkit-border-radius: 5px; |
11 |
border-radius: 5px; |
12 |
}
|
13 |
#menu li .greybox li:hover { |
14 |
background:#ffffff; |
15 |
border:1px solid #aaaaaa; |
16 |
padding:4px 6px 4px 6px; |
17 |
margin:0px 0px 4px 0px; |
18 |
}
|
Schritt 6: Umgang mit Browserkompatibilität und IE6
Alle Browser verarbeiten Hover auf Nicht-Anker-Tags... außer Internet Explorer 6; Daher funktioniert unser Mega-Menü immer noch nicht mit diesem alten Browser. Wir können dieses Problem dank einer Verhaltensdatei beheben, die diese Funktionalität hinzufügt. Sie finden es hier und verwenden bedingte Kommentare, um nur auf IE6 abzuzielen. Weitere Erklärungen finden Sie in diesem Artikel von CSS-Tricks.
Um auf IE6 abzuzielen, verwenden wir den folgenden Code:
1 |
<!--[if IE 6]>
|
2 |
<style>
|
3 |
body {behavior: url("csshover3.htc");}
|
4 |
</style>
|
5 |
<![endif]-->
|
Ich habe in diesem Tutorial einige PNG-Dateien verwendet, und wie jeder weiß, unterstützt IE6 keine Transparenz, sodass wir verschiedene Lösungen haben:
- Konvertieren Sie sie in das GIF- oder PNG-8-Format
- Verwenden Sie ein Skript
- Stellen Sie beispielsweise mit TweakPNG eine andere Hintergrundfarbe als das Standardgrau ein
Ich lasse Sie die auswählen, die Ihren Anforderungen entspricht. Lassen Sie uns nun ein voll funktionsfähiges Beispiel überprüfen.
Letztes Beispiel
HTML-Teil
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 |
|
6 |
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" /> |
7 |
|
8 |
<title>Mega Drop Down Menu</title> |
9 |
<!--[if IE 6]>
|
10 |
<style>
|
11 |
body {behavior: url("csshover3.htc");}
|
12 |
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;
|
13 |
</style>
|
14 |
<![endif]-->
|
15 |
|
16 |
</head>
|
17 |
|
18 |
<body>
|
19 |
|
20 |
<ul id="menu"> |
21 |
|
22 |
<li><a href="#" class="drop">Home</a><!-- Begin Home Item --> |
23 |
|
24 |
<div class="dropdown_2columns"><!-- Begin 2 columns container --> |
25 |
|
26 |
<div class="col_2"> |
27 |
<h2>Welcome !</h2> |
28 |
</div>
|
29 |
|
30 |
<div class="col_2"> |
31 |
<p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p> |
32 |
<p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p> |
33 |
</div>
|
34 |
|
35 |
<div class="col_2"> |
36 |
<h2>Cross Browser Support</h2> |
37 |
</div>
|
38 |
|
39 |
<div class="col_1"> |
40 |
<img src="img/browsers.png" width="125" height="48" alt="" /> |
41 |
</div>
|
42 |
|
43 |
<div class="col_1"> |
44 |
<p>This mega menu has been tested in all major browsers.</p> |
45 |
</div>
|
46 |
|
47 |
</div><!-- End 2 columns container --> |
48 |
|
49 |
</li><!-- End Home Item --> |
50 |
|
51 |
<li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item --> |
52 |
|
53 |
<div class="dropdown_5columns"><!-- Begin 5 columns container --> |
54 |
|
55 |
<div class="col_5"> |
56 |
<h2>This is an example of a large container with 5 columns</h2> |
57 |
</div>
|
58 |
|
59 |
<div class="col_1"> |
60 |
<p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p> |
61 |
</div>
|
62 |
|
63 |
<div class="col_1"> |
64 |
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p> |
65 |
</div>
|
66 |
|
67 |
<div class="col_1"> |
68 |
<p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p> |
69 |
</div>
|
70 |
|
71 |
<div class="col_1"> |
72 |
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p> |
73 |
</div>
|
74 |
|
75 |
<div class="col_1"> |
76 |
<p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p> |
77 |
</div>
|
78 |
|
79 |
<div class="col_5"> |
80 |
<h2>Here is some content with side images</h2> |
81 |
</div>
|
82 |
|
83 |
<div class="col_3"> |
84 |
|
85 |
<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> |
86 |
<p>Maecenas eget eros lorem, nec 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.<a href="#">Read more...</a></p> |
87 |
|
88 |
<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> |
89 |
<p>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.<a href="#">Read more...</a></p> |
90 |
|
91 |
</div>
|
92 |
|
93 |
<div class="col_2"> |
94 |
|
95 |
<p class="black_box">This is a black box, you can use it to highligh some content. 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 condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p> |
96 |
|
97 |
</div>
|
98 |
|
99 |
</div><!-- End 5 columns container --> |
100 |
|
101 |
</li><!-- End 5 columns Item --> |
102 |
|
103 |
<li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item --> |
104 |
|
105 |
<div class="dropdown_4columns"><!-- Begin 4 columns container --> |
106 |
|
107 |
<div class="col_4"> |
108 |
<h2>This is a heading title</h2> |
109 |
</div>
|
110 |
|
111 |
<div class="col_1"> |
112 |
|
113 |
<h3>Some Links</h3> |
114 |
<ul>
|
115 |
<li><a href="#">ThemeForest</a></li> |
116 |
<li><a href="#">GraphicRiver</a></li> |
117 |
<li><a href="#">ActiveDen</a></li> |
118 |
<li><a href="#">VideoHive</a></li> |
119 |
<li><a href="#">3DOcean</a></li> |
120 |
</ul>
|
121 |
|
122 |
</div>
|
123 |
|
124 |
<div class="col_1"> |
125 |
|
126 |
<h3>Useful Links</h3> |
127 |
<ul>
|
128 |
<li><a href="#">NetTuts</a></li> |
129 |
<li><a href="#">VectorTuts</a></li> |
130 |
<li><a href="#">PsdTuts</a></li> |
131 |
<li><a href="#">PhotoTuts</a></li> |
132 |
<li><a href="#">ActiveTuts</a></li> |
133 |
</ul>
|
134 |
|
135 |
</div>
|
136 |
|
137 |
<div class="col_1"> |
138 |
|
139 |
<h3>Other Stuff</h3> |
140 |
<ul>
|
141 |
<li><a href="#">FreelanceSwitch</a></li> |
142 |
<li><a href="#">Creattica</a></li> |
143 |
<li><a href="#">WorkAwesome</a></li> |
144 |
<li><a href="#">Mac Apps</a></li> |
145 |
<li><a href="#">Web Apps</a></li> |
146 |
</ul>
|
147 |
|
148 |
</div>
|
149 |
|
150 |
<div class="col_1"> |
151 |
|
152 |
<h3>Misc</h3> |
153 |
<ul>
|
154 |
<li><a href="#">Design</a></li> |
155 |
<li><a href="#">Logo</a></li> |
156 |
<li><a href="#">Flash</a></li> |
157 |
<li><a href="#">Illustration</a></li> |
158 |
<li><a href="#">More...</a></li> |
159 |
</ul>
|
160 |
|
161 |
</div>
|
162 |
|
163 |
</div><!-- End 4 columns container --> |
164 |
|
165 |
</li><!-- End 4 columns Item --> |
166 |
|
167 |
<li class="menu_right"><a href="#" class="drop">1 Column</a> |
168 |
|
169 |
<div class="dropdown_1column align_right"> |
170 |
|
171 |
<div class="col_1"> |
172 |
|
173 |
<ul class="simple"> |
174 |
<li><a href="#">FreelanceSwitch</a></li> |
175 |
<li><a href="#">Creattica</a></li> |
176 |
<li><a href="#">WorkAwesome</a></li> |
177 |
<li><a href="#">Mac Apps</a></li> |
178 |
<li><a href="#">Web Apps</a></li> |
179 |
<li><a href="#">NetTuts</a></li> |
180 |
<li><a href="#">VectorTuts</a></li> |
181 |
<li><a href="#">PsdTuts</a></li> |
182 |
<li><a href="#">PhotoTuts</a></li> |
183 |
<li><a href="#">ActiveTuts</a></li> |
184 |
<li><a href="#">Design</a></li> |
185 |
<li><a href="#">Logo</a></li> |
186 |
<li><a href="#">Flash</a></li> |
187 |
<li><a href="#">Illustration</a></li> |
188 |
<li><a href="#">More...</a></li> |
189 |
</ul>
|
190 |
|
191 |
</div>
|
192 |
|
193 |
</div>
|
194 |
|
195 |
</li>
|
196 |
|
197 |
<li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item --> |
198 |
|
199 |
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container --> |
200 |
|
201 |
<div class="col_3"> |
202 |
<h2>Lists in Boxes</h2> |
203 |
</div>
|
204 |
|
205 |
<div class="col_1"> |
206 |
|
207 |
<ul class="greybox"> |
208 |
<li><a href="#">FreelanceSwitch</a></li> |
209 |
<li><a href="#">Creattica</a></li> |
210 |
<li><a href="#">WorkAwesome</a></li> |
211 |
<li><a href="#">Mac Apps</a></li> |
212 |
<li><a href="#">Web Apps</a></li> |
213 |
</ul>
|
214 |
|
215 |
</div>
|
216 |
|
217 |
<div class="col_1"> |
218 |
|
219 |
<ul class="greybox"> |
220 |
<li><a href="#">ThemeForest</a></li> |
221 |
<li><a href="#">GraphicRiver</a></li> |
222 |
<li><a href="#">ActiveDen</a></li> |
223 |
<li><a href="#">VideoHive</a></li> |
224 |
<li><a href="#">3DOcean</a></li> |
225 |
</ul>
|
226 |
|
227 |
</div>
|
228 |
|
229 |
<div class="col_1"> |
230 |
|
231 |
<ul class="greybox"> |
232 |
<li><a href="#">Design</a></li> |
233 |
<li><a href="#">Logo</a></li> |
234 |
<li><a href="#">Flash</a></li> |
235 |
<li><a href="#">Illustration</a></li> |
236 |
<li><a href="#">More...</a></li> |
237 |
</ul>
|
238 |
|
239 |
</div>
|
240 |
|
241 |
<div class="col_3"> |
242 |
<h2>Here are some image examples</h2> |
243 |
</div>
|
244 |
|
245 |
<div class="col_3"> |
246 |
<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> |
247 |
<p>Maecenas eget eros lorem, nec 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 condimentum.<a href="#">Read more...</a></p> |
248 |
|
249 |
<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> |
250 |
<p>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. <a href="#">Read more...</a></p> |
251 |
</div>
|
252 |
|
253 |
</div><!-- End 3 columns container --> |
254 |
|
255 |
</li><!-- End 3 columns Item --> |
256 |
|
257 |
|
258 |
</ul>
|
259 |
|
260 |
</body>
|
261 |
|
262 |
</html>
|
CSS-Teil
1 |
body, ul, li { |
2 |
font-size:14px; |
3 |
font-family:Arial, Helvetica, sans-serif; |
4 |
line-height:21px; |
5 |
text-align:left; |
6 |
}
|
7 |
|
8 |
/* Navigation Bar */
|
9 |
|
10 |
#menu { |
11 |
list-style:none; |
12 |
width:940px; |
13 |
margin:30px auto 0px auto; |
14 |
height:43px; |
15 |
padding:0px 20px 0px 20px; |
16 |
|
17 |
/* Rounded Corners */
|
18 |
|
19 |
-moz-border-radius: 10px; |
20 |
-webkit-border-radius: 10px; |
21 |
border-radius: 10px; |
22 |
|
23 |
/* Background color and gradients */
|
24 |
|
25 |
background: #014464; |
26 |
background: -moz-linear-gradient(top, #0272a7, #013953); |
27 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); |
28 |
|
29 |
/* Borders */
|
30 |
|
31 |
border: 1px solid #002232; |
32 |
|
33 |
-moz-box-shadow:inset 0px 0px 1px #edf9ff; |
34 |
-webkit-box-shadow:inset 0px 0px 1px #edf9ff; |
35 |
box-shadow:inset 0px 0px 1px #edf9ff; |
36 |
}
|
37 |
|
38 |
#menu li { |
39 |
float:left; |
40 |
text-align:center; |
41 |
position:relative; |
42 |
padding: 4px 10px 4px 10px; |
43 |
margin-right:30px; |
44 |
margin-top:7px; |
45 |
border:none; |
46 |
}
|
47 |
|
48 |
#menu li:hover { |
49 |
border: 1px solid #777777; |
50 |
padding: 4px 9px 4px 9px; |
51 |
|
52 |
/* Background color and gradients */
|
53 |
|
54 |
background: #F4F4F4; |
55 |
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); |
56 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); |
57 |
|
58 |
/* Rounded corners */
|
59 |
|
60 |
-moz-border-radius: 5px 5px 0px 0px; |
61 |
-webkit-border-radius: 5px 5px 0px 0px; |
62 |
border-radius: 5px 5px 0px 0px; |
63 |
}
|
64 |
|
65 |
#menu li a { |
66 |
font-family:Arial, Helvetica, sans-serif; |
67 |
font-size:14px; |
68 |
color: #EEEEEE; |
69 |
display:block; |
70 |
outline:0; |
71 |
text-decoration:none; |
72 |
text-shadow: 1px 1px 1px #000; |
73 |
}
|
74 |
|
75 |
#menu li:hover a { |
76 |
color:#161616; |
77 |
text-shadow: 1px 1px 1px #FFFFFF; |
78 |
}
|
79 |
#menu li .drop { |
80 |
padding-right:21px; |
81 |
background:url("img/drop.png") no-repeat right 8px; |
82 |
}
|
83 |
#menu li:hover .drop { |
84 |
background:url("img/drop.png") no-repeat right 7px; |
85 |
}
|
86 |
|
87 |
/* Drop Down */
|
88 |
|
89 |
.dropdown_1column, |
90 |
.dropdown_2columns, |
91 |
.dropdown_3columns, |
92 |
.dropdown_4columns, |
93 |
.dropdown_5columns { |
94 |
margin:4px auto; |
95 |
float:left; |
96 |
position:absolute; |
97 |
left:-999em; /* Hides the drop down */ |
98 |
text-align:left; |
99 |
padding:10px 5px 10px 5px; |
100 |
border:1px solid #777777; |
101 |
border-top:none; |
102 |
|
103 |
/* Gradient background */
|
104 |
background:#F4F4F4; |
105 |
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); |
106 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); |
107 |
|
108 |
/* Rounded Corners */
|
109 |
-moz-border-radius: 0px 5px 5px 5px; |
110 |
-webkit-border-radius: 0px 5px 5px 5px; |
111 |
border-radius: 0px 5px 5px 5px; |
112 |
}
|
113 |
|
114 |
.dropdown_1column {width: 140px;} |
115 |
.dropdown_2columns {width: 280px;} |
116 |
.dropdown_3columns {width: 420px;} |
117 |
.dropdown_4columns {width: 560px;} |
118 |
.dropdown_5columns {width: 700px;} |
119 |
|
120 |
#menu li:hover .dropdown_1column, |
121 |
#menu li:hover .dropdown_2columns, |
122 |
#menu li:hover .dropdown_3columns, |
123 |
#menu li:hover .dropdown_4columns, |
124 |
#menu li:hover .dropdown_5columns { |
125 |
left:-1px; |
126 |
top:auto; |
127 |
}
|
128 |
|
129 |
/* Columns */
|
130 |
|
131 |
.col_1, |
132 |
.col_2, |
133 |
.col_3, |
134 |
.col_4, |
135 |
.col_5 { |
136 |
display:inline; |
137 |
float: left; |
138 |
position: relative; |
139 |
margin-left: 5px; |
140 |
margin-right: 5px; |
141 |
}
|
142 |
.col_1 {width:130px;} |
143 |
.col_2 {width:270px;} |
144 |
.col_3 {width:410px;} |
145 |
.col_4 {width:550px;} |
146 |
.col_5 {width:690px;} |
147 |
|
148 |
/* Right alignment */
|
149 |
|
150 |
#menu .menu_right { |
151 |
float:right; |
152 |
margin-right:0px; |
153 |
}
|
154 |
#menu li .align_right { |
155 |
/* Rounded Corners */
|
156 |
-moz-border-radius: 5px 0px 5px 5px; |
157 |
-webkit-border-radius: 5px 0px 5px 5px; |
158 |
border-radius: 5px 0px 5px 5px; |
159 |
}
|
160 |
#menu li:hover .align_right { |
161 |
left:auto; |
162 |
right:-1px; |
163 |
top:auto; |
164 |
}
|
165 |
|
166 |
/* Drop Down Content Stylings */
|
167 |
|
168 |
#menu p, #menu h2, #menu h3, #menu ul li { |
169 |
font-family:Arial, Helvetica, sans-serif; |
170 |
line-height:21px; |
171 |
font-size:12px; |
172 |
text-align:left; |
173 |
text-shadow: 1px 1px 1px #FFFFFF; |
174 |
}
|
175 |
#menu h2 { |
176 |
font-size:21px; |
177 |
font-weight:400; |
178 |
letter-spacing:-1px; |
179 |
margin:7px 0 14px 0; |
180 |
padding-bottom:14px; |
181 |
border-bottom:1px solid #666666; |
182 |
}
|
183 |
#menu h3 { |
184 |
font-size:14px; |
185 |
margin:7px 0 14px 0; |
186 |
padding-bottom:7px; |
187 |
border-bottom:1px solid #888888; |
188 |
}
|
189 |
#menu p { |
190 |
line-height:18px; |
191 |
margin:0 0 10px 0; |
192 |
}
|
193 |
|
194 |
#menu li:hover div a { |
195 |
font-size:12px; |
196 |
color:#015b86; |
197 |
}
|
198 |
#menu li:hover div a:hover { |
199 |
color:#029feb; |
200 |
}
|
201 |
.strong { |
202 |
font-weight:bold; |
203 |
}
|
204 |
.italic { |
205 |
font-style:italic; |
206 |
}
|
207 |
.imgshadow { |
208 |
background:#FFFFFF; |
209 |
padding:4px; |
210 |
border:1px solid #777777; |
211 |
margin-top:5px; |
212 |
-moz-box-shadow:0px 0px 5px #666666; |
213 |
-webkit-box-shadow:0px 0px 5px #666666; |
214 |
box-shadow:0px 0px 5px #666666; |
215 |
}
|
216 |
.img_left { /* Image sticks to the left */ |
217 |
width:auto; |
218 |
float:left; |
219 |
margin:5px 15px 5px 5px; |
220 |
}
|
221 |
#menu li .black_box { |
222 |
background-color:#333333; |
223 |
color: #eeeeee; |
224 |
text-shadow: 1px 1px 1px #000; |
225 |
padding:4px 6px 4px 6px; |
226 |
|
227 |
/* Rounded Corners */
|
228 |
-moz-border-radius: 5px; |
229 |
-webkit-border-radius: 5px; |
230 |
border-radius: 5px; |
231 |
|
232 |
/* Shadow */
|
233 |
-webkit-box-shadow:inset 0 0 3px #000000; |
234 |
-moz-box-shadow:inset 0 0 3px #000000; |
235 |
box-shadow:inset 0 0 3px #000000; |
236 |
}
|
237 |
#menu li ul { |
238 |
list-style:none; |
239 |
padding:0; |
240 |
margin:0 0 12px 0; |
241 |
}
|
242 |
#menu li ul li { |
243 |
font-size:12px; |
244 |
line-height:24px; |
245 |
position:relative; |
246 |
text-shadow: 1px 1px 1px #ffffff; |
247 |
padding:0; |
248 |
margin:0; |
249 |
float:none; |
250 |
text-align:left; |
251 |
width:130px; |
252 |
}
|
253 |
#menu li ul li:hover { |
254 |
background:none; |
255 |
border:none; |
256 |
padding:0; |
257 |
margin:0; |
258 |
}
|
259 |
#menu li .greybox li { |
260 |
background:#F4F4F4; |
261 |
border:1px solid #bbbbbb; |
262 |
margin:0px 0px 4px 0px; |
263 |
padding:4px 6px 4px 6px; |
264 |
width:116px; |
265 |
|
266 |
/* Rounded Corners */
|
267 |
-moz-border-radius: 5px; |
268 |
-webkit-border-radius: 5px; |
269 |
border-radius: 5px; |
270 |
}
|
271 |
#menu li .greybox li:hover { |
272 |
background:#ffffff; |
273 |
border:1px solid #aaaaaa; |
274 |
padding:4px 6px 4px 6px; |
275 |
margin:0px 0px 4px 0px; |
276 |
}
|
Interessante und relevante Links
- Entwerfen von Dropdown-Menüs: Beispiele und Beste Übungen
- Mega Dropdown-Menü, genießen Sie es verantwortungsbewusst!
- Mega-Menüs: Der nächste Webdesign-Trend
- Mega Drop-Down-Navigationsmenüs funktionieren gut
- 25 Beispiele für Mega-Menüs im Webdesign
- Mega-Dropdown-Menüs (46 Beispiele)
Abschluss
Ich hoffe, Ihnen hat dieses Tutorial zum Erstellen von Mega-Menüs gefallen. Danke, dass Sie mitgehen!
By
