Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Member
27 Points
54 Posts
May 02, 2012 12:01 PM|LINK
I am trying to develop a menu for page navigation using CSS and JavaScript in VS2008.
my code for the same is.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <!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 id="Head1" runat="server"> <style type="text/css"> /* set the menu style */ .menuHead { font-weight: bold; font-size: larger; background-color: #00FFFF; } .menuChoices { background-color: #DCDCDC; width: 150px; } .menu a { color: #000000; text-decoration: none; } .menu a:hover { text-decoration: underline; background-color: #FFFF66; width: 150px; } /* position your menus */ #menu1 { position: absolute; top: 10px; left: 10px; width: 200px; } #menu2 { position: absolute; top: 10px; left: 210px; width: 200px; } #menu3 { position: absolute; top: 10px; left: 410px; width: 200px; } #menu11 { position: absolute; top: 50px; left: 150px; width: 100px; } #menu_sale_ { position: absolute; top: 25px; left: 150px; width: 100px; } #menu_stock_ { position: absolute; top: 55px; left: 150px; width: 100px; } #menu_production_ { position: absolute; top: 80px; left: 150px; width: 100px; } </style> <script type="text/javascript"> function onloadhide() { hide('menu1'); hide('menu2'); hide('menu_sale_'); hide('menu11'); hide('menu_stock_'); hide('menu_production_'); } <!-- /* we'll only allow DOM browsers to simplify things*/ (document.getElementById ? DOMCapable = true : DOMCapable = false); function hide(menuName) { if (DOMCapable) { var theMenu = document.getElementById(menuName + "choices"); theMenu.style.display = 'none'; } } function show(menuName) { if (DOMCapable) { var theMenu = document.getElementById(menuName + "choices"); theMenu.style.display = 'block'; } } </script> </head> <body bgcolor="#000000" onload="onloadhide();"> <form id="form1" runat="server" class="style2"> <div id="menu1" class="menu" onmouseover="show('menu1');" onmouseout="hide('menu1');"> <div class="menuHead"> Transactions</div> <div id="menu1choices" class="menuChoices"> <div onmouseover="show('menu_sale_');" onmouseout="hide('menu_sale_');"> <a href="#" name="1" onserverclick="lnk_ServerClick">Sales</a> <div id="menu_sale_" class="menu"> <div id="menu_sale_choices" class="menuChoices"> <asp:LinkButton ID="btnQuot" runat="server" OnClick="btn_SrverClick" CommandArgument="1">Quotation</asp:LinkButton><br /> <asp:LinkButton ID="btnOrder" runat="server" OnClick="btn_SrverClick" CommandArgument="8">Order Acceptance</asp:LinkButton><br /> <asp:LinkButton ID="btnTax" runat="server" OnClick="btn_SrverClick" CommandArgument="">TaxInvoice</asp:LinkButton> </div> </div> </div> <div onmouseover="show('menu11');" onmouseout="hide('menu11');"> Purchase <div id="menu11" class="menu"> <div id="menu11choices" class="menuChoices"> <asp:LinkButton ID="btnPurchase" runat="server" OnClick="btn_SrverClick" CommandArgument="2">Purchase Order</asp:LinkButton><br /> </div> </div> </div> <div onmouseover="show('menu_stock_');" onmouseout="hide('menu_stock_');"> <a href="#" name="3" onserverclick="lnk_ServerClick">Stock</a> <div id="menu_stock_" class="menu"> <div id="menu_stock_choices" class="menuChoices"> <asp:LinkButton ID="btnGR" runat="server" OnClick="btn_SrverClick" CommandArgument="3">Reciept Against PO</asp:LinkButton><br /> <asp:LinkButton ID="btnDN" runat="server" OnClick="btn_SrverClick" CommandArgument="4">Issue to Production</asp:LinkButton><br /> <asp:LinkButton ID="btnOP" runat="server" OnClick="btn_SrverClick" CommandArgument="5">Opening Stock</asp:LinkButton><br /> <asp:LinkButton ID="btnGO" runat="server" OnClick="btn_SrverClick" CommandArgument="6">Other Reciept</asp:LinkButton><br /> <asp:LinkButton ID="btnDO" runat="server" OnClick="btn_SrverClick" CommandArgument="7">Other Issue</asp:LinkButton><br /> <asp:LinkButton ID="btnPI" runat="server" OnClick="btn_SrverClick" CommandArgument="12">Purchase Indent</asp:LinkButton> </div> </div> </div> <div onmouseover="show('menu_production_');" onmouseout="hide('menu_production_');"> <a href="#" name="3" onserverclick="lnk_ServerClick">Production</a> <div id="menu_production_" class="menu"> <div id="menu_production_choices" class="menuChoices"> <asp:LinkButton ID="btnJC" runat="server" OnClick="btn_SrverClick" CommandArgument="9">Jobcard</asp:LinkButton><br /> <asp:LinkButton ID="btnMP" runat="server" OnClick="btn_SrverClick" CommandArgument="10">Material Plan</asp:LinkButton><br /> <asp:LinkButton ID="btnRQ" runat="server" OnClick="btn_SrverClick" CommandArgument="11">Requisition from Supplier</asp:LinkButton><br /> <asp:LinkButton ID="btnPN" runat="server" OnClick="btn_SrverClick" CommandArgument="">Production Note</asp:LinkButton><br /> </div> </div> </div> <asp:LinkButton ID="btnEX" runat="server" OnClick="btn_SrverClick" CommandArgument="">Excise</asp:LinkButton> </div> </div> <div id="menu2" class="menu" onmouseover="show('menu2');" onmouseout="hide('menu2');"> <div class="menuHead"> Reports</div> <div id="menu2choices" class="menuChoices"> <asp:LinkButton ID="LinkButton1" runat="server" OnClick="btn_SrverClick" CommandArgument="">Production Note</asp:LinkButton><br /> <asp:LinkButton ID="LinkButton2" runat="server" OnClick="btn_SrverClick" CommandArgument="">Production Note</asp:LinkButton><br /> </div> </div> </form> </body> </html>
I want to further upgrade this menu.
I want to give transition effect e.g. when I move mouseover to Transaction , menu1choices should come from up to down. similar for other options also.
Is it possible with javascript?
Pls provide sample code or any e.g if possible.
pls guide.
jitendra2coo...
Member
27 Points
54 Posts
Giving Transition Effect to Page Navigation menu using CSS & Javascript
May 02, 2012 12:01 PM|LINK
I am trying to develop a menu for page navigation using CSS and JavaScript in VS2008.
my code for the same is.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <!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 id="Head1" runat="server"> <style type="text/css"> /* set the menu style */ .menuHead { font-weight: bold; font-size: larger; background-color: #00FFFF; } .menuChoices { background-color: #DCDCDC; width: 150px; } .menu a { color: #000000; text-decoration: none; } .menu a:hover { text-decoration: underline; background-color: #FFFF66; width: 150px; } /* position your menus */ #menu1 { position: absolute; top: 10px; left: 10px; width: 200px; } #menu2 { position: absolute; top: 10px; left: 210px; width: 200px; } #menu3 { position: absolute; top: 10px; left: 410px; width: 200px; } #menu11 { position: absolute; top: 50px; left: 150px; width: 100px; } #menu_sale_ { position: absolute; top: 25px; left: 150px; width: 100px; } #menu_stock_ { position: absolute; top: 55px; left: 150px; width: 100px; } #menu_production_ { position: absolute; top: 80px; left: 150px; width: 100px; } </style> <script type="text/javascript"> function onloadhide() { hide('menu1'); hide('menu2'); hide('menu_sale_'); hide('menu11'); hide('menu_stock_'); hide('menu_production_'); } <!-- /* we'll only allow DOM browsers to simplify things*/ (document.getElementById ? DOMCapable = true : DOMCapable = false); function hide(menuName) { if (DOMCapable) { var theMenu = document.getElementById(menuName + "choices"); theMenu.style.display = 'none'; } } function show(menuName) { if (DOMCapable) { var theMenu = document.getElementById(menuName + "choices"); theMenu.style.display = 'block'; } } </script> </head> <body bgcolor="#000000" onload="onloadhide();"> <form id="form1" runat="server" class="style2"> <div id="menu1" class="menu" onmouseover="show('menu1');" onmouseout="hide('menu1');"> <div class="menuHead"> Transactions</div> <div id="menu1choices" class="menuChoices"> <div onmouseover="show('menu_sale_');" onmouseout="hide('menu_sale_');"> <a href="#" name="1" onserverclick="lnk_ServerClick">Sales</a> <div id="menu_sale_" class="menu"> <div id="menu_sale_choices" class="menuChoices"> <asp:LinkButton ID="btnQuot" runat="server" OnClick="btn_SrverClick" CommandArgument="1">Quotation</asp:LinkButton><br /> <asp:LinkButton ID="btnOrder" runat="server" OnClick="btn_SrverClick" CommandArgument="8">Order Acceptance</asp:LinkButton><br /> <asp:LinkButton ID="btnTax" runat="server" OnClick="btn_SrverClick" CommandArgument="">TaxInvoice</asp:LinkButton> </div> </div> </div> <div onmouseover="show('menu11');" onmouseout="hide('menu11');"> Purchase <div id="menu11" class="menu"> <div id="menu11choices" class="menuChoices"> <asp:LinkButton ID="btnPurchase" runat="server" OnClick="btn_SrverClick" CommandArgument="2">Purchase Order</asp:LinkButton><br /> </div> </div> </div> <div onmouseover="show('menu_stock_');" onmouseout="hide('menu_stock_');"> <a href="#" name="3" onserverclick="lnk_ServerClick">Stock</a> <div id="menu_stock_" class="menu"> <div id="menu_stock_choices" class="menuChoices"> <asp:LinkButton ID="btnGR" runat="server" OnClick="btn_SrverClick" CommandArgument="3">Reciept Against PO</asp:LinkButton><br /> <asp:LinkButton ID="btnDN" runat="server" OnClick="btn_SrverClick" CommandArgument="4">Issue to Production</asp:LinkButton><br /> <asp:LinkButton ID="btnOP" runat="server" OnClick="btn_SrverClick" CommandArgument="5">Opening Stock</asp:LinkButton><br /> <asp:LinkButton ID="btnGO" runat="server" OnClick="btn_SrverClick" CommandArgument="6">Other Reciept</asp:LinkButton><br /> <asp:LinkButton ID="btnDO" runat="server" OnClick="btn_SrverClick" CommandArgument="7">Other Issue</asp:LinkButton><br /> <asp:LinkButton ID="btnPI" runat="server" OnClick="btn_SrverClick" CommandArgument="12">Purchase Indent</asp:LinkButton> </div> </div> </div> <div onmouseover="show('menu_production_');" onmouseout="hide('menu_production_');"> <a href="#" name="3" onserverclick="lnk_ServerClick">Production</a> <div id="menu_production_" class="menu"> <div id="menu_production_choices" class="menuChoices"> <asp:LinkButton ID="btnJC" runat="server" OnClick="btn_SrverClick" CommandArgument="9">Jobcard</asp:LinkButton><br /> <asp:LinkButton ID="btnMP" runat="server" OnClick="btn_SrverClick" CommandArgument="10">Material Plan</asp:LinkButton><br /> <asp:LinkButton ID="btnRQ" runat="server" OnClick="btn_SrverClick" CommandArgument="11">Requisition from Supplier</asp:LinkButton><br /> <asp:LinkButton ID="btnPN" runat="server" OnClick="btn_SrverClick" CommandArgument="">Production Note</asp:LinkButton><br /> </div> </div> </div> <asp:LinkButton ID="btnEX" runat="server" OnClick="btn_SrverClick" CommandArgument="">Excise</asp:LinkButton> </div> </div> <div id="menu2" class="menu" onmouseover="show('menu2');" onmouseout="hide('menu2');"> <div class="menuHead"> Reports</div> <div id="menu2choices" class="menuChoices"> <asp:LinkButton ID="LinkButton1" runat="server" OnClick="btn_SrverClick" CommandArgument="">Production Note</asp:LinkButton><br /> <asp:LinkButton ID="LinkButton2" runat="server" OnClick="btn_SrverClick" CommandArgument="">Production Note</asp:LinkButton><br /> </div> </div> </form> </body> </html>I want to further upgrade this menu.
I want to give transition effect e.g. when I move mouseover to Transaction , menu1choices should come from up to down. similar for other options also.
Is it possible with javascript?
Pls provide sample code or any e.g if possible.
pls guide.