Friday 26 July 2013

Widgets

Change Menu Hover Styling in Asp.net

Description:- In Previous articles We have learned Range Validator Email and Phone Number , Web Url Address Validation. Now in this Article We Describe How to use Range Validator Between Two values.Now in this article we learn How to change Menu Style on hover.


Demo:- 


Coding:-  

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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></title>
    <style type="text/css">
   
        #mnuMyWeb
        {
            background:darkgreen;
            border:groove 3px darkblue;
        }
       
        #mnuMyWeb a
        {
            border-right:solid 1px lightyellow;
            color:lightyellow;
            padding:5px 8px 5px 8px;
            display:inline-block;
         }
       
        #mnuMyWeb a:hover
        {
            background:lightyellow;
            color:darkgreen;
            }
       
        #mnuMyWeb a.active
        {
            background:darkblue;
            color:Red;
            }
       
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Menu ID="mnuMyWeb" Orientation="Horizontal" runat="server">
            <Items>
                <asp:MenuItem Text="Home" Selected="true" NavigateUrl="~/Home.aspx" />
                <asp:MenuItem Text="About Us" NavigateUrl="~/AboutUs.aspx" />
                <asp:MenuItem Text="Services" NavigateUrl="#" />
                <asp:MenuItem Text="Contacts" NavigateUrl="#" />
            </Items>
        </asp:Menu>
    </div>
    </form>
</body>
</html>

0 comments:

Post a Comment