snippets star schaufler.ch

Responsive Navigationen | CSS

nav ul
{
 list-style: none outside none;
 padding: 0;
 padding-bottom: 2em;
}
nav > ul > li
{
 float: left
}
nav li
{
 position: relative
}
nav li ul
{
 display: none;
 position: absolute;
 top: 100%;
}
nav ul li a:link
{
 background: rgba(0,0,0,0.8)
}
nav li a
{
 transition: background 0.5s ease-in-out 0s
}
nav li:hover ul
{
 display: block
}
nav > a
{
 display: none
}
nav ul a
{
 display: block;
 padding: .5em .9em;
 color: #fff;
 text-decoration: none;
}
nav > ul > li > a
{
 background: 000;
 margin-right: 1em;
}
nav > ul > li:hover > a, nav > ul:not(:hover ) > li.active > a
{
 background-color: #ADB57C;
 color: #fff;
}
nav li ul li a:hover, nav li ul:not(:hover ) li.active a
{
 background-color: #ADB57C;
 color: #fff;
}
@media only screen and (max-width:40em)
{ 
    nav
    {
     position: relative;
     top: auto;
     left: auto;
    }
    nav li ul
    {
     display: block;
     padding: 0;
    }
    nav > a
    {
     width: 35px;
     height: 35px;
     text-align: left;
     text-indent: -9999px;
     background: url("nav3.png") no-repeat scroll 0 0 transparent;
     position: relative;
    }
    nav:not(:target ) > a:first-of-type, nav:target > a:last-of-type
    {
     display: block
    }
    nav ul
    {
     height: auto;
     display: none;
     left: 0;
     right: 0;
    }
    nav:target > ul
    {
     display: block
    }
    nav > ul > li
    {
     width: 100%;
     float: none;
    }
    nav > ul > li > a
    {
     height: auto;
     text-align: left;
     margin: 0;
    }
    nav li ul
    {
     position: static;
     text-indent: 1.2em;
    }
}
Tags: css3, navigation, responsive von Andy 08-08-2013