Creating ASP.Net Menu Control using CSS

Vforvijay
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 120525 red flag

Creating ASP.Net Menu Control using CSS


 Download source code for Creating ASP.Net Menu Control using CSS

In this article I plan to write about Menu Control. By using Web user Control we can design Menu Control, and then we added the menu control to the main page. By following this method we can use same menu control for all pages. No need to create Menu for each page.

Firstly you added one web user control (menu.ascx) and style Sheet (menu3.css) this  item is available in solution Explorer. Then enter the following CSS Code in the style Sheet file.


.Menu

{ 

     background:transparent url(images/blueslate_background.gif) repeat-x;

    text-align:center;

    font-size:11px;

    bordersolid 1px #fff !important;

}

 

 

.menuhover

{

     color:#fff;background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat topcenter;

 }

 And Create images folder in solution explorer and copy the below pictures in that folder.       

Copy the below code in menu.ascx page…

 

<link rel="stylesheet"
href="Menu3.css"
type="text/css"
/>
<div id="header" align="center" >
<table width="100%" cellpadding ="0" cellspacing ="0" align="center">
 <tr>
<td  align="center">
    <asp:Menu ID="Menu1" runat="server" Orientation ="Horizontal" CssClass ="Menu" Font-Names="Verdana" ForeColor ="White" Width="800px">
    <StaticMenuItemStyle Height ="40px"/>
    <DynamicMenuItemStyle CssClass ="Menu" Height="40px" HorizontalPadding="25px"  />
    <dynamichoverstyle  CssClass ="menuhover" />
    <StaticHoverStyle CssClass ="menuhover" />
       <Items>
    <asp:MenuItem Text="My Menu">
    <asp:MenuItem Text ="My profile" Enabled ="true" ></asp:MenuItem>
    <asp:MenuItem Text="my Forum" Enabled ="true"></asp:MenuItem>
        </asp:MenuItem>
    <asp:MenuItem Text="Classfields" >
    <asp:MenuItem Text="car" Enabled ="true" ></asp:MenuItem>
    <asp:MenuItem Text="Item For sale" Enabled ="true" ></asp:MenuItem>   
      </asp:MenuItem>
    <asp:MenuItem Text="Forum">
    <asp:MenuItem Text="Create a Forum">
        </asp:MenuItem>
        </asp:MenuItem>
   
    <asp:MenuItem Text="Answers">
    <asp:MenuItem Text="post Answer">
    <asp:MenuItem Text="Ask Question"></asp:MenuItem>
    <asp:MenuItem Text="FAQ"></asp:MenuItem>
    </asp:MenuItem>
    </asp:MenuItem>
   
    <asp:MenuItem Text="Guide">
    <asp:MenuItem Text="Contact us"></asp:MenuItem>
    </asp:MenuItem>
    <asp:MenuItem Text ="Help" >
    <asp:MenuItem Text="About Us" Enabled ="true"></asp:MenuItem>
        </asp:MenuItem>
    </Items>
    </asp:Menu>
 </td>
</tr>
 </table>
 </div
>
 

IN Default.aspx page  create a table in following td drag the menu control in your  td,Your code will look like below..

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   <table cellpadding ="0" cellspacing ="0" width ="1000" align="center" >
   <tr>
   <td>
      <uc1:menu ID="menu1" runat="server" />
   </td>
   </tr>
    </table>
    </div>
    </form>
</body>
</html>
Hope this article was useful. Do let me know your feedback. You can download the demo app from the above attachment link.

Thanks
Page copy protected against web site content infringement by Copyscape

About the Author

Vforvijay
Full Name: vijay ganesan
Member Level:
Member Status: Member
Member Since: 1/25/2011 8:42:29 AM
Country: India



Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)