vijay

welcome Netizen

Share Your Knowledge.It is a way to achieve immortality

Monday, June 27, 2011

Creating ASP.Net Menu Control using CSS


Hi..
                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) from the add one item 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;
    border: solid 1px #fff !important;
}


.menuhover
{
     color:#fff;background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;
 }

And Create images folder in solution explorer and copy, past 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 pagecreate a table in one td drag the menu control in 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>


i hope this one helpful to you..
plz post your comments

0 comments:

Post a Comment