User Id :    Password :      New Member   Forgot Password  
 
Creating a Breadcrumb like Menu using CSS and JQuery
Description Creating a Breadcrumb like Menu using CSS and JQuery   No. of Views     3055
  Rating     0
Author Najmul Hoda   Posted On     02 Oct 2011
Tags HTML,Style Sheet    

Sample Code   Download Code


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

 

 

About Author

About Author He is a team lead, having 8+ years of experience. He loves writing technical article for .Net developers. Najmul Hoda
No Photo
 
Country United States
Company BirlaSoft
Home Page http://www.magixchat.com

Rate this article

Rating options from poor, fair, good, very good to excelent.  
 

Comments

   
Write your comment here.
Comment
Verification Code