Sidebar Menu

by David Nabb

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
    <div id="sidebar-menu">
        <div id="logo">
            <a href="http://www.n4design.com.au/" style="height: 80px; visibility: visible;"><img class="logo-normal" src="http://www.n4design.com.au/wp-content/uploads/2017/03/Logo-White-With-Text.svg" alt="Logo"><img class="logo-highlight" src="http://www.n4design.com.au/wp-content/uploads/2017/03/Logo-With-Text-Highlight.svg" alt="Logo"></a>
        </div>
        <div id="sidebar-ribbon">
            <div id="main-menu-toggle"><span class="line-1"></span><span class="line-2"></span><span class="line-3"></span></div>
            <ul id="main-menu">
                <li class="menu-item">
                    <a href="http://www.n4design.com.au/#home" title="N4Design Home"><img class="menu-item-normal" src="http://www.n4design.com.au/wp-content/uploads/2017/03/Home.svg" alt="Home"><img class="menu-item-highlight" src="http://www.n4design.com.au/wp-content/uploads/2017/03/Home-Highlight.svg" alt="Home">
                        <span class="menu-item-text">Home</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="http://www.n4design.com.au/#services" title="N4Design Services"><img class="menu-item-normal" src="http://www.n4design.com.au/wp-content/uploads/2017/03/Services.svg" alt="Services"><img class="menu-item-highlight" src="http://www.n4design.com.au/wp-content/uploads/2017/03/Services-Highlight.svg"
                        alt="Services">
                        <span class="menu-item-text">Services</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="http://www.n4design.com.au/#portfolio" title="N4Design Portfolio"><img class="menu-item-normal" src="http://www.n4design.com.au/wp-content/uploads/2017/03/Portfolio.svg" alt="Portfolio"><img...

CSS

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#sidebar-menu {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background-color: #666;
    z-index: 1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#sidebar-menu.open {
    box-shadow: 2px 0 10px rgba(0, 0, 0, 1);
}

#sidebar-ribbon {
    position: fixed;
    height: 100%;
    width: 40px;
}

#main-menu-toggle {
    display: block;
    position: absolute;
    width: 100%;
    height: 36px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#main-menu-toggle span[class^="line-"] {
    position: absolute;
    display: block;
    width: 75%;
    left: 12.5%;
    height: 4px;
    border-radius: 2px;
    background-color: white;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#main-menu-toggle .line-1 {
    margin-top: 6px;
}

#main-menu-toggle .line-2 {
    margin-top: 16px;
}

#main-menu-toggle .line-3 {
    margin-top: 26px;
}

.open #main-menu-toggle {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.open #main-menu-toggle:hover {
    -webkit-transform: rotate(180deg) translatex(5px);
    -moz-transform: rotate(180deg) translatex(5px);
    -ms-transform: rotate(180deg) translatex(5px);
    -o-transform: rotate(180deg) translatex(5px);
    transform: rotate(180deg) translatex(5px);
}

#main-menu-toggle:hover .line-1,
#main-menu-toggle:hover .line-2,
#main-menu-toggle:hover .line-3 {
    background-color: #00c9ff;
}

#main-menu-toggle:hover...

JavaScript

jQuery(function() {
    jQuery('#main-menu-toggle').on('click', function() {
        var sidebarWidth = jQuery('#sidebar-ribbon').outerWidth();
        var extendWidth = Math.max.apply(null, $('.menu-item-text').map(function() {
            return $(this).outerWidth(true);
        }).get()) + 7;
        var maxWidth = sidebarWidth + extendWidth;
        if (jQuery('#sidebar-menu').hasClass('open')) {
            jQuery('#sidebar-menu').removeClass('open').css({
                'width': sidebarWidth
            });
            jQuery('#main-menu-toggle').css({
                'margin-left': '0'
            });
            jQuery('.page-wrapper').css({
                '-webkit-transform': 'translatex(0)',
                '-moz-transform': 'translatex(0)',
                '-ms-transform': 'translatex(0)',
                '-o-transform': 'translatex(0)',
                'transform': 'translatex(0)'
            });
        } else {
            jQuery('#sidebar-menu').addClass('open').css({
                'width': maxWidth
            });
            jQuery('#main-menu-toggle').css({
                'margin-left': extendWidth + 7
            });
            jQuery('.page-wrapper').css({
                '-webkit-transform': 'translatex(' + extendWidth + 'px)',
                '-moz-transform': 'translatex(' + extendWidth + 'px)',
                '-ms-transform': 'translatex(' + extendWidth + 'px)',
                '-o-transform': 'translatex(' + extendWidth + 'px)',
                'transform': 'translatex(' + extendWidth + 'px)'
            });
        }
    });
});