Heute geht es darum, wie man ein Dropdown Men\u00fc mit CSS\/HTML erstellt ohne die Nutzung von JavaScript. Diese Art der Navigation funktioniert auch im Internet Explorer ab Version 7.0.
\n<\/p>\n
Einige Besucher, wenn auch nur die Minderheit, haben in ihrem Browser JavaScript deaktiviert. Bei Besuchern mit deaktiviertem JavaScript, ist die Dropdown-Funktion des Men\u00fcs mit CSS gegeben, da dieser nur mittels HTML und CSS gesteuert wird. Ein Dropdown Men\u00fc in JavaScript hingegen, wird bei deaktiviertem JavaScript nicht funktionieren.<\/p>\n
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\u00fc in JavaScript programmiert ist, k\u00f6nnte es gut m\u00f6glich 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.<\/p>\n
Manche Versionen des Internet Explorer ben\u00f6tigen beim CSS Dropdown Men\u00fc eine Sonderbehandlung. Wie bereits erw\u00e4hnt, funktioniert das Dropdown Men\u00fc mit CSS ab IE Version 7.0. F\u00fcr IE 6.0 oder \u00e4lter muss leider noch eine „Fallback“-Methode mit JavaScript genutzt werden. Wer dies m\u00f6chte sollte die untere (zweite Variante nutzen).<\/p>\n
In der folgenden Grafik ist ein Dropdown Men\u00fc mit CSS ohne JavaScript abgebildet. Der entsprechende Code dazu befindet sich direkt darunter.<\/p>\n
#menu ul {margin:0px; padding:0px; list-style-type:none;}
\n#menu li {float:left; width:90px; text-align:center;}
\n#menu li ul{display:none; padding-top:3px;}
\n#menu li:hover ul {display:block;}
\n#menu li ul li {background-color:#2F2D49; border-bottom:1px solid #FFFFFF;}
\n#menu li ul li a{color:#FFFFFF;}
\n#menu li ul li:hover {background-color:#232323;}
\n[\/css]\n
Wer die entsprechende „Fallback“-Methode f\u00fcr IE 6 in JavaScript anwenden m\u00f6chte, muss die folgende Scripte einbinden:<\/p>\n[html]\n<!–[if lte IE 6]>
\n<script src=“http:\/\/code.jquery.com\/jquery-latest.js“><\/script>
\n<script type=“text\/javascript“ src=“script.js“><\/script>
\n<![endif]–>
\n[\/html]\n
Auch die HTML Sturktur muss leicht angepasst werden. Hier erhalten die Drop-Down Listen eine entsprechende ID.<\/p>\n
DropDown-menu-IE6<\/p>\n","protected":false},"excerpt":{"rendered":"
Heute geht es darum, wie man ein Dropdown Men\u00fc mit CSS\/HTML erstellt ohne die Nutzung von JavaScript. Diese Art der Navigation funktioniert auch im Internet Explorer ab Version 7.0.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[53],"tags":[],"yoast_head":"\n