Advanced Search

Return to Snippet

Revision: 56632
at April 6, 2012 03:28 by ryanfiorini
Updated Code 
<style>
#single {display:none;}

@media screen and (max-width: 600px) {
    #single {
        color: black;
        width: 42px;
        height: 30px;
        background: #ECEBEB url(images/menu-icon.png) no-repeat 10px center;
        padding: 8px 10px 0 42px;
        cursor: pointer;
        border: solid 1px #666;
        display: block;
    }
    #container:hover > #multiple{
        display:block;            
    }
    #multiple{
        clear: both;
        position: absolute;
        top: 38px;
        width: 160px;
        z-index: 10000;
        padding: 0px;
        background: #F8F8F8;
        border: solid 1px #999;
        display: none;
    }
}

#multiple li {
    list-style: none;
    float: left;
    background-color:pink;
    padding: 4px 15px;
    margin:5px;
    width:100px;
}�
</style>

<div id="container">
    <div id="single">My Family</div>
    <ul id="multiple">
        <li>ryan</li>
        <li>val</li>
        <li>alex</li>
        <li>mason</li>
        <li>angelina</li>
        <li>madison</li>
    </ul>
</div>�

Revision: 56631
at April 6, 2012 03:27 by ryanfiorini
Initial Code 
<style>
#single {display:none;}

@media screen and (max-width: 600px) {
    #single {
        color: black;
        width: 42px;
        height: 30px;
        background: #ECEBEB url(images/menu-icon.png) no-repeat 10px center;
        padding: 8px 10px 0 42px;
        cursor: pointer;
        border: solid 1px #666;
        display: block;
    }
    #container:hover > #multiple{
        display:block;            
    }
    #multiple{
        clear: both;
        position: absolute;
        top: 38px;
        width: 160px;
        z-index: 10000;
        padding: 0px;
        background: #F8F8F8;
        border: solid 1px #999;
        display: none;
    }
}

#multiple li {
    list-style: none;
    float: left;
    background-color:pink;
    padding: 4px 15px;
    margin:5px;
    width:100px;
}​
</style>

<div id="container">
    <div id="single">My Family</div>
    <ul id="multiple">
        <li>ryan</li>
        <li>val</li>
        <li>alex</li>
        <li>mason</li>
        <li>angelina</li>
        <li>madison</li>
    </ul>
</div>​
Initial URL 
http://jsfiddle.net/ryanwfiorini/hWjmb/
Initial Description 
This will take the screen width into account and display either a horizontal menu or a dropdown menu with a hover style.  Resize your window to see the effect.
Initial Title 
Use CSS3 Media Screen to go from Horizontal Menu to dropdown
Initial Tags 
dropdown, CSS3
Initial Language 
CSS