CRM Main Menu v2

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 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-alt-plc" class="header-item">&nbsp;</div>
    
    <div id="menu-wrapper" class="header-item">        
        <a class="menu-button menu-button-important" href="#">
            <i class="fa fa-home"></i>
            <span class="f-btn-text">Κεντρική</span>
        </a>        
        <a class="menu-button menu-button-important" href="#">
            <i class="fa fa-gear"></i>
            <span class="f-btn-text">Διαχείριση</span>
        </a>
        <a class="menu-button" href="#">
            <i class="fa fa-calendar"></i>
            <span class="f-btn-text">Ημερολόγιο</span>
        </a>
        <a class="menu-button" href="#">
            <i class="fa fa-user"></i>
            <span class="f-btn-text">Πελάτες</span>
        </a>
        <a class="menu-button" href="#">
            <i class="fa fa-phone"></i>
            <span class="f-btn-text">Επικοινωνίες</span>
        </a>
        <a class="menu-button" href="#">
            <i class="fa fa-tasks"></i>
            <span...

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;
}

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

#logo-wrapper > span {
    font-size: 32px;
    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: 10px 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: 10px;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    font-size: 24px;
    color: #777;
    text-align: center;
    cursor: pointer;
    position: relative;
}

#menu-placeholder-icon.plc-active {
    background-color:...

JavaScript

// Main Menu
$(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', 'Επέκταση επιλογών μενού');
        setIndicatorWidth();        
    } 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();
});

// User Menu
var toggleUserMenu = function() {
    var that = $('#user-panel-wrapper');
    var panelMenu = $('#user-panel-menu');
    that.toggleClass('user-panel-collapsed user-panel-expanded');
   ...