Static Menu Control

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

 

Ebook Download
View all
Learn
View all