Mobile Interface Menu

Prototype for mobile interface menu

by sebastianauer

HTML

<div id="nav">
    <div class="wrapper">
        <ul>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            
        </ul>
    </div>
    <p class="button"><img src="http://placedog.com/320/48"</p>
    </div>
        
        <div id="content">
            Vivamus non urna nec magna cursus blandit nec a dui. Aliquam molestie rhoncus posuere. Suspendisse potenti. Integer rhoncus ipsum sit amet velit tincidunt pellentesque. Mauris ultricies, lacus at laoreet rhoncus, orci dolor sodales eros, vel molestie odio nisl sit amet tellus. Quisque a ullamcorper nunc. Quisque nec lectus neque. Nulla facilisis bibendum orci eu ullamcorper. Vivamus ut leo nunc. Vivamus porta purus ut dui porttitor ac imperdiet quam condimentum. Proin vitae dictum orci. In ac nisl eu turpis iaculis mollis. Ut dolor arcu, placerat in congue sed, venenatis sit amet nulla. Aliquam neque augue, tristique sit amet molestie at, porta vitae ligula.
            <br />
            Aliquam venenatis adipiscing nibh, in vestibulum mauris suscipit vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sed interdum quam. Pellentesque euismod aliquet eleifend. Nullam quis ipsum urna, non fringilla purus. Nam pellentesque erat sit amet massa blandit quis semper massa volutpat. Integer blandit lorem erat, sed ullamcorper velit. Duis adipiscing interdum lectus, id pellentesque orci facilisis ut. Mauris tincidunt lacinia mollis. Ut rutrum, lorem ac tincidunt aliquam, ligula massa gravida ligula, non consectetur felis dui ac nisi. In tincidunt fermentum leo eu egestas. Maecenas laoreet, velit vitae...

CSS

body{background: #F0F0F0;}

#nav{border: 0px solid black; background: #FAFAFA; z-index: 20; position: absolute; top: 0; left: 0; width: 100%;}

ul {display: none; background: #A0A0A0; overflow: hidden;}

ul li {background: white; width: 38px; height: 38px; margin: 13px; border-radius: 6px; float:left; border: 1px solid #F7F7F7;}

ul li:hover{box-shadow: 1px 2px 2px 1px;}

#nav p.button {display:block; clear: both; padding: 6px 10px; background: gray; font-size: 24px; letter-spacing: 3px; font-weight: bold; text-align: center; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; -moz-box-shadow: 3px;}

#content {margin: 80px 0 10px 0; padding: 0px;}

JavaScript

$("p.button").click(function() {
    
    $("#nav ul").slideToggle({speed: 400, easing: "swing"});
});


$("#nav ul li").click(function(){
    $("#nav ul").slideUp(400);
});