CRM menu template

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">
<span id="message">Συμπυκνώστε και επανεπεκτείνετε το μενού με το πλήκτρο <i class="fa fa-eye-slash"></i></span>    


<div class="col-xs-12" style="margin-top:20px">
        <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="#">
                        <span class="fa-stack fa-custom-fix-horizontal">
                            <i class="fa fa-floppy-o fa-stack-1x fa-custom-stack-left"></i>
                            <i class="fa fa-close fa-stack-1x fa-custom-stack-right"></i>
                        </span>
                        <span class="f-btn-text">Αποθήκευση και κλείσιμο</span>
                    </a>
                    <a class="filter-button" href="#">
                        <i class="fa fa-floppy-o"></i>
                        <span class="f-btn-text">Αποθήκευση</span>
                    </a>
                    <a class="filter-button" href="#">
                        <i class="fa fa-close"></i>
                        <span class="f-btn-text">Άκυρο</span>
                    </a>
                    <a class="filter-button button-right" href="#">
                        <i class="fa fa-close text-danger"></i>
                        <span class="f-btn-text">Ακύρωση προσφοράς</span>
                    </a>
                </div>
                <div class="filter-button-row">
                   ...

CSS

/* Helper rules (delete if not necessary) */
.hidden {display:none}
a:visited,
a:focus,
a:hover 
{
    text-decoration: none;
}
#message {
    display: inline-block;
    padding: 10px;    
}
#message > i {
    color: #3498db;     
}

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

div.filter-menu-wrapper.filter-menu-collapsed {
    border-bottom: 1px solid #d8d8d8;
}

div.filter-collapse-wrapper {
    width: 40px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

div.filter-menu-expanded .filter-collapse-wrapper {
    border-bottom: 1px solid #d8d8d8;
}

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

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

div.filter-button-row {
    float: left;
    border-bottom: 1px solid #d8d8d8;
}

div.filter-button-row:last-child {
    margin-bottom: -1px;
}

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 {
    margin-top: -1px;
    margin-bottom: -1px;    
}

div.filter-button-row > .filter-button {
    margin-left: -1px;
}

.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: 1px solid #d8d8d8;
    transition: all 150ms ease-out;
}

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

div.filter-menu-collapsed .filter-button {
    padding: 10px 20px;
}

div.filter-menu-collapsed span.f-btn-text...

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('collapsed');

$(document).on('click', '#toggle-toolbox-menu', function() {
    var that = $(this);
    var wrapper = that.closest('.filter-menu-wrapper');    
    var filterDisplay = $('#filter-display-hover');
    
    that.toggleClass('fa-eye-slash fa-eye');
    wrapper.toggleClass('filter-menu-expanded filter-menu-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'});
            } else {
                targetSpan.removeAttr('style');
            }
           ...