Der Code wird hier zum Herauskopieren bzw. als Download angeboten. Dieser Code entstand durch die Überlegung ein barrierefreies Dropdown Menu für alle User zu gestalten.
Alle Effekte des Menus werden durch die Pseudo-Klasse :hover erzielt.
Unten dazu ein Beispiel wie das Ganze dann aussieht, der Download-Link und der CSS- und HTML-Code.
Beispiel
Der CSS Code
/* ------------------------------------------------------------------- */
/* ------------- Autor: Patrick Saar - www.patrick-saar.de ----------- */
/* ------------------- CSS Dropdown Menu v. 1.0 ---------------------- */
/* ------------------ Copyright 2012 Patrick Saar -------------------- */
/* ------------------------------------------------------------------- */
#css-dropdown-menu {
position: relative;
}
#css-dropdown-menu-left, #css-dropdown-menu-right, ul.css-dropdown-menu1, ul.css-dropdown-menu2, ul.css-dropdown-menu3 { /* css-dropdown-menu Standardeinstellungen */
float: left;
list-style-type: none; /* Kein Aufzählungszeichen */
position: absolute;
top: 0px; /* css-dropdown-menuposition vertikal */
margin: 0;
padding: 0;
z-index: 100; /* css-dropdown-menu immer im Vordergrund, ggf. z-index erhöhen */
}
#css-dropdown-menu-left { /* Trennstrich links */
left: 9px;
height: 20px;
width: 1px;
background: #090909;
}
ul.css-dropdown-menu1 { /* 1. Dropdown Menu Position horizontal */
left: 10px;
}
ul.css-dropdown-menu2 { /* 2. Dropdown Menu Position horizontal */
left: 150px;
}
ul.css-dropdown-menu3 { /* 3. Dropdown Menu Position horizontal */
left: 290px;
}
#css-dropdown-menu-right { /* Trennstrich rechts */
left: 430px;
height: 20px;
width: 1px;
background: #868686;
}
ul.css-dropdown-menu1 li a, ul.css-dropdown-menu2 li a, ul.css-dropdown-menu3 li a {
font-size: 14px;
font-weight: bold;
text-align: center;
color: #fff;
text-decoration: none;
width: 138px;
height: 20px;
padding: 0;
border-left: 1px #868686 solid; /* Trennstrich links */
border-right: 1px #090909 solid; /* Trennstrich rechts */
display: block;
margin:0px;
background: #111;
}
ul.css-dropdown-menu1 li ul, ul.css-dropdown-menu2 li ul, ul.css-dropdown-menu3 li ul {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
z-index: 100;
}
ul.css-dropdown-menu1 li:hover ul, ul.css-dropdown-menu2 li:hover ul, ul.css-dropdown-menu3 li:hover ul {
display: block;
position: relative;
z-index: 100;
}
ul.css-dropdown-menu1 li:hover > a, ul.css-dropdown-menu2 li:hover > a, ul.css-dropdown-menu3 li:hover > a {
background: #aaa;
}
ul.css-dropdown-menu1 li ul li:hover > a, ul.css-dropdown-menu2 li ul li:hover > a, ul.css-dropdown-menu3 li ul li:hover > a {
background: #a00003;
}
ul.css-dropdown-menu1 li ul li, ul.css-dropdown-menu2 li ul li, ul.css-dropdown-menu3 li ul li {
float: none;
}
ul.css-dropdown-menu1 li ul li a, ul.css-dropdown-menu2 li ul li a, ul.css-dropdown-menu3 li ul li a {
font-weight: normal;
font-size: 10px;
border: none;
width: 140px;
height: 20px;
padding: 7px 0 0 0;
background: #111;
}Und der HTML-Code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css-dropdown-menu.css" media="all" />
<title>CSS Dropdown Menu</title>
</head>
<body style="font-family: Verdana, Geneva, sans-serif;">
<nav id="css-dropdown-menu">
<div id="css-dropdown-menu-left"></div>
<ul class="css-dropdown-menu1">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Link 1.1</a></li>
</ul>
</li>
</ul>
<ul class="css-dropdown-menu2">
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
</ul>
</li>
</ul>
<ul class="css-dropdown-menu3">
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
</ul>
</li>
</ul>
<div id="css-dropdown-menu-right"></div>
</nav>
</body>
</html>1,8 KB - Downloads: 2791
