Static Menu
Control in ASP.NET
Hi!
Here i will show you step by step procedure how to createStatic Menu Control in ASP.NET in visual studio 2005 / 2008
Static Menu controls are very
useful like dynamic menu controls the difference in static and dynamic controls
is that static menu controls are just static no animation…
______
Here I am using Visual Studio 2008 but there is no condition you can use
Visual Studio 2005 also.
So follow these steps to create State Implementation
The Steps are:
1- Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008
Now The Visual Studio will Open like this:-
![Visual studio 2008.JPG]()
2- Now go to File Menu -> New -> Web Site
When you will click on the New Web Site a new form will open like this:-
![Savewebsite.JPG]()
3- Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE ->
Choose File System from the location combo box -> Set the path by the browse
button - > Choose the language from the Language ComboBox (Visual C# ,
Visual Basic , J #)
Choose Visual C#
4 - Click on the OK Button:-
Now you will see a new from like this :-
![FirstPagewebsite.JPG]()
This is the Source Code window and in this page you will se this code…
First you have to learn XML and HTML to work with ASP .NET_
I have used <!– text –> to make the text as
comment this is the way to make comment in this code …
<%@ Page Language=”C#”
AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default”
%>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Type your webpage title here</title>
<!– Here you can specify your page title in between title tag
</head>
<body>
<form id=”form1? runat=”server”>
<div>
<!– In between div tags you can manage your web controls like buttons,
labels, picture
Box, ImageMap etc –>
</div>
</form>
</body>
</html>
See here is a tab named Design in the bottom of this page
5- Click on this tab and you will see a blank web page where you can drag
any control from the toolbox (which is in the left side of this window)
6- Drag a Label Control and two menu controls in the design window or in the
source window…
7- Select a control and go to its
properties Data Tab -> orientation set it to Horizontal
8-Now set your design window code something like this
<asp:Label ID="Label1" runat="server"
Text="Static Menu
with vertical orientation"></asp:Label><br />
<br />
<asp:Menu ID="Menu1" runat="server" BackColor="#B5C7DE" DynamicHorizontalOffset="2"
Font-Names="Verdana" Font-Size="Medium" ForeColor="#284E98" StaticSubMenuIndent="10px"
StaticDisplayLevels="2">
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<StaticSelectedStyle BackColor="#507CD1" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<Items>
<asp:MenuItem Text="MenuItem1" Value="MenuItem1">
<asp:MenuItem Text="MenuItem1Leaf"
Value="MenuItem1Leaf"></asp:MenuItem>
<asp:MenuItem Text="MenuItem1Leaf"
Value="MenuItem1Leaf"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="MenuItem2" Value="MenuItem2">
<asp:MenuItem Text="MenuItem2Leaf"
Value="MenuItem2Leaf"></asp:MenuItem>
<asp:MenuItem Text="MenuItem2Leaf"
Value="MenuItem2Leaf"></asp:MenuItem>
<asp:MenuItem Text="MenuItem2Leaf"
Value="MenuItem2Leaf"></asp:MenuItem>
</asp:MenuItem>
</Items>
<StaticHoverStyle BackColor="#284E98" ForeColor="White" />
</asp:Menu>
<br />
<asp:Label ID="Label2" runat="server" Text="Static Menu with horizontal
orientation"></asp:Label><br />
<br />
<asp:Menu ID="Menu2" runat="server" BackColor="#FFFBD6" DynamicHorizontalOffset="2"
Font-Names="Verdana" Font-Size="Medium" ForeColor="#990000" StaticSubMenuIndent="10px"
Orientation="Horizontal" StaticDisplayLevels="2">
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#990000" ForeColor="White" />
<DynamicMenuStyle BackColor="#FFFBD6" />
<StaticSelectedStyle BackColor="#FFCC66" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<Items>
<asp:MenuItem Text="MenuItem 1" Value="MenuItem 1">
<asp:MenuItem Text="MenuItem1Leaf"
Value="MenuItem1Leaf"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="MenuItem2" Value="MenuItem2">
<asp:MenuItem Text="MenuItem2Leaf"
Value="MenuItem2Leaf"></asp:MenuItem>
<asp:MenuItem Text="MenuItem2Leaf"
Value="MenuItem2Leaf"></asp:MenuItem>
</asp:MenuItem>
</Items>
<StaticHoverStyle BackColor="#990000" ForeColor="White" />
</asp:Menu>
<br />
</div>
10 - Now run your web site by Ctrl + F5
11- Close web browser
12-Close visual studio
13-You can set the links path as you like…
Thanks!
Nikhil Kumar
For more help please visit my blog...
www.dotnetask.blog.co.in