Show/Hide Toggle Sliding Menu With CSS & JavaScript

Posted on
TwitterFacebookBufferLinkedInPin It

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.

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”

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

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

  3. 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?

    1. @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.

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

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

  6. 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?

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

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

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

  9. i want to display this menu on top of page. and slide from top to bottom..how can i do that…

  11. 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?

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

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

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

  14. 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!

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

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

      1. Hahaha, well thanks… For some reason I paste about 10 times something wrong there.. 😀 Anyways, works now, thank you!

Comments are closed.