Side Slider

by technotarek

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="admin-tools-container hidden-phone">
    <div class="admin-tools-trigger pull-left"><i class="icon-cog"></i>

    </div>
    <div class="admin-tools-tools pull-left">
         <h3>Tools</h3>

        <div class="tabbable tabs-left">
            <ul class="nav nav-tabs" style="float:left">
                <li><a href="#hijack" class="subpanel-activate hijack" data-toggle="tab"><i class="icon-user"></i>Hijack User</a>

                </li>
                <li><a href="#hijack-agency" class="subpanel-activate hijack" data-toggle="tab"><i class="icon-building"></i>Hijack Agency</a>

                </li>
                <li><a href="#reports" class="subpanel-activate hijack" data-toggle="tab"><i class="icon-file"></i> Reports</a>

                </li>
            </ul>
            <div class="tab-content">
                <div id="hijack" class="tab-pane admin-tools-hijack">
                     <h5>Search for a user:</h5>
                    <p>Form goes here</p>
                </div>
                <!-- /.tab-pane -->
                <div id="hijack-agency" class="tab-pane admin-tools-hijack">
                     <h5>Search for an agency:</h5>
                    <p>Form goes here.</p>
                </div>
                <!-- /.tab-pane -->
                <div id="reports" class="tab-pane admin-tools-hijack">
                     <h5>Member Reports</h5>

                    <ul class="unstyled">
                        <li>Report #1</li>
                    </ul>
                     <h5>Accounting Reports</h5>

                    <li>Report #1</li>
                    </ul>
                </div>
                <!-- /.tab-pane -->
...

CSS

.admin-tools-container {
    position:fixed;
    top:15px;
    right:-455px;
    /* tools-trigger.width + tools-trigger.padding-right */
    width:500px;
    /* (tools-trigger.width + tools-trigger.padding-right) + (tools-tools.width + tools-tools.padding) + + (tools-hijack.width + tools-hijack.padding) */
    z-index:999;
}
.admin-tools-trigger {
    background:rgba(0, 0, 0, 0.8);
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    color:#ccc;
    cursor: pointer;
    font-size:36px;
    padding:5px 0px 5px 10px;
    width:35px;
}
.admin-tools-container h3 {
    color:#ccc;
    margin:-10px 0 0 10px;
}
.admin-tools-container .tabs-left>.nav-tabs {
    border-right:none;
    margin-right:0;
}
.admin-tools-container .nav-tabs li a:hover {
    background:rgba(0, 0, 0, 0.5);
    border:1px solid #000;
}
.admin-tools-container .nav-tabs li.active a {
    background:rgba(0, 0, 0, 0.5);
    border:none;
    color:#fff;
}
.admin-tools-container .tab-pane {
    background:rgba(0, 0, 0, 0.5);
    border-radius:10px;
    margin-left:1px;
    min-height:700px;
}
.admin-tools-tools {
    background:rgba(0, 0, 0, 0.8);
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
    padding:10px 5px 10px 10px;
    width:440px;
}
.admin-tools-tools h5 {
    color:#fff;
    margin-top:0;
    margin-bottom:10px;
}
.admin-tools-tools a {
    color:#EDC1AF;
}
.admin-tools-tools ul {
    margin-top:10px;
    width:130px;
}
.admin-tools-hijack {
    float:left;
    min-height:300px;
    padding:20px;
    width:265px;
}
.btn-hijack {
    margin-top:-20px;
}

JavaScript

// Admin Tools Show/Hide
$('.admin-tools-trigger').click(function () {
    if ($(this).parent().hasClass('opened')) {
        // remove opened class from all sub-menus (e.g., hijack)
        $(this).parent().find('.subpanel-activate').removeClass('opened');
        // deactivate current tab and remove #tab from URL
        $(this).parent().find('li').removeClass('active');
        location.hash = '';
        // close the panel
        $(this).parent().animate({
            right: '-455px'
        }).removeClass('opened');
    } else {
        $(this).parent().animate({
            right: '-315px'
        }).addClass('opened');
    }
});
// Hijack Show/Hide
$('.hijack').click(function () {

    // count number of sub-panels open
    var numOpen = $(this).parents('.nav-tabs').find('.opened').length;

    // if there are any subpanels already open
    if (numOpen > 0) {
        // don't do anything
    } else {
        //otherwise, open the selected subpanel
        $('.admin-tools-container').animate({
            right: '0px'
        });
        $(this).addClass('opened');
    }

});