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     2422
  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 .Net developer having 4+ years of experience. He loves writting technical article for .Net developers. Najmul Hoda
No Photo
 
Country India
Company BirlaSoft
Home Page www.dotnetlogix.com

Rate this article

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

Comments

     
Write your comment here.  
Comment
Verification Code   
  
    
 
Section sponsored by