Creating Simple Sliding Menu Quickly

There are plenty of Responsive menus on the net, which you can incorporate within your project and make an exciting navigation system. But it’s always not easy to achieve desired menu unless you are using some jQuery plugins or one of the CSS framework that comes with inbuilt responsive menu. So today let’s create a simple sliding navigation menu which will fit any screen size and also looks great.

slidebar-nav-menu

HTML

Let’s start by writing the HTML code for the menu. As you can see we have one overly element, a close button and rest are menu links.

1
2
3
4
5
6
7
8
9
10
11
<div class="side-menu-overlay" style="width: 0px; opacity: 0;"></div>
<div class="side-menu-wrapper">
<a href="#" class="menu-close">&times;</a>
<ul>
    <li><a href="http://www.google.com" target="_blank" rel="nofollow">Google Search</a></li>
    <li><a href="http://www.yahoo.com" target="_blank" rel="nofollow">Yahoo Search</a></li>
    <li><a href="http://www.facebook.com" target="_blank" rel="nofollow">Facebook</a></li>
    <li><a href="http://www.flickr.com" target="_blank" rel="nofollow">Flickr</a></li>

</ul>
</div>

CSS Style

I have applied the CSS transition property, which will make our menu sliding smooth. To position the menu bar to right or left of the browser, just change left to right. You must also need to make changes in jQuery code below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.side-menu-wrapper { /* style menu wrapper */
    overflow: hidden;
    background: rgba(0,0,0,.95);
    padding: 40px 0 0 40px;
    position: fixed; /* Fixed position */
    top: 0;
    left: -290px; /* Sidebar initial position. "right" for right positioned menu */
    height: 100%;
    z-index: 2;
    transition: 0.5s; /* CSS transition speed */
    width: 250px;
    font: 20px "Courier New", Courier, monospace;
}
.side-menu-wrapper > ul{ /* css ul list style */
    list-style:none;
    padding:0;
    margin:0;
    overflow-y: auto; /* enable scroll for menu items */
    width:500px; /* this width will hide scroll bar */
    height:95%;
}
.side-menu-wrapper > ul > li > a { /* links */
    display: block;
    border-bottom: 1px solid #131313;
    padding: 6px 4px 6px 4px;
    color: #989898;
    transition: 0.3s;
    text-decoration: none;
}
.side-menu-wrapper > a.menu-close { /* close button */
    padding: 8px 0 4px 23px;
    color: #6B6B6B;
    display: block;
    margin: -30px 0 -10px -20px;
    font-size: 35px;
    text-decoration: none;
}

.side-menu-overlay { /* overlay */
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.7);
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    opacity: 0;
    transition: opacity 1s;
}

The CSS should work on all modern browsers except IE8 and IE9, but you can always play around until you are satisfied with the look.

jQuery

In jQuery code we simply change the CSS property of the menu using jQuery .CSS(), since we’ve enabled CSS transition, it should take care of the sliding animation without the help of jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var slidebar_width  = 290; //slidebar width + padding size
var slide_bar       = $(".side-menu-wrapper"); //slidebar
var slide_open_btn  = $(".slide-menu-open"); //slidebar close btn
var slide_close_btn = $(".menu-close"); //slidebar close btn
var overlay         = $(".side-menu-overlay"); //slidebar close btn

slide_open_btn.click(function(e){
    e.preventDefault();
    slide_bar.css( {"left": "0px"}); //change to "right" for right positioned menu
    overlay.css({"opacity":"1", "width":"100%"});
});
slide_close_btn.click(function(e){
    e.preventDefault();
    slide_bar.css({"left": "-"+ slidebar_width + "px"}); //change to "right" for right positioned menu
    overlay.css({"opacity":"0", "width":"0"}); 
});

That’s it, we have just created a menu that will fit any screen size. You can copy the code into your project and play.
Open Demo Menu Open in JSFiddle

  1. why this code not works in wordpress..please help me

     Reply
Message Type : Question Comment ?
  • Question : Can include code, jsFiddle, codePen etc using Markdown Syntax.
  • Comment : Short comments and questions.