Creating a Breadcrumb like Menu using CSS and JQuery
Introduction
Sometimes we want to show menu items like
Product -> Category -> Sub Category
Furniture->Wooden Furniture -> Chair
Furniture->Wooden Furniture -> Center Table
So in this article I am going to show how we can create a breadcrumb like menu using JQuery and CSS in asp.net.
Let’s create the unordered menu
<div>
<ul>
<li><a href="http://yoursite.com/Furniture">Furniture</a>
<ul>
<li><a href="http://yoursite.com/Furniture/12">Wooden Furniture</a></li>
<li><a href="http://yoursite.com/Furniture/12/1">Chair</a></li>
</ul>
</li>
</ul>
</div>
When you run the page you will get the out something like this
Now lets apply some css to show menu it breakcrumb style. I have created 2 styles .menu_ul and .submenu_li.
To seperate each menu(list item) we have added a right arrow between 2 menus items. Below you can see the css styles.
<style type="text/css">
.submenu_li
{
background-image: url(image/rightarrow.jpg);
background-repeat: no-repeat;
background-position: left;
padding-left: 30px;
display: inline;
font-family:Arial, Verdana , Courier New;
font-size:11px;
}
.menu_ul
{
list-style: none;
margin: 0;
display: inline;
font-family:Arial, Verdana , Courier New;
font-size:11px;
}
</style>
To apply css style on the menu and menu items here I have called addClass() function on the list and list itmes.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('ul').addClass('menu_ul');
$('ul li ul li').addClass('submenu_li');
});
</script>
Now when you run this page it will look like below.
Hope you liked it. Happy reading.....