Simple jQuery Drop Down Menu Tutorial

How are you guys? What I'm sharing today is a simple jQuery drop-down menu tutorial that can help you create the simplest of its kind.

This is just to help you get started creating these types of basic website features.

I used this code when I was required to create a drop-down menu on the upper right corner of the page. This is what I came up with. You can easily change to CSS according to your liking.

simple jquery drop down menu tutorial

You can see the drop-down menu on the upper right corner of the image above. But why not see it live? Click the link below.

Simple jQuery Drop Down Menu Tutorial Guide

Prepare basic HTML code.

<!doctype html>
<html>
    <head>
        <title>jQuery Simple Dropdown Menu</title>
        </head>
<body>
 
</body>
</html>

Create the “action-bar” div.

The "action-bar" div is the header bar where a "down arrow" and a "question mark" can be seen on the right side. Put the following inside the body tag.

<div id='action-bar'>
    <span id='question-mark'>
        <div>?</div>
        <div id='under-question-mark'>
            <div class='down-q-item'><a href='#'>Site Map</a></div>
            <div class='down-q-item'><a href='#'>What is this?</a></div>
            <div class='down-q-item'><a href='#'>How to use?</a></div>
            <div class='down-q-item'><a href='#'>Contact Us</a></div>
        </div>
    </span>
    <span id='down-arrow'>
        <div>▼</div>
        <div id='under-down-arrow'>
            <div class='down-q-item'><a href='#'>Print</a></div>
            <div class='down-q-item'><a href='#'>CSV</a></div>
            <div class='down-q-item'><a href='#'>Share</a></div>
        </div>
    </span>
</div>

Create the “main-contents” div.

This "main-contents" div contains whatever contents your page should have. But for this example, we'll have text content.

<div id='main-contents'>
     
    <div id='text-content'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia non neque et ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur blandit sapien nec iaculis consequat. Nam semper, eros eu tempor bibendum, metus velit scelerisque lorem, non venenatis sem justo non nunc. Cras nec purus eget eros elementum aliquet quis lacinia tortor. Nunc dignissim, purus in gravida tincidunt, quam arcu sodales nisl, nec sollicitudin eros purus vel dui. Etiam erat nunc, faucibus eu pellentesque sed, congue suscipit enim.
        <br /><br />
        Cras sit amet nibh et ante pellentesque malesuada accumsan at turpis. Aliquam ac tellus auctor, sagittis purus eget, venenatis risus. Aenean eget nisl facilisis, tristique est in, fringilla tortor. Pellentesque faucibus aliquam risus. Vestibulum quis vestibulum lectus, sed laoreet nulla. In feugiat, augue at faucibus cursus, metus ligula gravida metus, a condimentum dolor odio vel libero. Curabitur ut viverra orci, eget molestie sem. Aliquam erat volutpat.
        <br /><br />
        Praesent eu viverra sem. Morbi mollis consectetur elit eget pulvinar. Nam nunc nulla, tempus quis sapien id, mattis venenatis purus. Curabitur tortor nulla, vulputate non felis at, vulputate fermentum augue. Sed condimentum egestas metus, non luctus odio consectetur in. Quisque dignissim metus neque, non consequat ligula faucibus id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam varius lacus mi, vel facilisis eros adipiscing ac. Aenean vulputate eros ut sollicitudin lobortis. Vestibulum euismod sollicitudin felis, a ultrices nisi euismod at.
        <br /><br />
        Aliquam hendrerit erat nulla, ut ornare lacus pretium eget. Donec cursus, lectus sed posuere accumsan, metus augue rutrum ligula, a accumsan ipsum turpis suscipit nisl. Morbi id enim sed nisl ornare porttitor. Donec facilisis, nibh eget rhoncus molestie, metus justo rutrum mauris, at mattis quam neque vitae odio. Praesent in nunc ipsum. Cras vulputate lacus sit amet augue cursus viverra. Integer tempor scelerisque lacus, et luctus nunc mollis eget.
        <br /><br />
        Aliquam enim diam, suscipit a metus quis, imperdiet vehicula velit. Pellentesque orci augue, elementum eget eros ut, egestas dictum nunc. Proin vehicula tincidunt velit, eu consequat nunc euismod in. Mauris sit amet ullamcorper sem. Ut et turpis fringilla, volutpat metus quis, rutrum nunc. Ut nisi augue, sagittis eu accumsan adipiscing, blandit at nibh. Vivamus cursus a diam sed pharetra. Nam sed ante iaculis, dictum ipsum id, vulputate purus.
    </div>
     
</div>

Wrap the “action-bar” and “main-contents” div inside a “page-container” div.

<div id='page-container'>
<!-- action-bar AND main-contents here-->
</div>

Put some CSS styles

Now we have to make our action-bar and main-content look good. We'll put the following CSS inside the header tag, after the title tag.

<style>
body{
    padding:0;
    margin:0;
    font-family: verdana;
}
 
#action-bar{
    border-bottom:0.2em solid #999;
    height:3em;
}
 
#main-contents{
    padding:1em;
    position:relative;
}
 
#down-arrow{
    float:right;
    font-weight: bold;
    padding:0 3em;
    line-height:3em;
    border-left: 2px solid #999;
    border-right: 2px solid #999;
    position:relative;
    cursor:pointer;
}
 
#under-down-arrow{
    z-index: 999;
    position: absolute;
    line-height: 1.5em;
    border: 2px solid #999;
    left: -2px;
    width:6.9em;
    display:none;
}
 
#question-mark{
    float:right;
    font-weight: bold;
    padding:0 3em;
    line-height:3em;
    border-right: 2px solid #999;
    position:relative;
    cursor:pointer;
}
 
#under-question-mark{
    z-index: 999;
    position: absolute;
    line-height: 1.5em;
    border: 2px solid #999;
    left: -2px;
    width:6.6em;
}
 
.down-q-item{
    border-bottom: thin solid #fff;
    padding: .5em .2em;
    background-color: #999;
}
 
.down-q-item a{
    color:#fff;
    text-decoration:none;
    font-size:0.8em;
}
 
.down-q-item:hover{
    background-color: #d1d1d1;
}
</style>

Add the awesome jQuery script

We'll put the jQuery library and some jQuery script before the end body tag. jQuery script is for showing or hiding the drop-down menu when the "down arrow" and "question mark" were clicked.

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<script>
$(document).ready(function(){
 
    $('#down-arrow').click(function(){
        $('#under-down-arrow').slideToggle(200);
    });
 
    $('#question-mark').click(function(){
        $('#under-question-mark').slideToggle(200);
    });
 
});
</script>

Complete jQuery Drop Down Menu Code:

<!doctype html>
<html>
    <head>
        <title>jQuery Simple Dropdown Menu</title>
         
        <style>
        body{
            padding:0;
            margin:0;
            font-family: verdana;
        }
         
        #action-bar{
            border-bottom:0.2em solid #999;
            height:3em;
        }
         
        #main-contents{
            padding:1em;
            position:relative;
        }
         
        #down-arrow{
            float:right;
            font-weight: bold;
            padding:0 3em;
            line-height:3em;
            border-left: 2px solid #999;
            border-right: 2px solid #999;
            position:relative;
            cursor:pointer;
        }
         
        #under-down-arrow{
            z-index: 999;
            position: absolute;
            line-height: 1.5em;
            border: 2px solid #999;
            left: -2px;
            width:6.9em;
            display:none;
        }
         
        #question-mark{
            float:right;
            font-weight: bold;
            padding:0 3em;
            line-height:3em;
            border-right: 2px solid #999;
            position:relative;
            cursor:pointer;
        }
         
        #under-question-mark{
            z-index: 999;
            position: absolute;
            line-height: 1.5em;
            border: 2px solid #999;
            left: -2px;
            width:6.6em;
        }
         
        .down-q-item{
            border-bottom: thin solid #fff;
            padding: .5em .2em;
            background-color: #999;
        }
         
        .down-q-item a{
            color:#fff;
            text-decoration:none;
            font-size:0.8em;
        }
         
        .down-q-item:hover{
            background-color: #d1d1d1;
        }
        </style>
         
         
    </head>
<body>
 
<div id='page-container'>
 
    <div id='action-bar'>
        <span id='question-mark'>
            <div>?</div>
            <div id='under-question-mark'>
                <div class='down-q-item'><a href='#'>Site Map</a></div>
                <div class='down-q-item'><a href='#'>What is this?</a></div>
                <div class='down-q-item'><a href='#'>How to use?</a></div>
                <div class='down-q-item'><a href='#'>Contact Us</a></div>
            </div>
        </span>
        <span id='down-arrow'>
            <div>▼</div>
            <div id='under-down-arrow'>
                <div class='down-q-item'><a href='#'>Print</a></div>
                <div class='down-q-item'><a href='#'>CSV</a></div>
                <div class='down-q-item'><a href='#'>Share</a></div>
            </div>
        </span>
    </div>
 
    <div id='main-contents'>
         
        <div id='text-content'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia non neque et ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur blandit sapien nec iaculis consequat. Nam semper, eros eu tempor bibendum, metus velit scelerisque lorem, non venenatis sem justo non nunc. Cras nec purus eget eros elementum aliquet quis lacinia tortor. Nunc dignissim, purus in gravida tincidunt, quam arcu sodales nisl, nec sollicitudin eros purus vel dui. Etiam erat nunc, faucibus eu pellentesque sed, congue suscipit enim.
            <br /><br />
            Cras sit amet nibh et ante pellentesque malesuada accumsan at turpis. Aliquam ac tellus auctor, sagittis purus eget, venenatis risus. Aenean eget nisl facilisis, tristique est in, fringilla tortor. Pellentesque faucibus aliquam risus. Vestibulum quis vestibulum lectus, sed laoreet nulla. In feugiat, augue at faucibus cursus, metus ligula gravida metus, a condimentum dolor odio vel libero. Curabitur ut viverra orci, eget molestie sem. Aliquam erat volutpat.
            <br /><br />
            Praesent eu viverra sem. Morbi mollis consectetur elit eget pulvinar. Nam nunc nulla, tempus quis sapien id, mattis venenatis purus. Curabitur tortor nulla, vulputate non felis at, vulputate fermentum augue. Sed condimentum egestas metus, non luctus odio consectetur in. Quisque dignissim metus neque, non consequat ligula faucibus id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam varius lacus mi, vel facilisis eros adipiscing ac. Aenean vulputate eros ut sollicitudin lobortis. Vestibulum euismod sollicitudin felis, a ultrices nisi euismod at.
            <br /><br />
            Aliquam hendrerit erat nulla, ut ornare lacus pretium eget. Donec cursus, lectus sed posuere accumsan, metus augue rutrum ligula, a accumsan ipsum turpis suscipit nisl. Morbi id enim sed nisl ornare porttitor. Donec facilisis, nibh eget rhoncus molestie, metus justo rutrum mauris, at mattis quam neque vitae odio. Praesent in nunc ipsum. Cras vulputate lacus sit amet augue cursus viverra. Integer tempor scelerisque lacus, et luctus nunc mollis eget.
            <br /><br />
            Aliquam enim diam, suscipit a metus quis, imperdiet vehicula velit. Pellentesque orci augue, elementum eget eros ut, egestas dictum nunc. Proin vehicula tincidunt velit, eu consequat nunc euismod in. Mauris sit amet ullamcorper sem. Ut et turpis fringilla, volutpat metus quis, rutrum nunc. Ut nisi augue, sagittis eu accumsan adipiscing, blandit at nibh. Vivamus cursus a diam sed pharetra. Nam sed ante iaculis, dictum ipsum id, vulputate purus.
        </div>
         
    </div>
     
</div>
 
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<script>
$(document).ready(function(){
 
    $('#down-arrow').click(function(){
        $('#under-down-arrow').slideToggle(200);
    });
 
    $('#question-mark').click(function(){
        $('#under-question-mark').slideToggle(200);
    });
 
});
</script>
 
</body>
</html>

As you can see, instead of using a jQuery plugin or something that can slow down your website, you can just create your own thing. This simple jQuery drop-down menu tutorial is an example.

There are many improvements or customization that you can do to this example code, I'll let you play with it, jQuery and CSS is fun, right?. I hope I got you started!

Download Source Code
You can download all the codes used in this tutorial for only $9.99 $5.55!
[purchase_link id="12266" text="Download Now" style="button" color="green"]

Related Tutorials

We listed all our high quality full-stack web development tutorials here: Click here.

Thank you for learning from our post about the simple jQuery Drop Down Menu Tutorial!

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.