another new look

by Jason Rose

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <div id="header">
        <a id="TogleMenu"><div id="headeritemleft"><i class="fa fa-bars fa-fw"></i></div></a>
        <a href="http://jsfiddle.net/m/fpv/" id="TogleMenu"><div id="headeritemleft"><i class="fa fa-home fa-fw"></i></div></a>
        <a id="TogleSettingsMenu"><div id="headeritemright"><i class="fa fa-cog fa-fw"></i><span class="caret"></span></div></a>
        <a id="TogleUserMenu"><div id="headeritemright"><i class="fa fa-user fa-fw"></i><span class="caret"></span></div></a>
    </div>
        </div>
    <div id="NavMenu">
        <ul class="menu">
            <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>What happens if i have a really long name?</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>Monk Design</span></a></li>
            <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>SOHO Testing</span></a></li>
            <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>SOHO UK</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>Monk Design</span></a></li>
            <li><a href="index.php"><i class="fa fa-bars fa-fw"></i>&nbsp;<span>SOHO Testing</span></a></li>
            <li><a...

CSS

html {
    font-family:'Roboto', sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body, html {
    height:100%;
    min-height:100%
    font-size: 100%;
    padding: 0;
    margin: 0;
    color: #2f4256;
}
body::-webkit-scrollbar-track, #NavMenu::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #ffffff;
}
body::-webkit-scrollbar, #NavMenu::-webkit-scrollbar {
	width: 6px;
	background-color: #ffffff;
}
body::-webkit-scrollbar-thumb, #NavMenu::-webkit-scrollbar-thumb {
	background-color: #2f4256;
}
a {
    text-decoration: none;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.content {
    height:auto;
    min-height:100%;
    /*background:#2f4256;*/
    margin-left:0;
    margin-right: 0; 
    margin-top: 0;
    overflow: auto;
}
.main {
    height:auto;
    min-height:100%;
    /*background:#ffffff;*/
    margin-left:5%;
    margin-right: 5%;
    margin-top: 200px;
    padding-bottom: 50px;
}
.content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}
#header {
    top:0;
    height: 41px;
    line-height: 41px;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid;
    position: fixed;
    z-index: 9999;
}
#headeritemleft, #headeritemright {
    padding-left: 15px;
    padding-right: 15px;
    cursor: pointer;
    color: #596878;
}
#headeritemleft {
    float: left;
    border-right: 1px solid;
}
#headeritemright {
    float: right;
    border-left: 1px solid;
}
#headeritemleft:hover, #headeritemright:hover {
    text-decoration: none;
    background: #596878;
    color: #ffffff;
}
#footer ul {
    bottom:0;
    height: 41px;
    line-height: 41px;
    width: 100%;
    background: #2f4256;
    border-top: 1px solid;
    position: fixed;
    z-index: 9999;
    padding: 0 1em;
    list-style: none;
    text-align: center;
    font-size: 16px;
	letter-spacing: 1px;
    font-weight: 500;
}
#footer li {
    display: inline;
    margin: 0;
...

JavaScript

$(document).ready(function () {
$(document).on('click', function (e) {
    if ($(e.target).closest("#TogleUserMenu").length === 0) {
        $('#UserMenu').slideUp(100);
    }
    if ($(e.target).closest("#TogleSettingsMenu").length === 0) {
        $('#SettingsMenu').slideUp(100);
    }
    if ($(e.target).closest("#TogleMenu").length === 0) {
        $('#NavMenu').hide('slide',{direction:'left'},250);
    }
});
    
    // Add Font Awesome
    WebFontConfig = {
        google: {
            families: ['Roboto:400,100,200,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);
    })();
    
    // Nav Menu Open / Close
    $('#TogleMenu').click(function(){
        if ($('#NavMenu').is(':hidden')) {
            $('#NavMenu').show('slide',{direction:'left'},250);
        } else {
            $('#NavMenu').hide('slide',{direction:'left'},250);
        }
    });
    
    // User Menu Open / Close
    $('#TogleUserMenu').click(function(){
        if ($('#UserMenu').is(':hidden')) {
            $('#UserMenu').slideDown(250);
        } else {
            $('#UserMenu').slideUp(250);
        }
    });
    
    // Settings Menu Open / Close
    $('#TogleSettingsMenu').click(function(){
        if ($('#SettingsMenu').is(':hidden')) {
            $('#SettingsMenu').slideDown(250);
        } else {
            $('#SettingsMenu').slideUp(250);
        }
    });
    
    // Limit characters in Nav
    $('.menu span').each(function (i) {
        n = 30;
        l = $(this).text().length;
        if (l > n) $(this).text($(this).text().substr(0, n) + '...');
    });
    
    // Limit characters in bookmark
   ...