New Look

by Jason Rose

HTML

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="header">
    <a id="TogleMenu"><div id="headeritemleft"><i class="fa fa-bars fa-fw"></i></div></a>
    <div id="headeritemleft"><a id="TogleMenu"><i class="fa fa-home fa-fw"></i></a></div>
    <div id="headeritemright"><i class="fa fa-cog fa-fw"></i><i class="fa fa-sort-down fa-fw"></i></div>
    <div id="headeritemright"><i class="fa fa-user fa-fw"></i><i class="fa fa-sort-down fa-fw"></i></div>
</div>



<div id="NavMenu">
    <ul class="menu">
        <li><a href="https://google.co.uk"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>Home</span></a></li>
        <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>Anything you want</span></a></li>
        <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>AOEC.com</span></a></li>
        <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>Boba Fett</span></a></li>
        <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>Claranet 365</span></a></li>
        <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>Claranet Internal</span></a></li>
        <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>Couzens Storage Solutions</span></a></li>
        <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>Monk Design</span></a></li>
        <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>Scandinavian House Limited</span></a></li>
        <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>SOHO Test Migration Account</span></a></li>
        <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>UK UAD28605 Herons Wood Press</span></a></li>
        <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>UK UAD37129 Innotech Advisers Limited</span></a></li>
    ...

CSS

html {
    font-family:'Roboto', sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body, html {
    font-size: 100%;
    padding: 0;
    margin: 0;
    height: 100%;
    overflow-x: hidden;
    color: #333333;
}
#header {
    height: 41px;
    line-height: 41px;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid;
    position: fixed;
    z-index: 9998;
}
#headeritemleft, #headeritemright {
    padding-left: 15px;
    padding-right: 15px;
    cursor: pointer;
}
#headeritemleft {
    float: left;
    border-right: 1px solid;
}
#headeritemright {
    float: right;
    border-left: 1px solid;
}

#headeritemleft:hover, #headeritemright:hover {
    text-decoration: none;
    background: #666666;
    color: #ffffff;
}

.subheader {
    position: fixed;
    top: 41px;
    left: 0;
    width: 100%;
    background: #cc5350;
    color:#fff;
    z-index: 1000;
    height: 100px;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    text-align:center;
    line-height:80px;

}

#TogleMenu {
    color: #333333;
    font-size: 20px;
}
#NavMenu {
    top: 42px;
    width: 300px;
    height: 100%;
    display: none;
    background: #ffffff;
    position:fixed;
    z-index: 9999;
    overflow-y: scroll;
    -ms-overflow-style: none;
}
#navspacer {
    height: 100px;
}
.menu li:empty {
    padding-top: 20px;
}
.menu li {
border-bottom: 1px solid;
}
.menu a {
    font-size: 16px;
    font-weight: 300;
    color: #999999;
    display: block;
    width: auto;
    padding-left: 18px;
    text-decoration: none;
    line-height: 2.5em;
    height: 2.5em;
}
.menu a:hover {
    text-decoration: none;
    background: #666666;
    color: #ffffff;
}
.menu {
    text-decoration: none;
    color: #CCCCCC;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#NavMenu::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color:...

JavaScript

$(document).ready(function () {
    
    // Add Font Awesome
    WebFontConfig = {
        google: {
            families: ['Roboto:400,100,300,500,700,900:latin']
        }
    };
    (function () {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })();
    
    // Menu Open / Close
    $('#TogleMenu').click(function(){
        if ($('#NavMenu').is(':hidden')) {
            $('#NavMenu').show('slide',{direction:'left'},250);
        } else {
            $('#NavMenu').hide('slide',{direction:'left'},250);
        }
    });
    $("#content").click(function () {
        $('#NavMenu').hide('slide',{direction:'left'},250);
    });
    
    // Limit characters in Nav
    $('.menu span').each(function (i) {
        n = 24;
        l = $(this).text().length;
        if (l > n) $(this).text($(this).text().substr(0, n) + '...');
    });
    
    // sub header shrink





})