Wir nutzen Cookies & das Facebook Besucheraktions-Pixel für statistische Zwecke. Einverständnis bestätigen: OK

Mehr Infos: Datenschutzbestimmungen

Google Adwords Premier Google Partner Badge
 

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.

dropdown-menu

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

Verfasst von Arwin Barsekhian

Hat dir dieser Beitrag gefallen?

Über den Autor

Blog
Unter „Blogredaktion“ werden Fachbeiträge verschiedener Experten aus dem Unternehmen ohne Autorenkennzeichnung publiziert. Ihr habt Fragen oder Anregungen zu einem speziellen Beitrag? Kein Problem, die Blogredaktion steht euch dafür gerne hier zur Verfügung.

Hinterlasse einen Kommentar

  • Peter 02.10.2011, 19:14 Uhr

    Eine ähnliche Lösung setze ich bei mir auch ein, die JS Spielereien benötige ich nicht und bevor ich knapp 5% der Nutzer von der Navigation ausschließe, nutze ich lieber CSS.
    Allerdings sehe ich es nicht ein, weiterhin für den IE6 zu optimieren, auch wenn der einen höheren Anteil hat, als die Nicht-JS Nutzer.

  • jutta 03.10.2011, 18:32 Uhr

    Wurde zwar schon öfters auf anderen Blogs erwähnt, aber hier auch noch mit IE6 Fallback, funktioniert es in allen anderen Browsern problemlos, ich mein der IE7 hätte auch Probleme mit li:hover.

  • Arwin Barsekhian 04.10.2011, 16:33 Uhr

    Hallo Leute,

    Danke für die Kommentare. Also ich persönlich und privat beachte auch die IE6 Browser nicht. Allerdings ist es für manche Firman ratsam. Die CSS Navigation funktioniert auch mit IE7. Ihr könnt die ZIP Datei runterladen und mit dem IETester die entsprechende DropDown Navigations testen.

  • jutta 08.10.2011, 19:31 Uhr

    IETEster habe ich natürlich installiert, hatte es aber vorher nicht getestet.
    Dann ist alles in Ordnung.

  • winner 09.10.2011, 17:18 Uhr

    Lösungen ohne JS bevorzuge ich auch, wenn es möglich ist, hoffentlich ist die Kampagne gegen den IE6 bald erfolgreicher, der Marktanteil ist ja immer noch ziemlich hoch.

  • Nessa 12.10.2011, 11:10 Uhr

    Danke für den super Beitrag Arwin!

  • Jtgarrett 27.12.2011, 18:08 Uhr

    Schade… leider funktioniert o.g. Code bei mir nicht.

    Habe alle erforderlichen Dateien erstellt und das Menü in die index.php eingebunden. Aber anstelle des gewollten Menüs kam eine Auflistung als wenn ich normale gepunktete Listen erstellt hätte…

  • Arwin 28.12.2011, 8:54 Uhr

    Hallo Jtgarrett,

    Unter dem Punkt “Download DropDown-Menu + IE 6 JavaScript” habe ich die Beispiel Navigation als Download bereitgestellt.

  • Stefanie Sp 28.12.2011, 12:28 Uhr

    cool Arwin! Danke.

  • Nussmund 12.09.2012, 16:26 Uhr

    Dankuss

  • TRANSALEX Spedition 09.08.2013, 17:48 Uhr

    Hallo Arwin,

    ich kenne mich zwar mit HMTL und CSS etwas aus, weiß jedoch noch nicht genau wie ich das hier gezeigte umsetze. können Sie mir sagen wie ich diese Menü auf unserer Webseite http://www.transalex.de einbaue?

    Viele Grüße,

    Martin