We Write

Home » Blog Details

Web Application Development Company - Multi Level Dropdown Menu

Multi Level Dropdown Menu

Multi Level Dropdown Menu

Multi Level Menu with ASP.NET, C#, jQuery and SQL Server

solution that I would like to share with others puzzled with the same as was one of my website development guys was having a tough time creating a multi level dropdown menu from database,
So I gave him this :
1. Database
We will be using 2 tables to achieve the same :
a. Category Table ( tbl_cat ):
Category_ID : Unique ID
Category_Name : Text
b. Table to hold category relations ( tbl_cat_rel )
Rel_ID : Unique ID
Category_ID : foreign key
Parent_ID : Parent Category ID
Sort_ID : In case you want to sort category display.

2. Stored Procedure

This part is bit tricky as we will be calculating number of childs a particular category holds
					

CREATE PROCEDURE sp_getCategory					

AS					

BEGIN					

Select a.Category_ID, a.Parent_ID, c.Category_Name, b.totalSubCats 					

from tbl_cat_rel as a LEFT OUTER JOIN 					

(SELECT Parent_ID, count(*) as totalSubCats 					

FROM tbl_cat_rel GROUP BY Parent_ID) as b 					

ON a.Category_ID = b.Parent_ID					

LEFT OUTER JOIN tbl_cat as c 					

on a.Category_ID = c.Category_ID					

ORDER BY a.Category_ID					

END					



3. jQuery

Although you can use any jQuery menu you find suitable, for this example I am using
DDSmooth menu available at : http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm


4. Codes
I am assuming that you have selected a suitable menu Literal or similar to print its navigation values. In this example I will be using literal as follows :
					

<div id="smoothmenu1" class="ddsmoothmenu"> 					

<asp:Literal runat="server" ID="lt_navMenu"></asp:Literal>					

<br style="clear: left" />					

</div>					


And here are the CS codes :
					

// I am sure you know how to get data from tables :)					

this.createMenu(DSdataSet.Tables["tbl_categories"], 0); 					

					

private void createMenu(DataTable dt, int pID)					

{					

lt_navMenu.Text = lt_navMenu.Text + "&lt;ul&gt;";					

for (int i = 0; i < dt.Rows.Count; i++) //Loop until rows are still there.					

{					

if (Convert.ToInt32(dt.Rows[i]["ParentID"]) == pID) 					

{					

lt_navMenu.Text = lt_navMenu.Text + "<li><a href=\"/" +					

dt.Rows[i]["Category_Name"].ToString() + ".aspx \">" + 					

dt.Rows[i]["Category_Name"].ToString() + "</a>";					

					

//Till the time item has childs					

if (dt.Rows[i]["totalSubCats"] != DBNull.Value) 					

this.createMenu(dt, Convert.ToInt32(dt.Rows[i]["catID"]));					

lt_navMenu.Text = lt_navMenu.Text + "</li>";					

}					

}					

lt_navMenu.Text = lt_navMenu.Text + "</ul>";					

}					



The above was used in - http://www.svengg.co/


Till Next...
Jaswant.

SIMILAR POSTS

Web 3.0

As per our web design and development company India professionals web survey, web 2.0 allows searching for selected set of keyword and keyword matching but in Web 3.0, instead of multiple searches one can type a complex sentence for the searching and web shall do the rest. And as the same user would search for different online topics, they would get registered and stored in the web 2.0 database and eventually the more the browser would learn about him, his likes, dislikes... CONTINUE READING

Creative Conceptual Logo Design
 

Right from a brand name in just a simple font made their copyright and that gets famous and identified worldwide to an image plus a name plus a line plus a splash of colors, your logo would be an integral part of your corporate brand identity. Its not going to be just a name. Its not to be considered as What's in a name?!! Logo is your face for your customers, a mark for your services or industry. Logo Design Team at Megasoftwares India offers you customized conceptual... CONTINUE READING

Search Engine Optimization

SEO/Search engine optimisation is one of the most talked about services in the web world. With many search engines registering millions of custom websites daily, what is the right way to have this done. Why is one site above one day and pushed to the next page on another? How will SEO help a business? How can a company offering search engine optimization services be trusted upon amongst many?   SEO company India , Megasoftwares, not only excels in user friendly web... CONTINUE READING

Landing Page

As per Wikipedia, landing page is a single web page that appears in response to clicking on a search result reached via search engine optimization or an online advertisement. Designing and targeting a beautiful landing page to the respective page of your custom website that it speaks about, keeps your visitor from getting confused and losing interest. Your custom website designer should take ample care while designing landing page for its key elements and their... CONTINUE READING

Custom Web Designing Features...not to be missed.

Web design company India, MegaSoftwares, takes complete care in training and updating its professional designers and developers to deliver perfect projects. Custom websites become custom when design involves features catering to the particular industry and its target audience. Yet, there are some basics of designing as per user friendliness which we always suggest to our clients for their consideration and are accordingly adhered to by our website designers, be it for first... CONTINUE READING
Contact Us
Dont' be shy, give us a shout.
We're always curious what fun projects and cool new people lurk around the corners of the web.

DROP US A LINE

Copyright © 2003-2018 MegaSoftwares - Web Design, Website Development and Web Marketing Agency in India
Go Top