CRM Main Menu v3

by kapantzak

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="main-menu-wrapper" class="main-menu-expanded">
    
    <div class="row-item">
    
        <div id="logo-wrapper" class="header-item">
            <span>epsilon CRM</span>
        </div>
        
        <div id="header-toggle-buttons" class="header-item">
            <span>
                <i id="toggle-side-menu" class="fa fa-dedent" title="Συμπύκνωση πλαϊνού μενού"></i>
            </span>
            <span>
                <i id="toggle-main-menu" class="fa fa-eye-slash" title="Συμπύκνωση επιλογών μενού"></i>
            </span>        
        </div>
        
        <div id="menu-placeholder-icon" class="header-item plc-inactive" title="Κεντρικό μενού">
            <i id="bars-menu-trigger" class="fa fa-bars"></i>
        </div>
        
        <div id="menu-wrapper-top" class="header-item">        
            <a class="menu-button" href="#">
                <i class="fa fa-home"></i>
                <span class="f-btn-text">Κεντρική</span>
            </a>
            <a class="menu-button" href="#">
                <i class="fa fa-gear"></i>
                <span class="f-btn-text">Διαχείριση</span>
            </a>
        </div>
        
        <div class="header-item">&nbsp;</div>
        
        <div id="user-panel-wrapper" class="header-item user-panel-collapsed">
            <span id="user-icon-wrapper" class="user-panel-item"><i class="fa fa-user"></i></span>
            <span class="user-panel-item">admin</span>
            <span class="user-panel-item"><i id="user-panel-arrow" class="fa fa-caret-down"></i></span>        
            <div id="user-panel-menu">
                <i id="user-menu-arrow" class="fa fa-caret-up"></i>
                <ul...

CSS

/* Helper rules (delete if not necessary) */
.hidden {display:none}
a:visited,
a:focus,
a:hover 
{
    text-decoration: none;
}

body {
    font-family: 'Open Sans', sans-serif;
}

#main-menu-wrapper {
    display: table;
    width: 100%;       
    background-color: #f1f1f1;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
    position: relative;
}

div.header-item {
    display: table-cell;
    vertical-align: middle;
}

div.row-item {
    display: table;
}

#logo-wrapper {
    width: 230px;
    text-align: center;
}

#logo-wrapper > span {
    font-size: 28px;
    font-weight: 200;
    color: #3498db;
}

#header-toggle-buttons {    
    text-align: center;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    color: #3498db;
}

#main-menu-wrapper.main-menu-expanded #header-toggle-buttons {
    width: 120px;
}

#main-menu-wrapper.main-menu-expanded #header-toggle-buttons.toggleNarrow {
    /*width: 35px;*/
}

#main-menu-wrapper.main-menu-collapsed #header-toggle-buttons {
    width: 80px;
    background-color: #e8e8e8;
}

#header-toggle-buttons > span { 
    color: #3498db;
    cursor: pointer;
    text-align: center;
}

#main-menu-wrapper.main-menu-expanded #header-toggle-buttons > span {
    display: inline-block;
    padding: 5px 15px;
}

#main-menu-wrapper.main-menu-collapsed #header-toggle-buttons > span {
    display: inline;
    padding: 10px;
}

#main-menu-wrapper.main-menu-collapsed #header-toggle-buttons > span:first-child {
    display: inline;
}

#header-toggle-buttons > span:first-child {
    margin-bottom: 5px;
}

#main-menu-wrapper.narrow-view #header-toggle-buttons {
    display: none;
}

#main-menu-wrapper.wide-view #menu-placeholder-icon {
    display: none;
}

#menu-placeholder-icon {
    width: 50px;
    padding: 5px;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    font-size: 20px;
    color: #777;
    text-align: center;
    cursor: pointer;
    position:...

JavaScript

$(document).on('click', '#toggle-main-menu', function() {
    //toggleMenu($(this));
    var that = $(this);
    var mainMenuWrapper = $('#main-menu-wrapper');
        
    that.toggleClass('fa-eye-slash fa-eye');
    mainMenuWrapper.toggleClass('main-menu-expanded main-menu-collapsed');                       
    
    if (mainMenuWrapper.hasClass('main-menu-collapsed')) {
        that.attr('title', 'Επέκταση επιλογών μενού');
    } else {
        that.attr('title', 'Συμπύκνωση επιλογών μενού');
    }
    if ($('#user-panel-wrapper').hasClass('user-panel-expanded')) {
        toggleUserMenu();        
    }
    wrapDetector('a.menu-button');
    setUserPanelPos();
});

var toggleMenu = function(trigger, forceState) {
    var that = trigger;
    var mainMenuWrapper = $('#main-menu-wrapper');
    
    if (forceState) {
        if (forceState == 'exp') {
            that.removeClass('fa-eye').addClass('fa-eye-slash');
            mainMenuWrapper.removeClass('main-menu-collapsed').addClass('main-menu-expanded'); 
        } else if (forceState == 'col') {
            that.removeClass('fa-eye-slash').addClass('fa-eye');
            mainMenuWrapper.addClass('main-menu-collapsed').removeClass('main-menu-expanded');
        }
    } else {    
        that.toggleClass('fa-eye-slash fa-eye');
        mainMenuWrapper.toggleClass('main-menu-expanded main-menu-collapsed');                       
    }
    if (mainMenuWrapper.hasClass('main-menu-collapsed')) {
        that.attr('title', 'Επέκταση επιλογών μενού');
    } else {
        that.attr('title', 'Συμπύκνωση επιλογών μενού');
    } 
    wrapDetector('a.menu-button');
}

$(document).on('click', '#user-panel-wrapper', function() {
    toggleUserMenu();
});

var toggleUserMenu = function() {
    var that = $('#user-panel-wrapper');
    var panelMenu = $('#user-panel-menu');
    that.toggleClass('user-panel-collapsed user-panel-expanded');
    that.find('#user-panel-arrow').toggleClass('fa-caret-down fa-caret-up');
    if...