Dropdown Menü mit CSS ohne JavaScript

Heute geht es darum, wie man ein Dropdown Menü mit CSS/HTML erstellt ohne die Nutzung von JavaScript. Diese Art der Navigation funktioniert auch im Internet Explorer ab Version 7.0.

Was sind die Vor- und Nachteile von einem CSS Dropdown Menü ohne JavaScript?

Einige Besucher, wenn auch nur die Minderheit, haben in ihrem Browser JavaScript deaktiviert. Bei Besuchern mit deaktiviertem JavaScript, ist die Dropdown-Funktion des Menüs mit CSS gegeben, da dieser nur mittels HTML und CSS gesteuert wird. Ein Dropdown Menü in JavaScript hingegen, wird bei deaktiviertem JavaScript nicht funktionieren.

Ein weiterer wichtiger Faktor ist der Google Bot (Crawler), denn dieser hat keine Probleme mit dem crawlen einer HTML/CSS Datei Navigation und den entsprechenden Verlinkungen. Je nachdem wie ein Dropdown Menü in JavaScript programmiert ist, könnte es gut möglich sein, dass der Google Bot die entsprechenden Links nicht crawlen kann, weil diese z.B. nicht direkt im HTML stehen sondern in einer JavaScript Datei ausgelagert wurden.

Manche Versionen des Internet Explorer benötigen beim CSS Dropdown Menü eine Sonderbehandlung. Wie bereits erwähnt, funktioniert das Dropdown Menü mit CSS ab IE Version 7.0. Für IE 6.0 oder älter muss leider noch eine „Fallback“-Methode mit JavaScript genutzt werden. Wer dies möchte sollte die untere (zweite Variante nutzen).

In der folgenden Grafik ist ein Dropdown Menü mit CSS ohne JavaScript abgebildet. Der entsprechende Code dazu befindet sich direkt darunter.

HTML Code

[html] <div>
<ul id=“menu“>
<li><a href=“#“ title=“Home“>Home</a></li>
<li><a href=“#“ title=“Angebote“>Angebote</a>
<ul>
<li><a href=“#“ title=“Angebot 1″>Angebot 1</a></li>
<li><a href=“#“ title=“Angebot 2″>Angebot 2</a></li>
<li><a href=“#“ title=“Angebot 3″>Angebot 3</a></li>
<li><a href=“#“ title=“Angebot 4″>Angebot 4</a></li>
<li><a href=“#“ title=“Angebot 5″>Angebot 5</a></li>
</ul>
</li>
<li><a href=“#“ title=“Support Pakete“>Support Pakete</a>
<ul>
<li><a href=“#“ title=“Paket 1″>Paket 1</a></li>
<li><a href=“#“ title=“Paket 2″>Paket 2</a></li>
<li><a href=“#“ title=“Paket 3″>Paket 3</a></li>
<li><a href=“#“ title=“Paket 4″>Paket 4</a></li>
<li><a href=“#“ title=“Paket 5″>Paket 5</a></li>
</ul>
</li>
<li><a href=“#“ title=““>Kontakt</a></li>
<li><a href=“#“ title=““>Impressum</a></li>
</ul>
</div>
[/html]

CSS Code

[css] body {font-family:arial; font-size:12px;}
div {cursor:default;}
a {text-decoration:none; color:#000000;}

#menu ul {margin:0px; padding:0px; list-style-type:none;}
#menu li {float:left; width:90px; text-align:center;}
#menu li ul{display:none; padding-top:3px;}
#menu li:hover ul {display:block;}
#menu li ul li {background-color:#2F2D49; border-bottom:1px solid #FFFFFF;}
#menu li ul li a{color:#FFFFFF;}
#menu li ul li:hover {background-color:#232323;}
[/css]

IE 6 „Fallback“-Methode mit JavaScript

Wer die entsprechende „Fallback“-Methode für IE 6 in JavaScript anwenden möchte, muss die folgende Scripte einbinden:

[html] <!–[if lte IE 6]>
<script src=“http://code.jquery.com/jquery-latest.js“></script>
<script type=“text/javascript“ src=“script.js“></script>
<![endif]–>
[/html]

Auch die HTML Sturktur muss leicht angepasst werden. Hier erhalten die Drop-Down Listen eine entsprechende ID.

HTML Code mit ID für IE 6

[html] <div>
<ul id=“menu“>
<li><a href=“#“ title=“Home“>Home</a></li>
<li id=“angebote“><a href=“#“ title=“Angebote“>Angebote</a>
<ul>
<li><a href=“#“ title=“Angebot 1″>Angebot 1</a></li>
<li><a href=“#“ title=“Angebot 2″>Angebot 2</a></li>
<li><a href=“#“ title=“Angebot 3″>Angebot 3</a></li>
<li><a href=“#“ title=“Angebot 4″>Angebot 4</a></li>
<li><a href=“#“ title=“Angebot 5″>Angebot 5</a></li>
</ul>
</li>
<li id=“support“><a href=“#“ title=“Support Pakete“>Support Pakete</a>
<ul>
<li><a href=“#“ title=“Paket 1″>Paket 1</a></li>
<li><a href=“#“ title=“Paket 2″>Paket 2</a></li>
<li><a href=“#“ title=“Paket 3″>Paket 3</a></li>
<li><a href=“#“ title=“Paket 4″>Paket 4</a></li>
<li><a href=“#“ title=“Paket 5″>Paket 5</a></li>
</ul>
</li>
<li><a href=“#“ title=““>Kontakt</a></li>
<li><a href=“#“ title=““>Impressum</a></li>
</ul>
</div>
[/html]

script.js

[javascript] $(document).ready(function(){
$(‚li‘).mouseover(function() {
var $id = $(this).attr(‚id‘);
$(‚#’+$id+‘ ul‘).css(‚display‘,’block‘);
});
$(‚li‘).mouseout(function() {
var $id = $(this).attr(‚id‘);
$(‚#’+$id+‘ ul‘).css(‚display‘,’none‘);
});
});
[/javascript]

Download DropDown-Menu + IE 6 JavaScript

DropDown-menu-IE6