left nav

by niki4810

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="row-fluid">
    <div class="clearfix mnSidebar">
        <div class="clearfix mnSidebarHeader">
            <div class="mnSidebarHeaderContent"> <i class="icon-caret-left"></i>
 <i class="icon-align-justify"></i>
 <i class="icon-caret-right"></i> 
            </div>
        </div>
        <div class="clearfix mnSidebarContent">
            <ul class="nav nav-tabs nav-stacked">
                <li><a href="#">Home</a>

                </li>
                <li><a href="#">About</a>

                </li>
                <li class="active"><a href="#">Contact</a>

                </li>
                <li><a href="#">Sales</a>

                </li>
            </ul>
        </div>
    </div>
</div>

CSS

html{
    height:100%;
}
body {
 /*    padding : 50px; */
    padding:0;
    height:100%;
}
.row-fluid{
    height:100%;
}
/*sidebar*/
 .mnSidebar {
/*     border:1px solid #d8d8d8; */
    box-shadow: 3px 0 6px 0 #d8d8d8; 
    overflow:hidden;
    width : 200px;
    height:100%;
}
/*sidebar min*/
 .mnSidebarMin {
    width : 33px;
}
/*sidebar header*/
 .mnSidebarHeader {
    width:100%;
    height: 30px;
}
/*side bar header content*/
 .mnSidebarHeaderContent {
    float : right;
    margin-top : 5px;
    cursor : pointer;
    padding-right : 5px;
}
.mnSidebarHeaderContent i.icon-caret-left, .mnSidebarHeaderContent i.icon-caret-right {
    color: #ccc;
}
/*side bar header content*/

/*side bar content*/
 .mnSidebarContent {
    border-radius : 0;
}
.mnSidebarContent ul.nav {
    margin: 0;
}
.mnSidebarContent .nav-tabs.nav-stacked>li>a {
    border-radius : 0;
    border-left : 0;
    border-right:0;
}
.mnSidebarMin .mnSidebarContent .nav-tabs.nav-stacked>li>a {
   color: #fff; 
}
.mnSidebarMin .mnSidebarContent .nav-tabs.nav-stacked>li>a:hover {
    /* color: #0088cc; */
    color: #fff;
    background-color:#fff;
}
.mnSidebarContent .nav-tabs > .active > a, .mnSidebarContent .nav-tabs > .active > a:hover {
    color: #ffffff;
    background-color:#1b4860;
}
.mnSidebarMin .mnSidebarContent .nav-tabs > li.active > a, .mnSidebarMin .mnSidebarContent .nav-tabs > li.active > a:hover {
    color: #ffffff;
    background-color:#1b4860;
    width: 33px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left : 3px;
}

JavaScript

$(function () {
    $(".icon-caret-right").hide();
    var toggleComp = function (comp) {
        if (comp.is(":visible")) {
            comp.hide();
        } else {
            comp.show();
        }
    };

    $(".mnSidebarHeaderContent").click(function (e) {
        var leftArrow = $(e.currentTarget).find(".icon-caret-left");
        var rightArrow = $(e.currentTarget).find(".icon-caret-right");
        toggleComp(leftArrow);
        toggleComp(rightArrow);
        $(".mnSidebar").toggleClass("mnSidebarMin");
    });

});