Suckerfish CSS done right!

Vor ein paar Tagen wollte ich ein modernes HTML-Submenü bauen, welches aufklappt, wenn man mit der Maus über einen Menüpunkt fährt.

Auf diversen Seiten habe ich gesehen, dass viele diese Technik mit JavaScript realisieren. Ich finde das übertrieben, da sich dieser Effekt auch mit der CSS „hover“-Eigenschaft für Listenelemente lösen lässt (Stichwort: Suckerfish CSS). Das funktioniert aber nur in aktuellen Browsern.

Der Internet Explorer 6 unterstützt die „hover“-Eigenschaft nämlich nur für Anker. Wie ich leider feststellen musste, gibt es noch weitere Besonderheiten die man beachten muss. Nach 2 Stunden Arbeit habe ich dann aber einen Code entwickelt, der barrierefrei (ohne den Einsatz von display:none und visibility:hidden) ist und problemlos in Firefox und Internet Explorer 6-7 funktioniert (andere Browser wurden nicht getestet).

Screenshot:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<title>Floating Navigation</title>
		<style type="text/css">
		*
		{
			margin: 0; padding: 0; border: 0;
		}
 
		#navMenu ul
		{
			line-height: 30px;
		}
 
		#navMenu li
		{
			list-style: none;
			float: left;
			position: relative;
		}
 
		#navMenu a
		{
			text-align: center;
			display: block;
			width: 100px;
			height: 30px;				
		}
 
		/* nested list */
		#navMenu ul ul
		{			
			top: 30px;
			position: absolute;
			left: -999em;
		}
 
		#navMenu li:hover ul,
		#navMenu li.sfhover ul
		{
			left: auto;
		}
 
		/* IE7 fix: Prevents that the submenu disappears. */
		#navMenu ul ul 
		{
			background: white;
		}
 
		/* IE6 fix: Displays the submenu items among each other. */
		#navMenu li.sfhover ul
		{
			width: 100px;
		}
		</style>
		<!--[if IE 6]>
		<script type="text/javascript">
		sfHover = function()
		{
			var sfEls = document.getElementById("navMenu").getElementsByTagName("LI");
			for (var i=0; i<sfEls.length; i++)
			{
				sfEls[i].onmouseover=function()
				{ this.className+=" sfhover"; }
				sfEls[i].onmouseout=function()
				{ this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); }
			}
		}
		if (window.attachEvent) window.attachEvent("onload", sfHover);
		</script>
		<![endif]-->
	</head>
	<body>
		<div id="wrapper">
			<div id="navMenu">
				<ul>
					<li>
						<a href="#">Menu 1</a>
						<ul>
							<li><a href="#">Submenu 1</a></li>
							<li><a href="#">Submenu 2</a></li>
							<li><a href="#">Submenu 3</a></li>
							<li><a href="#">Submenu 4</a></li>
							<li><a href="#">Submenu 5</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Menu 2</a>
						<ul>
							<li><a href="#">Submenu 1</a></li>
							<li><a href="#">Submenu 2</a></li>
							<li><a href="#">Submenu 3</a></li>
							<li><a href="#">Submenu 4</a></li>
							<li><a href="#">Submenu 5</a></li>
						</ul>						
					</li>
					<li>
						<a href="#">Menu 3</a>
						<ul>
							<li><a href="#">Submenu 1</a></li>
							<li><a href="#">Submenu 2</a></li>
							<li><a href="#">Submenu 3</a></li>
							<li><a href="#">Submenu 4</a></li>
							<li><a href="#">Submenu 5</a></li>
						</ul>						
					</li>
					<li>
						<a href="#">Menu 4</a>
						<ul>
							<li><a href="#">Submenu 1</a></li>
							<li><a href="#">Submenu 2</a></li>
							<li><a href="#">Submenu 3</a></li>
							<li><a href="#">Submenu 4</a></li>
							<li><a href="#">Submenu 5</a></li>
						</ul>						
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

Hinweis: Alle Menüpunkte sind 30 Pixel hoch und 100 Pixel breit. Der gewählte DOCTYPE und die „X-UA-Compatible“-Eigenschaft sind wichtig für die korrekte Darstellung im Internet Explorer.

2 Gedanken zu „Suckerfish CSS done right!“

  1. Das ist zwar eine bekannte aber dennoch eine der besten Möglichkeiten solche Menüs zu realisieren.

    Wobei ich die Optimierung für den IE6 übertrieben finde :D. Ich denke der Anteil der IE6 Benutzer rechtfertigt in der heutigen Zeit keinerlei Optimierung in Richtung eben jenes Browsers.

    Zur Info: in Google Chrome 10 funktioniert dieser Menütyp einwandfrei.

    LG Rainer

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.