Drop down-meny med CSS

Skärmavbild 2013-02-17 kl. 21.26.32Idag tänkte jag dela med mig av ett litet tips om hur man utvecklar en snygg drop downmeny med endast CSS. Jag har själv använt tekniken på Bomull & Linne och det funkar väldigt bra.

Se demo här.

I exemplet använder jag två huvudalternativ samt en undermeny för varje meny.

Menyn bygger på att man använder sig av vanliga listor, ul.

För att sedan fixa till menyn använder vi följande CSS.

 

nav.primary ul,
nav.primary ul li {
    margin: 0;
    font-family:Helvetica, Arial;
    font-weight:200;
    font-size: 14px;
}

nav.primary ul li {
    display: inline;
    float: left;
    position: relative;
    padding: 0 20px;
    margin: 14px 0 0 0;
    border-right: 1px solid #ccc;
}
    nav.primary ul li:first-child {
        padding-left: 0;
    }
    nav.primary ul li:last-child {
        border-right: none;
    }

nav.primary ul li a {
    color: #82726c;
    text-decoration: none;
    margin: 0;
    padding-top: 20px;
}

nav.primary ul ul {
    z-index: 999;
    position: absolute;
    height: 0;
    overflow: hidden;
    background: #fff;
    margin: 0 0 0 0;
}

nav.primary ul li:hover ul {
    height: auto;
    overflow: auto;
    border: 1px solid #d7d0cd;
    padding: 5px;
}
nav.primary ul ul li {
    display: list-item;
    float: none;
    padding: 3px 5px;
    margin: 3px 0;
    border:none;
}
nav.primary ul ul li a{
	white-space: nowrap;
    display: block;
    padding: 0;

}
nav.primary ul ul li:first-child {
    padding: 3px 5px;
    margin: 3px 0;
}


Genom att använda följande CSS sätter vi höjden på undermenyn till 0px samt overflow:hidden för att gömma texten i menyn. Genom att använda height:0 så kan fortfarande skärmläsare läsa länkar som finns i undermenyn.

nav.primary ul ul {
    z-index: 999;
    position: absolute;
    height: 0;
    overflow: hidden;
    background: #fff;
    margin: 0 0 0 0;
}

För att visa menyn när man hovrar använder vi helt enkelt pseudo-klassen :hover och sätter tillbaka höjden till auto.

nav.primary ul li:hover ul {
    height: auto;
    overflow: auto;
    border: 1px solid #d7d0cd;
    padding: 5px;
}

Du kan se hur menyn fungerar här.

Din kommentar eller åsikt