Basic Hard Coded Cascading Menus
Technically your menus won't need javascript to be utilized. Just some basic CSS that will help with everything and support all browsers without much issue, save IE6 and maybe IE7.
Step 1: First we need to create the HTML that will contain the content of our menu.
<form id="form1" runat="server"><br /> <ul id="MainMenu" class="menu"><br /> <li>Home</li><br /> <li>Other Homes<br /> <ul class="SubMenu"><br /> <li>Home 1</li><br /> <li>Home 2</li><br /> <li>Home 3</li><br /> </ul><br /> </li><br /> </ul><br /></form>
The structure here should be straight forward. MainMenu will appear just as the menu in your browser displays. SubMenu will appear as the menu that drops down when you click/hover over one of the main menu items. I defined SubMenu as a class which will allow us to create more then one sub menu within the main menu. You can change MainMenu to a class instead but only if you have more then 1 menu.
Step 2: Now we will define a few styles that will be placed in a stylesheet and included into the HTML.
/* removes the list bullet */
.Menu{
list-style-type: none;
}
/* set the initial menu to float horizontal */
.Menu li{
float:left;
list-style-type: none;
width: 75px;
height: 20px;
border: 1px solid #CCCCCC;
margin: 0px;
padding: 3px 8px;
background-color: #777777;
}
/* clean Clear method: removes float effect after last MainMenu Item */
.Menu li:last{
clear:both;
}
/* Hides all SubMenus under the MainMenu */
.Menu .SubMenu{
display:none;
position: relative;
margin-top: 10px;
margin-left:-9px;
}
/* Shows the current Menu Items sub menu when hovered with the mouse */
.Menu li:hover > .SubMenu{
display:block;
}
/* Defines the list item of a sub menu */
.Menu .SubMenu li{
display:block;
}
/* Defines the list item of a sub menu when hovered */
.Menu li:hover{
background-color: #007700;
}
/* THE MAGIC STYLE:: effects any Sub menu under the submenu and positions it to the right of the current menu item being hovered over */
.Menu .SubMenu .SubMenu{
position:relative;
left: 90px;
top: -27px;
}
Step 3: Continue working on the rest of our site so we arent worried about the menu for the next billion years.
Step 4(OPTIONAL): You were just approached by your boss to make a bunch of additional levels of menus. What do you do? Well since we have our magic style its rather simple. The following is what we originally had, and we need to have Home 3 Pop out an additional SubMenu.
<form id="form1" runat="server"><br /> <ul id="MainMenu" class="menu"><br /> <li>Home</li><br /> <li>Other Homes<br /> <ul class="SubMenu"><br /> <li>Home 1</li><br /> <li>Home 2</li><br /> <li>Home 3</li><br /> </ul><br /> </li><br /> </ul><br /></form>
Our additional Menu is now ready. <br />
<ul id="MainMenu" class="Menu">
<li>Home</li>
<li>Other Homes
<ul class="SubMenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3
<ul class="SubMenu">
<li>Sub Home 1</li>
<li>Sub Home 2</li>
<li>Sub Home 3</li>
</ul>
</li>
</ul>
</li>
</ul>
Notice that all you had to do was add an additional menu to the list. You didnt need to update the CSS, and as the prior example had. You had to update the Javascript as well. Simple.
LINQ Cascading Menu
Step 1: First we need to create the HTML that will contain the content of our menu. We will just use a basic since we will want to create a special collection to generate a jagged list for the menu and process that all on the code behind page. This will just demonstrate how to load the SubMenu into the "Other Homes" MainMenu Item.
<form id="form1" runat="server"><br /> <ul id="MainMenu" class="Menu"><br /> <li>Home</li><br /> <li>Other Homes<br /> <asp:Literal ID="SubMenu" runat="server"></asp:Literal><br /> </li><br /> </ul><br /> <asp:GridView ID="GridView1" runat="server" Visible="False"><br /> </asp:GridView><br /></form>
Step 2: Now we need to set up the code behind to handle generating the menu from our database. For the sake of this example, lets just say that we have defined our SQL Class in a file called MenuDataClass.dbml.
protected void Page_Load(object sender, EventArgs e)
{
Query();
Literal1.Text = "<ul class\"SubMenu\">" +
"<li>" + GridView1.Rows[0].Cells[1].Text; + "</li>" +
"<li>" + GridView1.Rows[1].Cells[1].Text; + "</li>" +
"<li>" + GridView1.Rows[2].Cells[1].Text; + "</li>" +
"<li>" + GridView1.Rows[3].Cells[1].Text; + "</li>" +
"</ul>";
}
private void Query()
{
DataClassesDataContext db = new DataClassesDataContext();
var a = from b in db.GetTable<home>() select b;
GridView1.DataSource = a;
GridView1.DataBind();
}
Note:-> Here we use the DataContext (DataClassesDataContext) because it is used to manage it's access to the database as well as tracking changes made to entities retrieved from the database.
Cascading Menu using a database with the help of SqlDataAdapter
Step 1: First we need to create the HTML that will hold our menu.
<form id="form1" runat="server"><br /> <ul id="MainMenu" class="Menu"><br /> <li>Home</li><br /> <li>Other Homes<br /> <asp:Literal ID="SubMenu" runat="server"></asp:Literal><br /> </li><br /> </ul><br /></form>
Step 2: Now we will create a database table for our menu.
create table Home
{
ID int Identity(1,1),
MenuName varchar(30)
}
Insert the values that we will need for our sub menu
insert into Home(MenuName) values("Home 1");
insert into Home(MenuName) values("Home 2");
insert into Home(MenuName) values("Home 3");
Step 3: Now to tie this altogether with a connection to the database that querys the values and codes them into our menu for us.
Connection String: (Use your own database Connection String. This is just a sample)
SqlConnection conn1 = new SqlConnection("data source=MA\\SQLEXPRESS;initial catalog=menu1;integrated security=true;");
Code Behind Page:
protected void Page_Load(object sender, EventArgs e)
{
SqlDataAdapter da1 = new SqlDataAdapter("select * from home", conn1);
DataSet ds1 = new DataSet();
da1.Fill(ds1, "home");
Literal1.Text = "<ul class\"SubMenu\">" +
"<li>" + GridView1.Rows[0].Cells[1].Text; + "</li>" +
"<li>" + GridView1.Rows[1].Cells[1].Text; + "</li>" +
"<li>" + GridView1.Rows[2].Cells[1].Text; + "</li>" +
"<li>" + GridView1.Rows[3].Cells[1].Text; + "</li>" +
"</ul>";
}
Conclusion
I hope that this gives you all a good starting point into creating dynamic menus with your ASP.NET code. The previous example provided javascript that does not present a maintainable code structure and would not present the end user with a friendly menu. All the sub menus would be inaccessible if you turned off javascript.
Submit an article or tip
