Dropdown Nav Menus

My take on some simple, yet dynamically generated dropdown menus.

by Taylor Lopez

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<nav>
    <ul>
        <li class="root-nav">home</li>
        <li class="root-nav">products
            <div class="sub-nav">
                <ul>
                    <li>software</li>
                    <li>large machinery</li>
                    <li>toy pianos</li>
                    <li>those monkeys with the cymbals</li>
                    <li>a taxidermized moose head</li>
                </ul>
            </div>
        </li>
        <li class="root-nav">about
            <div class="sub-nav">
                <ul>
                    <li>me</li>
                    <li>tom</li>
                    <li>tom's girlfriend</li>
                    <li>tom's other girlfriend</li>
                </ul>
            </div>
        </li>
        <li class="root-nav">contact
            <div class="sub-nav">
                <ul>
                    <li>email</li>
                    <li>phone</li>
                    <li>facebook</li>
                    <li>twitter</li>
                    <li>linkdin</li>
                    <li>tumblr</li>
                    <li>pinterest</li>
                    <li>instagram</li>
                    <li>vine</li>
                    <li>youtube</li>
                    <li>tom's mom's phone number</li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

CSS

body {
    //font-family: arial;
    position: relavite;
    width: 80%;
    margin: 3em auto;
}
nav {
    color: #333;
    width: 100%;
    background-color: rgb(75, 150, 0);
    border-radius: .5em;
    border: .1em solid #333;
    font-family: Arial;
}
nav ul {
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav li {
    position: relative;
    padding: .5em;
    font-variant: small-caps;
    font-weight: bold;
}

nav > ul > li {
    display: inline-block;
}

nav li:hover {
    cursor: pointer;
}

.sub-nav {
    display: none;
    color: white;
    background-color: rgb(100, 200, 0);
    position: absolute;
    left: -.1em;
    top: 2.25em;
    border-radius: 0 0 .5em .5em;
    border: solid .1em #333;
    width: 10em;
    padding-bottom: .5em;
}

.sub-nav ul
{
    text-align: left;
}

JavaScript

/***
most of this exists just to make pretty hover animations. Showing and
hiding the menus is pretty easy. Most of the magic is just in the css.
***/


function main() 
{
    $(".root-nav").hover(
        // over
        function ()
        {
            $(this).animate({
                color: "white",
                backgroundColor: "rgb(100, 200, 0)"
            }, {queue: false, duration: 150});
            $(this).find(".sub-nav").slideDown({duration: 150, queue: false});
        },
        // out
        function ()
        {
            $(this).animate({
                backgroundColor: "rgb(75, 150, 0)",
                color: "#333"
            }, {queue: false, duration: 150});
            $(this).find(".sub-nav").slideUp({duration: 150, queue: false});
        }
    );
    
    $(".sub-nav li").hover(
    	function ()
        {
            $(this).animate({
                color: "rgb(100, 200, 0)",
                backgroundColor: "white"
            }, {queue: false, duration: 150});
        },
        function ()
        {
            $(this).animate({
                color: "white",
                backgroundColor: "rgb(100, 200, 0)"
            }, {queue: false, duration: 150});
        }
    );
}

$(document).ready(main);