World Of Program

<head>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {

        $("#lab").hover(function () {

            $("#img2").stop().animate({ height: "7px" }, "slow");
            $("#divfirst").stop().animate({ height: "112px" }, "slow");

        }
         );
    });



        </script>
        <script type="text/javascript">



        </script>
<script type="text/javascript">

    $(function () {

        $("#lab2").hover(function () {

            $("#divfirst").stop().animate({ height: "7px" }, "slow");
            $("#divsecond").stop().animate({ height: "112px" }, "slow");
            $("#divfirst").mouseleave(function () {
                $("#divfirst").stop().animate({ height: "7px" });
            }
        );
            $("#divsecond").mouseleave(function () {
                $("#divsecond").stop().animate({ height: "7px" });
            }
        );

        });

    });

</script>
<script type="text/javascript">
    function hide() {
        $("#divfirst").stop().animate({ height: "7px" });
        $("#divsecond").stop().animate({ height: "7px" });

    }

</script>

    <style type="text/css">
        #img1
        {
            height: 7px;
            width: 238px;
            z-index: 1;
            left: 0px;
            top: 0px;
            position: absolute;
        }
        #lab
        {
            z-index: 1;
            left: 94px;
            top: 32px;
            position: absolute;
        }
        #img2
        {
            z-index: 1;
            left: 505px;
            top: 16px;
            position: absolute;
            height: 7px;
            width: 302px;
        }
        #lab2
        {
            z-index: 1;
            left: 391px;
            top: 33px;
            position: absolute;
        }
        #divsecond
        {
            z-index: 1;
            left: 615px;
            top: 18px;
            position: absolute;
            height: 2px;
            width: 277px;
        }
    </style>
</head>
<body>
<div id="divsecond" style="background-image:url('http://localhost:50453/WebSite1/adimage/submenuimg.png'); border-color:Black; border-style:solid; border-width:1px;">


    <asp:HyperLink ID="hyp2" runat="server"

        style="height: 24px; width: 83px; top:83px; left:27px; position:absolute; z-index: 1;"
        Font-Names="Iskoola Pota" Font-Size="13pt" ForeColor="White"


        NavigateUrl="http://www.feedback.indiatimes.com/gcReport/feedback/index.jsp?CID=20"
        Font-Bold="True">Feedback</asp:HyperLink>
    <asp:HyperLink ID="hyp4" runat="server"

        style="height: 25px; width: 83px; top:53px; left:26px; position:absolute; z-index: 1;"
        Font-Names="Iskoola Pota" Font-Size="13pt" ForeColor="White"


        NavigateUrl="http://www.feedback.indiatimes.com/gcReport/feedback/index.jsp?CID=20">Contact</asp:HyperLink>


</div>
<div style="position:absolute; background-image:url('http://localhost:50453/WebSite1/adimage/submenuimg.png'); top: 10px; left: 259px; height: 61px; width: 674px;">
<label id="lab" style="color:White; font-size:medium; font-family:Iskoola Pota;" >Term & Condition</label>
<label id="lab2" style="color:White; font-size:medium; font-family:Iskoola Pota;" >Support</label>
</div>
<div id="divfirst"


        style="border: 1px solid Black; z-index: 1; left: 311px; top: 18px; position: absolute; height: 3px; width: 278px;
     background-image:url('http://localhost:50453/WebSite1/adimage/submenuimg.png');">

     <asp:HyperLink
        ID="hyp1" runat="server"

        style="height: 25px; width: 83px; top:59px; left:37px; position:absolute; z-index: 1;"
        Font-Names="Iskoola Pota" Font-Size="13pt" ForeColor="White"


        NavigateUrl="http://shopping.indiatimes.com/media/misc/ishop/shoppingTC.html">Term Use</asp:HyperLink>
    <asp:HyperLink ID="hyp3" runat="server"

        style="height: 25px; width: 174px; top:88px; left:36px; position:absolute; z-index: 1;"
        Font-Names="Iskoola Pota" Font-Size="13pt" ForeColor="White"


        NavigateUrl="http://shopping.indiatimes.com/media/misc/ishop/USB_terms.html">Rules & Conditions</asp:HyperLink>
    </div>
</body>

//// Screenshot

World of program

Saturday 14 May 2011

Menu with hover display and auto hide ASP & jquery

No comments:

Post a Comment