Mobile Menu for Rubicon

by lovromar

HTML

<div class="content">
    <nav class="mainNav">
        <ul>
            <li><a href="javascript:void(0);">Home</a></li>
            <li><a href="javascript:void(0);">About Us</a></li>
            <li><a href="javascript:void(0);">Teachers</a></li>
            <li><a href="javascript:void(0);">Students</a></li>
            <li><a href="javascript:void(0);">Activities</a></li>
            <li><a href="javascript:void(0);">Media</a></li>
            <li><a href="javascript:void(0);">Venue Hire</a></li>
            <li><a href="javascript:void(0);">Contact Us</a></li>
        </ul>
    </nav>

    <div style="height:24em;"></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
html {
    background-color: #8ec641;
    background-image: -webkit-radial-gradient(50% 0%, circle, hsla(0,0%,100%,.25), hsla(0,0%,100%,0)),
                      -webkit-linear-gradient(-45deg, transparent 45%, hsla(0,0%,0%,.05) 45%, hsla(0,0%,0%,.05) 55%, transparent 55%);
    background-position: 50% 0, 50% 50%;
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, .25em .25em;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-top: 6em;
}
body {
    margin: 0 auto;
    width: 80%;
}
.content {
    background-color: #fff;
    box-shadow: 0 0 1em hsla(0,0%,0%,.1);
}
.mainNav {
    background-color: #5978cf;
    color: #fff;
    cursor: pointer;
}
.mainNav:before {
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    border-bottom: 1px solid hsla(0,0%,0%,.25);
    content: '≡ Menu';
    display: block;
    font: bold 1em/3 sans-serif;
    padding-left: 1em;
    text-shadow: 0 1px 1px hsla(0,0%,0%,.1);
}
.mainNav ul {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    box-shadow: inset 0 0 .25em .1em hsla(0,0%,0%,.1);
    display: none;
    left: 0;
    list-style: none;
    text-align: left;
    top: 3em;
}
.mainNav a {
    color: #fff;
    border-bottom: 1px solid hsla(0,0%,0%,.1);
    border-top: 1px solid hsla(0,0%,100%,.1);
    display: block;
    font: 1em/3 sans-serif;
    padding: 0 1em;
    text-decoration: none;
    text-shadow: 0 1px 0 hsla(0,0%,0%,.1);
}
.mainNav li:first-child a {
    border-top: none;
}
.mainNav a:hover,
.mainNav a:focus {
    background-color: hsla(0,0%,100%,.1);
}

JavaScript

var $mainNav = $('.mainNav'),
    $mainNavA = $mainNav.find('a');

$mainNav.on('click', function() {
    $mainNav.children('ul').slideToggle();
});

$mainNavA.on('click', function(e) {
    e.stopPropagation();
});