Vertical Sidebar Menu using Bootstrap 3.3.2

Question

Vertical Sidebar Menu using Bootstrap 3.3.2

Navigation

#1 by (2 votes)

4

My problem is to replicate something like this. I'm having a hard time solving this:

The difference is: without words. When I hover over the entire bar, the rest of the width appears telling what each page is (on the bottom what each icon is). to have a poisition fixed, that is, when I scroll, the bar does not move up or down, but always in the same place.

And when mobile has an effect on the side and not from top to bottom.

Can anyone help? Thank you.

javascript html jquery css twitter-bootstrap

asked by anonymous 18.02.2015 / 12:45

1 answer

How to name the foreign key in the Entity framework Insert "Watermark" on video at upload

score 2 · Accepted Answer

To be able to have a side navigation where only the icons appear and with mouse over the icons and the legend appear, you need some CSS for formatting and JavaScript to control if the mouse is or not over the form menu to display captions.

CSS

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 display .

JavaScript

The secret is effectively in the code below, which with jQuery simplifies the process of checking whether or not the mouse is on 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 methods mouseenter and mouseleave .

Example

Example also in 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><linkhref="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><linkhref="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>

No JavaScript

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

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