DropDown-Menu mit JavaScript und CSS

In der Kategorie ‘Webdesign’ möchte ich heute ein kleines DropDown-Menu vorstellen, wie ich es während meiner Ausbildung in Brighton bei unserem Web-Guru Paul Hayler gelernt habe. Hi Paul! :-)

Man kann dieses Menu benutzen, um bei umfangreichen Seiten die Navigation etwas übersichtlicher zu strukturieren und Unterkategorien zu verbergen. Hierzu brauchen wir nichts weiter, als ein bisschen JavaScript, CSS und eine ungeordnete Liste.

Einfach folgendes JavaScript in den head-Bereich der Seite einfügen:

<script language=”javascript” type=”text/javascript”>
<!–
function dropMenu(currMenu) {

if (document.getElementById) {
thisMenu = document.getElementById(currMenu).style

if(thisMenu.display == “block”) {
thisMenu.display = “none”
}
else {
thisMenu.display = “block”
}
return false
}
else {

return true
}
}

//–>
</script>

Nun brauchen wir noch das CSS, das die Listen auf ‘onclick’ verbirgt bzw. wieder sichtbar macht. Ebenfalls in den head-Bereich einfügen oder, noch besser, in eine ausgelagerte CSS-Datei:

<style type=”text/css”>
<!–
.menu {
display: none;
}
–>
</style>

Fehlt noch eine Liste, die uns als Navigationsleiste dienen soll:

<h3><a href=”#a” onclick=”return dropMenu(‘menu1′)”> Menu 1</a></h3>
<ul class=”menu” id=”menu1″>
<li><a href=”#a”>Link 1</a></li>
<li><a href=”#a”>Link 2</a></li>
<li><a href=”#a”>Link 3</a></li>
</ul>

<h3><a href=”#a” onclick=”return dropMenu(‘menu2′)”>Menu 2</a></h3>
<ul class=”menu” id=”menu2″>
<li><a href=”#a”>Link 1</a></li>
<li><a href=”#a”>Link 2</a></li>
<li><a href=”#a”>Link 3</a></li>
</ul>

<h3><a href=”#a” onclick=”return dropMenu(‘menu3′)”>Menu 3</a></h3>
<ul class=”menu” id=”menu3″>
<li><a href=”#a”>Link 1</a></li>
<li><a href=”#a”>Link 2</a></li>
<li><a href=”#a”>Link 3</a></li>
</ul>

Selbstverständlich könnt ihr die Listenelemente nun noch entsprechend mit CSS stylen und z.B. mit einem hover versehen. Den Code könnt ihr gerne kopieren und benutzen. Natürlich muss für ein ordnungsgemäßes Funktionieren dieser Navigation JavaScript im Browser aktiviert sein.

Wer sie mal im Einsatz sehen will, kann sich das Ergebnis z.B. auf ssb-natura.com ansehen. Die Seite befindet sich allerdings noch im Aufbau.

Share
This entry was posted in Webdesign and tagged , . Bookmark the permalink.

4 Antworten auf DropDown-Menu mit JavaScript und CSS

  1. Ute sagt:

    Hi Frank,

    ich hab eine Vorliebe für Menüs, die ohne JavaScript auskommen, denn noch immer kommt es vor, dass Besucher es nicht nutzen.

    Leider gibt es für manche Menüs, noch immer keine JavaScript-freie Version, die auch mein allerbester Freund der IE6 noch kapiert.

    Ich habe da noch immer einen Auftritt, wo es nur mit einem grässlichen Tabellenkonstrukt für den IE6 möglich war, das vorgegebene Design JS-frei umzusetzen.

    Andererseits überlege ich so allmählich, wie hoch wohl der Anteil IE6-Nutzer ohne JavaScript ist, und denke über einen Umbau nach.

    Gruß vom überdachten und darum regenfreien Balkon

    Ute

  2. admin sagt:

    Hallole Utele, vielen Dank für Deinen Beitrag. :-)

    Nun, ich weiß nicht. Deaktiviertes JavaScript ist eigentlich kein Kriterium für mich, denn ich frage mich, wer das überhaupt komplett deaktiviert und vor allem: Wie weit kommt er damit? Er wird dann zwangsläufig auch an geschätzten 3,4 Zillionen anderen Seiten scheitern, darunter natürlich vor allem auch so große wie n-tv und gmx. Ein paar Blogs wird er lesen können. Ich denke, viele wissen nicht mal, wo man das überhaupt abschaltet. Der Anteil derer, die z.B. kein Flash-Plugin haben, ist viel größer. Vom IE-6 will ich lieber erst gar nicht anfangen (von wegen graue Haare und so!). Da wäre mir am Liebsten dass jeder, der das Ding benutzt, einfach nur einen schwarzen Bildschirm zu sehen bekommt, bis er sich dazu anschickt, einen gescheiten Browser zu benutzen. Wir Webdesigner müssen das Leben den IE6-Surfern so schwer wie möglich machen! Kurz – wenn es nicht explizit gefordert wird für eine Firma, berücksichtige ich den gar nicht mehr.

    Viele Grüße aus der sonnigen Pfalz
    Frank

  3. Ute sagt:

    Huhu,

    nein, ich kenne keine exakten Zahlen, wie häufig JavaScript deaktiviert ist. Ich weiß, dass es in manchen Firmen noch so gemacht wird. Meines Wissens gibt es ansonsten eben noch einige Software, die einfach nicht mit JavaScript zurechtkommt, z.B. ältere Screenreader und Textbrowser. Die heutigen Textbrowser, wie z.B. Links (Nachfolger von Lynx) finden Links meist selbst dann, wenn JavaScript genutzt wurde.

    Nun, mir fällt manchmal erst sehr spät auf, dass ich nach einem Webseitentest vergessen habe, JavaScript wieder zu aktivieren… Ich denke es hängt von den genutzten Seiten ab. Bei n-tv war ich glaub noch nie, gmx besuche ich etwa einmal im Jahr, wenn für die Freemailadresse die Anfrage nach aktuellen Daten kommt.

    Zum Thema wo und wie abschalten, das hängt vom Browser ab, klar die den IE nutzende Mehrheit weiß das wohl kaum, bei manch anderem Browser, muss JavaScript bewußt eingeschaltet werden.

    Leider kann ich mir zur Zeit noch nicht leisten IE6 zu ignorieren, allerdings bin ich nicht mehr zu jedem Gefummel bereit. Les- und bedienbar ist für mich selbstverständlich und wenn es dann noch ungefähr optisch passt, dann höre ich auf.

    Bei meinen letzten Tests mit browsershots.org habe ich immer auch den IE8 dazu genommen, den habe ich nirgends installiert, der machte es meist schlechter als IE5, also schau’n wir mal, was das Ding wirklich kann, wenn es veröffentlicht wird…

  4. Peter sagt:

    Hi

    Schon jetzt Danke für den Code. Ist genau das was ich gesucht habe. Habe aber noch eine Frage dazu….

    Wie kann ich es anstellen, dass, wenn ich in dem Beispiel http://www.ssb-natura.com/ auf Produkte klicke, sich nicht nur das DropDown öffnet sondern auch der Inhalt des “mainContent” ändert? Es soll sich quasi eine neue Seite aufrufen, aber trotzdem das DropDown beibehalten.

    Nochmals Danke
    Grüße

Hinterlasse eine Antwort

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

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>