Vertical Sidebar Menu using Bootstrap 3.3.2

Question

My problem is replicating something similar to this. I’m having big problems solving this:

http://ironsummitmedia.github.io/startbootstrap-sb-admin/

The difference is: no words. When I do Hover over the whole bar, the rest of the width appears saying what is each page (in the background what is each icon). have a poisition Fixed, that is, when I scroll the bar does not go up or down, but always in the same place.

And when mobile have a side effect and not from top to bottom.

Can anyone help? Thank you.

Answer 1

In order to have a side navigation where only the icons appear and with the mouse on top appear the icons and the caption, you need a little CSS for formatting and Javascript to control whether or not the mouse is above the menu in order to display the captions.

CSS

The formatting, of course, depends on the layout of your navigation, but the important part is that the element containing the caption is hidden by default:

#sideBar > ul > li > a > span {
    display:none;
}

^{Learn more about the property display.}

Javascript

The secret effectively lies in the code below, which with jQuery we simplify the process of determining whether or not the mouse is on top of the menu:

$(document).ready(function () {
    $('#sideBar')
        .mouseenter(function () {
            $("a > span", this).show(); // rato entrou no menu, apresentar legenda
        })
        .mouseleave(function () {
            $("a > span", this).hide(); // rato saiu do menu, esconder legenda
        });
});

^{Learn more about the methods mouseenter and mouseleave.}

Example

Also in the Jsfiddle.

$(document).ready(function () {
    $('#sideBar')
        .mouseenter(function () {
            $("a > span", this).show();
        })
        .mouseleave(function () {
            $("a > span", this).hide();
        });
});

#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<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>

---

Javascript-less

You can also achieve the same behavior with CSS only. See example in this Jsfiddle where CSS was removed and added to pseudo-class css :hover to the menu:

#sideBar:hover > ul > li > a > span {
    display:inline-block;
}