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