Building Slide Out Menu Using Only Javascript

Building Slide Out Menu Using Only Javascript

Looking for a unique solution for your site navigation? Today, We bring you a simple slide out menu which builds with CSS3 and by touching the Javascript a bit.

It’s a very useful menu if you want to add menu only for mobile users or want to give quick access to important links on your desktop website.

When a user clicks on the toggle button, It slideout the list of boxes on the right side with the menu text.

There are few plugins available which allow making such kind of quick navigation but I don’t think, You need a plugin for such a small functionality. You can easily build this type of menu with a few lines of CSS and Javascript code.

Just to mention here, It does not slide out from sidebar but or something like that. It’s a simple menu which shows off with boxes when a toggle button click.

The slide out box menu is another great way of showing extra links when clicking on a simple button. This menu is simple and can be used to show more submenu items. It is perfect if you already have the main navigation bar and still wants to add another quick nav without adding another long nav bar.

We mainly use CSS and HTML to build this menu but need to add a few lines of javascript code.  The Javascript will allow us to add active class and make possible to set the margin left.

We will simply use the toggle function and then animate the li list items. Also, we will add transition but this can be done using pure CSS3.

The Markup

The HTML markup is pretty much simple, and we will structure a regular menu using ul li and anchor link. We will define the main class name SlideOutMenu and then simply list the menu items.

We will use SlideoutActive class for the first menu as for active menu. Don’t you think, that’s dead simple?

<div class="SlideOutMenu">
    <ul>
        <li class="SlideoutActive"><a href="#">Menu</a></li>
        <li class="hover"><a href="#">Application</a></li>
        <li class="hover"><a href="#">Android</a></li>
        <li class="hover"><a href="#">Webcam</a></li>
        <li class="hover"><a href="#">Gallery</a></li>
        <li class="hover"><a href="#">Tools</a></li>
    </ul>
</div>

The Styling

The CSS also state forward, we just do some basic styling. But for list menu and current menu, we have to set position absolute and then make sure we set z-index for the current menu only.

.SlideOutMenu {
    height: 140px;
    overflow: hidden;
}
.SlideoutActive {
    z-index: 9;
}
.SlideOutMenu ul {
	margin:0;
    padding: 0;
}  
.SlideOutMenu li, 
.SlideOutMenu .SlideoutActive {
    background: #523d1f none repeat scroll 0 0;
    cursor: pointer;
    display: block;
    float: left;
	width: 100px;
    height: 100px;
    line-height: 100px;
    margin: 10px;
    position: absolute;
    text-align: center;
    
}
.SlideOutMenu li a{
	color: #fff;
	font-size: 16px;
	color:#fff;
	text-decoration:none;	
}
.SlideOutMenu li.hover:hover{
	background:#6F532A;
}

The JavaScript

That’s the few lines of Javascript, All we need to add an active class for the toggle button. Then next, we will animate the unorder list li and ul.

$(document).ready(function(e) {
    $(".SlideoutActive").toggle(function(){
    $("ul li").each(function(index, element) {
            $(this).animate({
                "margin-left":index*105
            });
            $(this).css("transition","all .5s ease-in-out")
        });			
            },function(){
                $(".SlideOutMenu ul li").each(function(index, element) {
                    $(this).animate({
                "margin-left":0
            });
        });
    });
//

});

And that’s is all about! I hope you like this very short tutorial on building another cool and unique sliding menu and find this small trick useful.

Code ExamplesYou May Also Like