Du verwendest einen Internet Explorer in einer Version kleiner gleich 8. Dieser Browser wird nicht unterstützt. Bitte aktualisiere mindestens auf Version 9.
Patrick Saar - Codes

Codes

Patrick Saar

CSS Dropdown Menu

Ein weiteres Code Schnipsel aus meinen Webprojekten, ein auf CSS basierendes Dropdown Menu ohne eine Zeile JavaScript.

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: 1543

Diese Seite verwendet Cookies um die beste Nutzerfreundlichkeit zu bieten. Falls Du auf der Seite weitersurfst, stimmst Du der Cookie-Nutzung zu.
Details Ok