Click here to Skip to main content
Click here to Skip to main content

How to Create a Hierarchical Menu Using HTML, CSS and jQuery

, 28 Apr 2014
Rate this:
Please Sign up or sign in to vote.
How to create a Hierarchical Menu using HTML, CSS and jQuery

Introduction

This is Part 2 of the series to create hierarchical menus. You can see the first part “How to Create a Hierarchical Menu Using HTML And CSS” here. This post will explain how to create a multi level menu using HTML, CSS and a bit of jQuery. So, let's get started.

We will use an existing plugin named “jQSimpleMenu” to create this menu. Since we’re going to use jQuery in our project, include jQuery in your project in the <head> tag. Also, you will need to include the plugin JS file jqsimplemenu.js and CSS File jqsimplemenu.css.

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jqsimplemenu.js"></script>
    <link rel="stylesheet" href="css/jqsimplemenu.css" type="text/css" />

Now, let us create an HTML structure as below using &lt;ul&gt; and &lt;li&gt; tags. Write the below code in your HTML file where you want to place the menu. The important part here is to assign a class to the “<ul>” tag.

<div>
<ul class="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
<ul>
    <li><a href="#">Menu 2.1</a></li>
    <li><a href="#">Menu 2.2</a></li>
    <li><a href="#">Menu 2.3</a></li>
</ul>
</li>
    <li><a href="#">Menu 3</a>
<ul>
    <li><a href="#">Menu 3.1</a></li>
    <li><a href="#">Menu 3.2</a></li>
    <li><a href="#">Menu 3.3</a></li>
</ul>
</li>
</ul>
</div>

Once the HTML structure is ready, we just need to call the plugin function to convert our HTML into a beautiful looking menu. You can do this as below:

<script type="text/javascript">
        $(document).ready(function () {
            $('.menu').jqsimplemenu();
        });
    </script>

You’re done. The complete HTML file will look something like below:

< !DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jqsimplemenu.js"></script>
    <link rel="stylesheet" href="css/jqsimplemenu.css" 
    type="text/css" media="screen" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('.menu').jqsimplemenu();
        });
    </script>
</head>
<body>
    <div>
<ul class="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
<ul>
    <li><a href="#">Menu 2.1</a></li>
    <li><a href="#">Menu 2.2</a></li>
    <li><a href="#">Menu 2.3</a></li>
</ul>
</li>
    <li><a href="#">Menu 3</a>
<ul>
    <li><a href="#">Menu 3.1</a></li>
    <li><a href="#">Menu 3.2</a></li>
    <li><a href="#">Menu 3.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

The final output of the HTML file will look like below:
html-css-jquery-menu

Complete source: Download

Hope you like this post! Keep learning and sharing!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Nitesh Luharuka
Team Leader Independent IT Professional, Consultant
India India
An Independent IT Professional and Consultant on MS Technologies like .Net | MVC | Silverlight | Sharepoint | MS Project Server along with open source CMS Systems like DotNetNuke etc.
 
I am an enthusiastic technocrat who love to debug problems and solve them. I love writing articles on my website in my spare time. Please visit my Website for more details and subscribe to get technology related tips/tricks.
Follow on   Twitter   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 28 Apr 2014
Article Copyright 2014 by Nitesh Luharuka
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid