Ich erkläre hier wie man eine einfache Dropdown-Navigation ohne eine einzige Zeile JavaScript-Code erstellen kann.
Als erstes erstelle ich die HTML-Datei index.html mit der Struktur der Webseite.
<!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-Menü</title>
<link rel=''stylesheet'' href=''design.css''/>
</head>
<body>
<nav id="navigation">
<ul>
<li><a href="#">Menü</a>
<ul>
<li><a href="#">Untermenü</a></li>
<li><a href="#">Untermenü</a></li>
</ul>
</li>
<li><a href="#">Menü</a>
<ul>
<li><a href="#">Untermenü</a></li>
<li><a href="#">Untermenü</a></li>
</ul>
</li>
<li><a href="#">Menü</a>
<ul>
<li><a href="#">Untermenü</a></li>
<li><a href="#">Untermenü</a></li>
</ul>
</li>
<li><a href="#">Menü</a>
<ul>
<li><a href="#">Untermenü</a></li>
<li><a href="#">Untermenü</a></li>
</ul>
</li>
<li><a href="#">Menü</a>
<ul>
<li><a href="#">Untermenü</a></li>
<li><a href="#">Untermenü</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Erklärung zur HTML-Datei:
Jedes Menüpunkt hat zwei Untermenüpunkte. In der Codezeile <link rel=''stylesheet'' href=''design.css''/> habe ich die CSS-Datei design.css der Webseite zugeordnet, diese Datei muss ich noch erstellen.
Als nächstes erstelle ich die CSS-Datei design.css.
body {
font-size:100%;
text-align:center;
background:#fff;
}
#navigation {
position:relative;
margin:0 auto;
padding:0;
font-size:150%;
width:850px;
height:40px;
}
#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 #000 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;
}
Erklärung zum CSS-Code:
Man sieht alle Menüpunkte und Untermenüpunkte, der Dropdown Effekt kommt noch nicht zustande. Um den Dropdown Effekt hinzukriegen muss man die Untermenüpunkte zuerst verstecken, das erreicht man indem man den CSS-Code mit folgenden Codezeilen erweitert.
#navigation ul ul {
display:none;
position:absolute;
float:left;
margin:0 0 0 -2px;
padding:0;
}
Erklärung zum CSS-Code:
Die Untermenüpunkte #navigation ul ul werden durch die Codezeile display:none; nicht angezeigt. Jetzt sollen die jeweiligen Untermenüpunkte, sobald man mit der Maus darüber fährt, auftauchen. Das erreicht man indem man den CSS-Code mit folgenden Codezeilen erweitert
#navigation ul li:hover > ul,
#navigation ul li:focus > ul {
display:block;
}
Erklärung zum CSS-Code:
Wenn man mit der Maus über die Menüpunkte fährt ul li:hover werden die jeweiligen Untermenüpunkte > u durch die Codezeile display:block; angezeigt.
Hier der komplette CSS-Code:
body {
font-size:100%;
text-align:center;
background:#fff;
}
#navigation {
position:relative;
margin:0 auto;
padding:0;
font-size:150%;
width:850px;
height:40px;
}
#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 #000 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 {
display:none;
position:absolute;
float:left;
margin:0 0 0 -2px;
padding:0;
}
#navigation ul li:hover > ul,
#navigation ul li:focus > ul {
display:block;
}
Kommentar eingeben