ASP.NET

Giving Transition Effect to Page Navigation menu using CSS & Javascript RSS

2 replies

Last post May 03, 2012 03:48 AM by sepehr90

‹ Previous Thread|Next Thread ›

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.

Edited by jitendra2cool on May 02, 2012 12:04 PM

- Reply
kranthireddy...

Participant

790 Points

167 Posts

Re: Giving Transition Effect to Page Navigation menu using CSS & Javascript

May 02, 2012 01:29 PM|LINK

http://speckyboy.com/2010/03/15/15-css3-navigation-and-menu-tutorials-and-techniques/

http://webdesignerwall.com/tutorials/css3-dropdown-menu

http://stackoverflow.com/questions/5104053/fade-effect-using-javascript-no-jquery

Hope these links help,

DREAM. EXPLORE. DISCOVER
- Marked as answer by jitendra2cool on May 04, 2012 08:28 AM
- Reply
sepehr90

Member

4 Points

4 Posts

Re: Giving Transition Effect to Page Navigation menu using CSS & Javascript

May 03, 2012 03:48 AM|LINK

you can take a look at this link http://www.hongkiat.com/blog/drop-down-menu-30-free-scripts-to-enhance-header-navigation/

but i suggest to use Jquery plugins to make a fancy website.

look at this link http://www.noupe.com/jquery/45-jquery-navigation-plugins-and-tutorials.html

Everything is possible!
If my idea helps please mark it as answer.

‹ Previous Thread|Next Thread ›

Giving Transition Effect to Page Navigation menu using CSS & Javascript RSS

2 replies

jitendra2coo...

Giving Transition Effect to Page Navigation menu using CSS & Javascript

kranthireddy...

Re: Giving Transition Effect to Page Navigation menu using CSS & Javascript

sepehr90

Re: Giving Transition Effect to Page Navigation menu using CSS & Javascript

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft