CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapnavigation
Alexander Galkin
Alexander Galkin

Reputation: 12534

How to implement collapsible navigation bars?

I am relatively new to the world of client-side development and might be using the word "collapsible" in the title incorrectly, but here is what I would like to achieve in my web application:

Collapsible navigation bars

So, I have several bars in the header for different purposes and I want to allow user to fold them to a tiny chevrons and unfold them back only if they really need them.

So, I am looking for a framework or sample code that would help me here.

I am using Bootstrap for the main design and layouting of my web application and I would be best if they would be compatible, but I can work on it on my own. I just don't want to implement everything from scratch here...

Upvotes: 0

Views: 379

Answers (1)

Elmer
Elmer

Reputation: 809

You can achieve that effect with some simple CSS. Check out this jsfiddle.

You have two elements inside of your wrapper container like so:

<div class="wrapper">
    <nav>
        My nav
    </nav>
    <section>
        This is my content
    </section>
</div>

Then with css you make the nav element be on top of the section element

section {
    width: 100%;
    height: 100%;
    background-color: gray;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 10em;
    text-align: center;
    box-sizing: border-box;
}

nav {
    z-index: 100;
    position: absolute;
    background-color: green;
    display: block;
    top: 0;
    left: 0;
    width: 50%;
    transition: all 500ms ease;
}

To create the effect of a hiding navigation menu you can add some jquery:

$('nav').click(function () {
    $(this).toggleClass('hide');
});

and finally just add another style to handle the hidden nav element:

nav.hide {
    left: -15em;
}

The sample itself is bare bones, but hopefully it can give you a sense of how to approach a problem like that.

Upvotes: 1

Related Questions