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

Friends,

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 article 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 a HTML structure as below using <ul> and <li> tags. Write the following 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 as in the following:

<!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 as in the following

Complete Source: Download

I hope you like this article! Keep learning and sharing!