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.