Sidebar with icons, show labels on mouse hover

Without JavaScript

by Salustiano Silva

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="sideBar">
    <ul class="nav navbar-nav side-nav">
        <li class="active"> <a href="index.html"><i class="fa fa-fw fa-dashboard"></i> <span>Dashboard</span></a>

        </li>
        <li> <a href="charts.html"><i class="fa fa-fw fa-bar-chart-o"></i> <span>Charts</span></a>

        </li>
        <li> <a href="tables.html"><i class="fa fa-fw fa-table"></i> <span>Tables</span></a>

        </li>
        <li> <a href="forms.html"><i class="fa fa-fw fa-edit"></i> <span>Forms</span></a>

        </li>
        <li> <a href="bootstrap-elements.html"><i class="fa fa-fw fa-desktop"></i> <span>Bootstrap Elements</span></a>

        </li>
        <li> <a href="bootstrap-grid.html"><i class="fa fa-fw fa-wrench"></i> <span>Bootstrap Grid</span></a>

        </li>
        <li> <a href="blank-page.html"><i class="fa fa-fw fa-file"></i> <span>Blank Page</span></a>

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

CSS

#sideBar{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    background-color:#222;
    padding:0 10px;
}
#sideBar > ul {
    float:left;
}
#sideBar > ul > li > a{
    color:#9d9d9d;
}
#sideBar > ul > li > a:hover{
    background:#080808;
    color:#FFF;
}
#sideBar > ul > li > a > span {
    display:none;
}
#sideBar:hover > ul > li > a > span {
    display:inline-block;
}