CRM Main Menu

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">
<header class="col-xs-12">
    <!-- Logo -->
    <div id="main-logo-wrapper">LOGO</div>
    
    <!-- Main Menu Wrapper -->    
    <div class="filter-menu-wrapper filter-menu-expanded">
        <div class="filter-collapse-wrapper">
            <span>
                <i id="toggle-toolbox-menu" class="fa fa-eye-slash" title="Συμπύκνωση επιλογών μενού"></i>
            </span>
        </div>
        <div class="filter-container">
            <div class="filter-button-row">
                <a class="filter-button" href="#">
                    <i class="fa fa-home"></i>
                    <span class="f-btn-text">Κεντρική</span>
                </a>
                <a class="filter-button" href="#">
                    <i class="fa fa-calendar"></i>
                    <span class="f-btn-text">Ημερολόγιο</span>
                </a>
                <a class="filter-button" href="#">
                    <i class="fa fa-user"></i>
                    <span class="f-btn-text">Πελάτες</span>
                </a>
                <a class="filter-button" href="#">
                    <i class="fa fa-phone"></i>
                    <span class="f-btn-text">Επικοινωνίες</span>
                </a>
                <a class="filter-button" href="#">
                    <i class="fa fa-tasks"></i>
                    <span class="f-btn-text">Εργασίες</span>
                </a>
                <a class="filter-button" href="#">
                    <i class="fa fa-line-chart"></i>
                    <span class="f-btn-text">Marketing</span>
                </a>
                <a class="filter-button" href="#">
                    <i class="fa fa-shopping-cart"></i>
                    <span...

CSS

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

header {
    background-color: #f1f1f1;
}

#main-logo-wrapper {
    width: 230px;
    float: left;
}

div.filter-menu-wrapper {
    width: 60%;
    float: left;
    display: table-cell;
    background-color: #f1f1f1;    
    border-left: 1px solid #d8d8d8;     
}

div.filter-collapse-wrapper {
    width: 40px;
    display: table-cell;
    border-right: 1px solid #d8d8d8;
    vertical-align: middle;
    text-align: center;
}

div.filter-collapse-wrapper i {
    cursor: pointer;
    color: #3498db;
}

div.filter-container {
    display: table-cell;
}

div.filter-button-row {
    float: left;
}

div.filter-row-display {
    width: 100%;
}

div.filter-menu-expanded div.filter-button-row {
    width: 100%;
}

div.filter-menu-collapsed div.filter-button-row {
    width: auto;       
}

div.filter-menu-collapsed div.filter-button-row:not(:last-child) {    
    margin-right: 15px;    
}

div.filter-button-row > .filter-button {
     
}

div.filter-button-row > .filter-button {
   
}

.filter-button {   
    height: 43px;
    float: left;
    display: inline-block;
    padding: 10px;
    font-size: 14px;
    background-color: #f1f1f1;
    color: #3498db;
    white-space: nowrap;
    overflow: hidden;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    margin-top: -1px;
    transition: all 150ms ease-out;
}

.filter-button:not(.button-disabled):hover {    
    background-color: #3498db;
    color: #fff;
}

div.filter-menu-collapsed .filter-button {
    width: 55px;
    text-align: center;
}

div.filter-menu-collapsed span.f-btn-text {
    display: none;
}

.filter-button.button-right {
    margin-right: -1px;
}

.filter-button.button-disabled:hover {
    cursor: default;
}

.button-right {
    float: right;
}

.fa-custom-fix-vertical,
.fa-custom-fix-horizontal 
{
    height: 14px;   ...

JavaScript

var button = $('a.filter-button');

$(document).on('click', 'a.filter-button.button-disabled', function(e) {
    e.preventDefault();
});

var checkMenuState = function(userVar) {    
    var toggleMenu = $('#toggle-toolbox-menu');
    var wrapper = $('div.filter-menu-wrapper');
    var filterDisplay = $('#filter-display-hover');
    
    if ((userVar) && (userVar == 'collapsed')) {
        toggleMenu.removeClass('fa-eye-slash').addClass('fa-eye').attr('title', 'Επέκταση επιλογών μενού');
        wrapper.removeClass('filter-menu-expanded').addClass('filter-menu-collapsed');
        filterDisplay.removeClass('hidden');
    }
}
// Get userVar variable from cookie stored by user and execute checkMenuState(userVar)
checkMenuState();

$(document).on('click', '#toggle-toolbox-menu', function() {
    var that = $(this);
    var wrapper = that.closest('.filter-menu-wrapper');
    var rightSection = $('div.header-right-section');    
    var filterDisplay = $('#filter-display-hover');
    
    that.toggleClass('fa-eye-slash fa-eye');
    wrapper.toggleClass('filter-menu-expanded filter-menu-collapsed');
    rightSection.toggleClass('header-right-expanded header-right-collapsed');
    
    if (wrapper.hasClass('filter-menu-collapsed')) {
        filterDisplay.removeClass('hidden');
        that.attr('title', 'Επέκταση επιλογών μενού');
    } else {
        filterDisplay.addClass('hidden');
        that.attr('title', 'Συμπύκνωση επιλογών μενού');
    }
});

$(document)
.on('mouseenter', 'a.filter-button', function() {
    var that = $(this);
    var wrapper = that.closest('.filter-menu-wrapper');
    
    if (wrapper.hasClass('filter-menu-collapsed')) {
        var thisText = that.text();
        var targetSpan = $('#filter-display-hover > span');
        if (that.hasClass('button-disabled')) {
            targetSpan.addClass('button-disabled');
        } else {
            if (that.find('i.fa').hasClass('text-danger')) {
                targetSpan.css({'color':'#a94442'});
...