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

Website SEO techniques - Web Designing and Development

Is your custom designed website SEO friendly too?! Are you playing too quick to reach the page 1? Beware! Goggle has its eyes on you!! With ever increasing websites and online pages indexed in Google for each industry, the search engine optimization rules have become much strict than ever. You just cannot rely upon those early 2000’s techniques and keep your website absolutely safe and Google favorite. • Content – As reminded time and again, Content is... CONTINUE READING

10 Ways To Make Your Programming Better

The proprietor of Megasoftwares, top web development company in India, who himself has been and is a hardcore perfectionist developer, shares with you how to improve and enhance your programming skills. Learn new languages to benefit - Web development or programming is all about languages and their appropriate use and fusion. Many aspects in different web development languages are same, all that differs is the way of implementation. Learning new languages for web... CONTINUE READING

How To Improve Sites Search Engine Position

Search engine optimization is a great asset to a website to make itself approachable by the target audience. A website's search engine ranking depends on a number of factors. Once a site has got listed with the search engine, then our professional web design company can improve your search engine position by means of back links to your website and also by improving the site content etc. The main attempts include that all your meta tags are in place. Our web design... CONTINUE READING

Web 1.0 Web 2.0 Web 3.0

Web 1.0: It represents the information published on the web in a static manner. It is just like a typed word document on the web with images and a neat formatting. Hyper-linking of the web-pages and bookmarking were two of the most important aspect of Web 1.0 web design . Information on Web 1.0 webpage is not accessible to external editing and so is not dynamic and updated only once in a while by the concerned. Some web design elements of a Web 1.0 site... CONTINUE READING

Blog Hosting

A common but major issue that clinches ones mind while thinking of his own blog is - to have a blog hosted on his own site or hosting it on one of the major blog hosting sites, such as WordPress.com, Blogger or Typepad. All have their own prospects as detailed below. WordPress.com - WordPress.com offers free hosting but they have a strict "non-commercial use" policy and enforce it strictly enough. If they see that you are trying to sell something,have plenty of... 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