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

Nitesh Kejriwal

Rate me:

5.00/5 (1 vote)

28 Apr 2014CPOL1 min read

15.3K

How to create a Hierarchical Menu using HTML, CSS and jQuery

Download complete source code

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.

HTML

<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 <ul> and <li> 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.

HTML

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

HTML

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

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

HTML

< !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:

Complete source: Download

Hope you like this post! Keep learning and sharing!

This article was originally posted at http://www.niteshluharuka.com/2014/04/how-to-create-a-hierarchical-menu-using-html-css-and-jquery

License

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

Written By

Nitesh Kejriwal

Founder Rebin Infotech

India

A passionate developer with over 10 years of experience and building my software company code by code. Experience withMS Technologies like .Net | MVC | Xamarin | Sharepoint | MS Project Server and PhP along with open source CMS Systems like Wordpress/DotNetNuke etc.

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

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

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

Introduction

License

Comments and Discussions