Simple Dropdown Menu using CSS and jQuery

Demo Download

In this tutorial, we will create a Simple Dropdown Menu using CSS and jQuery. While converting website from PSD into HTML, we need to write HTML and CSS code for website, here i will share a part for website navigation.

You can easily make a simple dropdown menu using CSS, javascript, and jQuery. I will use JavsaScript and jQuery to highlight the selected link or menu and i will also use jQuery to show and hide child menu or sub menu.

You can also check here how to create a simple responsive navigation using jQuery.

Steps to Create a Simple Dropdown Menu using CSS and jQuery

We need to follow the following steps to make a simple dropdown menu using CSS and jQuery.

  1. Create an Index File
  2. Create a CSS File
  3. Create a JavaScript File
  4. Create another extra page

1. Create an Index File

First create an index.html file and paste the following in its body section.

As you can see above, to create a child menu / sub menu, i have created another unordered list ul within parent list item li. List item li becomes parent of this ul.

Dont forgot to include jQuery library, JavaScript File and CSS in head section of this page.

jQuery Library file is included in download file of this tutorial.

2. Create a CSS File

Now create a style.css file and paste the following styles in it.

3. Create a JavaScript File

Create a main.js file and paste the following script in it.

In the above file we are adding active class to active link and we are also showing and hiding the sub menu on click of its parent.

4. Create another extra page

Create another file with name menu-3.html file and paste the same code as we paste in above index.html file.

Demo Download

If you found this tutorial helpful, share it with your friends and developers group.

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Article By
Javed Ur Rehman is a passionate blogger and web developer, he loves to share web development tutorials and blogging tips. He usually writes about HTML, CSS, JavaScript, Jquery, Ajax, PHP and MySQL.

4 Comments

  1. Please give me code for searching the inserted record , to pull the inserted the records in to excel and pdf and also to create chart for the records. Please upload the code so that it will be more helpful for my college project

    1. Hi Manikandan, thanks for leaving your comment, but i am afraid that currently i do not have any tutorial yet, but i hope i will write few tutorials about it later. For now i hope you can find helpful via Google.

  2. Hi Javed sir, i need help from you. Sir i need html and php code for create hotel reservation form with added update and delete can you help me?

Leave a Reply

Your email address will not be published. Required fields are marked *