SIL Navigation

by lukerichison

HTML

<link rel="stylesheet" href="http://development.advncs.com/dev/suninspiredliving/css/elusive-webfont.css">
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<nav>
    <img id="logo" src="http://development.advncs.com/dev/suninspiredliving/img/logo.png" title="Sun Inspired Living" />
    <ul id="nav-social">
         <li><a class="icon-envelope" href="#"></a>
             <ul><li>
                <fieldset id="newsletter">
                    <p>Sign up for our email newsletter</p>
                    <label for="name">Name</label><input type="text" name="name" id="name" placeholder="Name"/><br/>
                    <label for="email">Email</label><input type="text" name="email" id="email" value="" placeholder="Email"/><br/>
                    <label for="address">Address</label><input type="text" name="address" id="address" value="" placeholder="Street Address"/><br/>
                </fieldset>
            </li></ul>
        </li
        ><li><a class="icon-facebook" href="#"></a></li
        ><li><a class="icon-twitter" href="#"></a></li
        ><li><a class="icon-shopping-cart" href="#"><span id="shopping-cart-count">0</span></a></li>
    </ul>
    <ul id="nav-main">
         <li><a href="#">Top One</a></li
        ><li><a href="#">Top Two</a>
            <ul>
                 <li><a href="#">Sub One</a></li
                ><li><a href="#">Sub Two</a></li
                ><li><a href="#">Sub Three long text</a></li
                ><li><a href="#">Sub Four</a></li>
            </ul>
        </li
        ><li><a href="#">Top Three</a>
            <ul>
                 <li><a href="#">Sub One</a></li
                ><li><a href="#">Sub Two</a>
                    <ul>
                         <li><a href="#">Sub b One</a></li
                        ><li><a href="#">Sub b Two</a></li
                        ><li><a href="#">Sub b Three really really really really long text</a></li
                        ><li><a href="#">Sub b...

CSS

@font-face {
  font-family: 'Elusive-Icons';
  src:url('http://development.advncs.com/dev/suninspiredliving/fonts/Elusive-Icons.eot');
  src:url('http://development.advncs.com/dev/suninspiredliving/fonts/Elusive-Icons.eot?#iefix') format('embedded-opentype'),
    url('http://development.advncs.com/dev/suninspiredliving/fonts/Elusive-Icons.woff') format('woff'),
    url('http://development.advncs.com/dev/suninspiredliving/fonts/Elusive-Icons.ttf') format('truetype'),
    url('http://development.advncs.com/dev/suninspiredliving/fonts/Elusive-Icons.svg#Elusive-Icons') format('svg');
  font-weight: normal;
  font-style: normal;
}
html {
    background: #F6EED7 url(http://development.advncs.com/dev/suninspiredliving/img/bg.jpg) no-repeat center top fixed;
}
body {
    font-size: 10px;
    width: 96em;
    margin: auto;
    margin-top: 110px;
    margin-bottom: 25px; 
    font-family:
        "Helvetica",
        "Arial",
        "FreeSans",
        "Verdana",
        "Tahoma",
        "Lucida Sans",
        "Lucida Sans Unicode",
        "Luxi Sans",
        sans-serif;
}
nav {
    position: relative;
    font-size: 1.6em;
    line-height: 1.5em;
    background-color: #665049;
    background-image: linear-gradient(#665049 0%,#4C352C 100%);
}
#logo {
    position: absolute;
    left: 4px;
    bottom: -6px;
}
#nav-main {
    margin-left: 180px;
}
#nav-social li > a {
    padding: 0.5em;
}
#nav-social {
    float: right;
    margin-right: 1em;
}
nav li {
    display: inline;
    display: inline-block;
}
nav li a {
    display: block;
    padding: 0.5em 1em;
}
nav li ul {
    z-index: -2;
    position: absolute;
    box-shadow: 0 1px 8px rgba(0,0,0,0.6);
    background-color: #4C352C;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s 0.4s;
}
nav li ul:hover {
    overflow: visible;
}
nav li:hover ul{
    max-height: 20em;
    transition-delay: 0s;
    z-index: -1;
}

nav li li {
    position: relative;
    display: block;
}
nav > ul > li > ul >...

JavaScript

// navigation functions
$(function(){
    // hover drop-down fixes (mostly handled with css)
    var Ti, To, ul;
    $('#nav-main').children('li').has('ul').hover(
        function(){
            ul = $(this).children('ul');
            if (ul.hasClass('close')) {
                if (To) { clearTimeout(To); }
                ul.css('overflow', 'visible').removeClass('open');
            }
            $('#nav-main').find('ul.close').css('overflow', 'hidden').removeClass('close');
            ul.css({
                'transition-duration' : '0.4s',
                'max-height' : ul[0].scrollHeight
            });
            Ti = setTimeout(function(){
                ul.css('overflow', 'visible');
                Ti = '';
            }, 400);
        },function(){
            ul.css('max-height',0).addClass('close');
            if (Ti) { clearTimeout(Ti); }
            To = setTimeout(function(){
                ul.css('overflow', 'hidden').removeClass('close');
                To = '';
            }, 400);
        }
    );
    // Newsletter function
    if (!Modernizr.input.placeholder) {
        $('#newsletter').find('label').css('display', 'inline-block');
    }
    $('#newsletter').find('input').focusin(function(){
        $(this).closest('ul').parent('li').addClass('hover');
    }).focusout(function(){
        $(this).closest('ul').parent('li').removeClass('hover');
    }).keydown(function(e){
        if(e.keyCode == 40){
            $(this).keyup(function(e){
                if(e.keyCode == 13) {
                    return;
                }
            });
        }
        else if(e.keyCode == 13) {
            var empty = false;
            $('#newsletter').find('input').each(function(){
                if (!$(this).val()) {
                    alert('Please enter your '+$(this).attr('name'));
                    $(this).focus();
                    empty = true;
                    return false;
                }
            });
            if (!empty)...