Ein einfaches Dropdown-Menü mit jQuery erstellen

18-03-2015

Ich erkläre hier wie man mit Hilfe von jQuery (JavaScript-Bibliothek) ein einfaches Dropdown-Menü erstellen kann.

Zuerst erstelle ich die HTML-Datei mit der Struktur des Menüs, bei der jedes Menüpunkt 2 Untermenüpunkte hat. Danach muss ich die jQuery-Datei herunterladen und in die Webseite einfügen. Auf der Webseite von jQuery findet man die Datei zum Herunterladen: http://jquery.com/download/

Diese Datei <script src=''jquery-1.11.2.min.js''></script> habe im HTML-Code vor dem </body> eingefügt.

Hier der vorläufige HTML-Code:

<!DOCTYPE html>
<html>
<head>
<title>Dropdown-Menu</title>
</head>
<body>
<nav id="navigation">
<ul>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Untermenu</a></li>
<li><a href="#">Untermenu</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Untermenu</a></li>
<li><a href="#">Untermenu</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Untermenu</a></li>
<li><a href="#">Untermenu</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Untermenu</a></li>
<li><a href="#">Untermenu</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Untermenu</a></li>
<li><a href="#">Untermenu</a></li>
</ul>
</li>
</ul>
</nav>
<script src=''jquery-1.11.2.min.js''></script>
</body>
</html>

Schaut man sich die Webseite an passiert jetzt noch nichts, man sieht einfach eine Liste. Damit die Dropdown Animation zustande kommt, muss man noch den JavaScript-Code schreiben. Dafür erstelle ich eine neue JavaScript-Datei und nenne sie script.js.

Ich wähle für den Dropdown-Menü folgende jQuery Effects (Effekte):

Sowie folgende jQuery Events (Ereignisse):

Die Datei script.js sieht wie folgt aus:

$( document ).ready(function() {
  $(''#navigation ul ul'').hide();
  $(''#navigation ul li'').hover(function() {
    $(''ul'', this).slideToggle(200);
  });
});

Erklärungen zum Code:

$(''#navigation ul ul'').hide(); // Der jQuery Effect .hide() versteckt die Untermenüpunkte.

$(''#navigation ul li'').hover() // Mit den jQuery Event .hover() wird der jQuery Effect .slideToggle erzeugt.

$(''ul'', this).slideToggle(200); // Der jQuery Effect .slideToggle(Zeitdauer) zeigt und versteckt die Untermenüpunkte.

Diese Datei füge ich unterhalb von jQuery in meinen HTML-Code ein:

<script src=''jquery-1.11.2.min.js''></script>
<script src=''script.js''></script>
</body>

Jetzt hat man schon ein funktionierendes Dropdown-Menü, um das Menü noch ein bisschen anzupassen erstelle ich die CSS-Datei style.css.

body {
font-size:100%;
text-align:center;
background:#000;
}

#navigation {
position:relative;
margin:0 auto;
padding:0;
font-size:150%;
width:850px;
height:44px;
}

#navigation ul {
margin:0 40px;
padding:0;
}

#navigation ul li {
position:relative;
float:left;
display:block;
padding:0;
margin:0;
width:150px;
height:40px;
background:#990000;
border:2px #fff solid;
}

#navigation ul li a {
display:block;
padding:5px;
margin:0;
height:30px;
text-decoration:none;
text-align:center;
color:#fff;
}

#navigation ul li a:hover,
#navigation ul li a:focus {
color:#990000;
background:#fff;
}

#navigation ul ul {
position:absolute;
float:left;
margin:0 0 0 -2px;
padding:0;
}

Hier die vollständige HTML-Datei:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropdown-Menu</title>
<link rel=''stylesheet'' href=''style.css''/>
</head>
<body>
<nav id="navigation">
<ul>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Untermenu</a></li>
<li><a href="#">Untermenu</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Untermenu</a></li>
<li><a href="#">Untermenu</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Untermenu</a></li>
<li><a href="#">Untermenu</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Untermenu</a></li>
<li><a href="#">Untermenu</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Untermenu</a></li>
<li><a href="#">Untermenu</a></li>
</ul>
</li>
</ul>
</nav>
<script src=''jquery-1.11.2.min.js''></script>
<script src=''script.js''></script>
</body>
</html>

Kommentar eingeben