How to Create Animation for Menu Item in Asp.net. || Creating Master Page in Asp.net.
Here is the example for creating Animation to the MenuItem using JQuery.
Step1:
Create a new Asp.net website in Visual Studio.Take a Master Page and write the following html code in the design part of the Master page. Also take four Default.aspx pages and name it as Home.aspx, Aboutus.aspx, Product.aspx, Contactus.aspx. Navigate each page to menu-item in Master Page. Write the content in the each Default.aspx page in content holder.
Design Code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder
id="head"
runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
li
{
border:1px solid black;
padding:1px 1px 1px 1px;
width:220px;
color:White;
cursor:pointer;
}
a { color:White; font-family:Tahoma; }
</style>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul.level1 li").hover(function () {
$(this).stop().animate({ opacity: 1.7,
width: "270px" }, "slow");
}, function () {
$(this).stop().animate({ opacity: 2,
width: "170px" }, "slow");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Image ID="Image1" runat="server"
Height="137px"
ImageUrl="~/abstract-background.jpg"
Width="942px"
/>
<asp:Menu ID="Menu1" runat="server"
Orientation="Horizontal"
RenderingMode="List"
BackColor="White"
DynamicHorizontalOffset="2"
Font-Names="Verdana"
Font-Size="Large"
ForeColor="Red"
StaticSubMenuIndent="10px"
Font-Bold="True"
Font-Italic="True"
BorderColor="Blue"
BorderStyle="Double"
Font-Overline="True">
<DynamicHoverStyle
BackColor="#990000"
ForeColor="White"
/>
<DynamicMenuItemStyle
HorizontalPadding="5px"
VerticalPadding="2px"
/>
<DynamicMenuStyle BackColor="#FFFBD6" />
<DynamicSelectedStyle
BackColor="#FFCC66"
/>
<DynamicItemTemplate>
<%# Eval("Text")
%>
</DynamicItemTemplate>
<Items>
<asp:MenuItem NavigateUrl="~/Home.aspx"
ImageUrl="~/home.jpg"
Text="Home"
Value="Home"
PopOutImageUrl="~/contactus.png" />
<asp:MenuItem NavigateUrl="~/About
us.aspx" ImageUrl="~/about us.png"
Text="About
Us" Value="AboutUs"
/>
<asp:MenuItem NavigateUrl="~/product.aspx"
ImageUrl="~/pro.jpg"
Text="Products"
Value="Products"
/>
<asp:MenuItem NavigateUrl="~/contact
us.aspx" ImageUrl="~/contactus.png"
Text="Contact
Us" Value="ContactUs"
/>
</Items>
<StaticHoverStyle
BackColor="#990000"
ForeColor="White"
/>
<StaticMenuItemStyle
HorizontalPadding="5px"
VerticalPadding="2px"
/>
<StaticSelectedStyle
BackColor="#FFCC66"
/>
</asp:Menu>
<div>
<asp:ContentPlaceHolder
id="ContentPlaceHolder1"
runat="server">
<p> </p>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Step2:
Now build the Solution and Debug it for the output.
OutPut Page:
Customize menus with animation effects
ReplyDelete