Show/Hide Toggle Sliding Menu With CSS & JavaScript

Posted on 15th March 2013

I sometimes find annoying having to go back to the top of a web page in order to reach the main menu. So why not create a menu which would always be immediately accessible and which we could hide at anytime when it is not needed.

Demo

Here is a working demo of the toggle menu you should get at the and of this tutorial. I have tested it on IE9, Latest version of FireFox, Chrome, Safari and Opera and it worked on all of them. Doesn’t work below IE8.

See the Pen Simple Show/Hide Toggle Sliding Menu With CSS & JavaScript by WebTutorialSource (@webtutorialsource) on CodePen.

HTML

Here is a simple HTML markup for the buttons and the arrow which will be used to show or hide the menu.

<div id="box" class="hide">
    <ul id="tab">
        <li>
            <img id="arrow" onclick="toggle('box');" src="/images/arrowleft.png">
        </li>
    </ul>
    <div id="links">
        <div id="deco">
            <div class="bt"><a href="index.php" >HOME</a></div>
            <div class="bt"><a href="tut.php" >TUTS</a></div>
            <div class="bt"><a href="about.php" >ABOUT</a></div>
            <div class="bt"><a href="contact.php" >CONTACT</a></div>
        </div>
    </div>
</div>

CSS

Some styling to position the menu and make it look presentable.

#box{
    width: 190px;
    font-size: 12px;
    line-height: 20px;
    right: -140px;
    top: 25%; /* change this value to place the menu higher or lower */
    position: fixed;
    z-index: 100;
}

#tab{
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 99;
}

#tab li span{
    display: block;
    padding: 0 5px;
    position: relative;
}

#links{
    width: 80px;
    padding: 10px;
    float: left;
    border-left: 1px solid #B4B8BB;
}

.show, .hide{
    /* we specify the transition length for hiding and showing */
            transition: margin-right .4s ease-in;
    -webkit-transition: margin-right .4s ease-in;
}

.hide{
    margin-right:0px;
}

.show{
    margin-right:95px;
}

#arrow, .bt{
    cursor: pointer;
}

.bt{
    width: 77px;
    height: 40px;
    margin: -1px;
    text-align:center;
    border:1px solid #858fa6;
    font: bold 13px Helvetica,Arial,sans-serif;
    text-shadow:0px 0px 5px rgba(0, 0, 0, 0.75);
    background:#014464;
         background-image: -o-linear-gradient(left, #1F82AF, #002F44);
        background-image: -ms-linear-gradient(left, #1F82AF, #002F44);
       background-image: -moz-linear-gradient(left, #1F82AF, #002F44);
    background-image: -webkit-linear-gradient(left, #1F82AF, #002F44);
    background-image: -webkit-gradient(linear, left top, right top, from(#1F82AF), to(#002F44));
}

.bt a{
    line-height: 40px;
    color: #fff;
    display: block;
}

.bt:hover{
    transition: background .3s linear;
    background: #32A3D3;
         -o-transition: background .3s linear;
       -moz-transition: background .3s linear;
    -webkit-transition: background .3s linear;
}

#deco{
    width: 75px;
    float: left;
            box-shadow:0px 0px 5px #000;
       -moz-box-shadow:0px 0px 5px #000;
    -webkit-box-shadow:0px 0px 5px #000;
}

JavaScript

The script is quite simple and does not require any JavaScript labriary.

As you could see in the HTML markup I am using an image for the arrow which points to the left. When I click this arrow I want two things to happen. First, I want the menu to show by sliding to the left, this will be done simply by swapping CSS style from class="hide" to class="show". And second, when the menu is fully shown I want the image to change to another arrow which points to the right by change the src attribute of the img element. For this to work I have created a function to toggle between show and hide and also between the two different images.

I also need another function to delay the change between images.

function toggle(id) {
    var el = document.getElementById(id);
    var img = document.getElementById("arrow");
    var box = el.getAttribute("class");
    if(box == "hide"){
        el.setAttribute("class", "show");
        delay(img, "/images/arrowright.png", 400);
    }
    else{
        el.setAttribute("class", "hide");
        delay(img, "/images/arrowleft.png", 400);
    }
}

function delay(elem, src, delayTime){
    window.setTimeout(function() {elem.setAttribute("src", src);}, delayTime);
}

I hope you’ll enjoy this tutorial.

24 thoughts on “Show/Hide Toggle Sliding Menu With CSS & JavaScript”

Chris says:
6th June 2013 at 6:49 pm
Hi,
Firstly, thanks for this – it was incredibly helpful! I just had a quick question for you. If I wanted to change the buttons (Home, Tuts, About, Contact) to link to an external website, what would I need to do?
Thanks,
-Chris
Reply
1. WebTutorialSource says:
  7th June 2013 at 11:48 pm
  Hi @Chris,
  You just need to change the value of the href attribute like this:
```
<a class="bt" href="http://www.google.com" >Google</a>
```
  don't forget to add http:// in front of your url or it's not going to work.
  Reply
satish says:
31st August 2013 at 10:40 am
thanks sir it work perfectly
Reply
John says:
6th December 2013 at 5:28 pm
Probably a stupid question but I would like to put the menu on the left side of the page. After a bunch of tweaking, I can't seem to get it to work. Any ideas?
Reply
1. WebTutorialSource says:
  7th December 2013 at 1:34 pm
  @John for that you just need to change some CSS properties used for positioning.
  In the #box you need to:
```
right: -140px; //Change this 
left: -140px;// to this. You might also need to change the value too
```
  and in #tab:
```
float: left; // Change this 
float: right; // To this
```
  and where you see right put left instead like this:
```
.show, .hide{
transition: margin-left .4s ease-in;
-webkit-transition: margin-left .4s ease-in;
}
.hide{margin-left:0px;}
.show{margin-left:95px;}
```
  Hope this helps.
  Reply
Tom says:
18th December 2013 at 2:01 am
Hi Patricio,
May I ask where I should be adding in the javascript code? Does it go in the CSS file, the HTML or elsewhere?
Thanks for your help and the great tutorial
Reply
1. WebTutorialSource says:
  2nd December 2013 at 10:26 pm
  Hi @Tom,
  You can put the JavaScript code in the <head> tag of you HTML. Very important to work JavaScript has to be in between <script> tags:
```
<head>
<script>
  // here goes your JavaScript code
</script>
</head>
```
  Reply
saga says:
8th January 2014 at 1:50 pm
After show doesn't display the arrowright?
Reply
Jesus says:
18th January 2014 at 6:13 pm
Hey bro, thanks for this awesome menu, how do i make it to show a part of the menu instead of the arrow and when they click on that part of the menu, the menu comes out?
Reply
thomas says:
20th February 2014 at 4:35 pm
Hello @WTS,
Thanks for this great tutorial. I got it working like it should!
What code should I use to close the menu after clicking a link? (Just learning JS, sorry ;))
Thanks in advance!!
Thomas
Reply
1. WebTutorialSource says:
  20th February 2014 at 8:53 pm
  Hi @thomas,
  You don't need to add any code for that as when you will click a link the new page will load and by default the menu is hidden.
  But if you still want the menu to close when clicking a link you just need to call the toggle function using onclick like this:
```
<a href="#" onclick="toggle('box');" >Your link</a>
```
  that's it.
  Reply
Stephan says:
22nd February 2014 at 9:30 pm
Thank you, works great, flawlessly, and the design is ultra cool.
I just copyied and pasted, adjusted the menu to the lift side of the screen and that's it.
Thank you again.
Reply
nitin solanki says:
9th March 2014 at 6:40 am
i want to display this menu on top of page. and slide from top to bottom..how can i do that…
Reply
vinathi says:
12th March 2014 at 12:54 pm
it's not working in ie8
Reply
Csaba says:
28th April 2014 at 3:12 am
Hey man, great tutorial. I just created my menu with this method for a responsive site. How can I make the menu hide when users clicking away or they press Esc?
Reply
1. WebTutorialSource says:
  29th April 2014 at 10:46 pm
  Hi Csaba,
  Have a look at this see if it helps http://www.benknowscode.com/2013/07/bind…
  Reply
Radu says:
9th September 2014 at 10:34 pm
Hi
Thank you for the code. It works (and looks) pretty nice.
I was trying to create a hover effect when you put the mouse on the arrow. I want the effect to take place only on arrowleft.png.
Can you help?
Thank you
Reply
1. WebTutorialSource says:
  10th September 2014 at 8:57 am
  Hi @Radu,
  on arrowleft.png there is that class .hide you can use. Just add some CSS like this:
```
.hide ul li img:hover{...}
```
  Hope it helps.
  Reply
  1. Radu says:
    10th September 2014 at 10:14 pm
    It hepls:)
    Thanks!
    Reply
Carmen says:
24th September 2014 at 5:10 am
Thank you for this tutorial, this is the exact sliding menu what I look for. But how about if I need a submenu, how to add submenu for this sliding menu? Thank you so much.
Reply
Axel says:
9th October 2014 at 3:09 pm
Hi,great code! The only problem is that I get ">" showing besides the arrow icon … How can I get rid of it?Thank you very much.Have a great day!
Reply
Jouni says:
4th November 2014 at 9:35 am
Hello! This is exactly what I'm looking for, just that I cant make it work for some reason… On this site it works, but on my test file it's not…
vesi-visio.net/test/sidebox/facebook.php
What I'm doing wrong here? This will be a slider for FB updates, not a menu. The problem is the script.
Reply
1. WebTutorialSource says:
  4th November 2014 at 10:42 am
  Hi Jouni
  Your problem is very simple. Your are not using the required CSS styling on .hide and .show classes. Just copy the CSS from my snippet and it will work. Also in your CSS remove this line margin-right:95px; you don't need it.
  Reply
  1. Jouni says:
    4th November 2014 at 3:44 pm
    Hahaha, well thanks… For some reason I paste about 10 times something wrong there.. 😀 Anyways, works now, thank you!
    Reply