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 <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.
<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:
Complete source: Download
Hope you like this post! Keep learning and sharing!
