Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Horizontal Menu and SubMenu

    Hi !

    I am not a good JavaScript programmer and require help with a Horizontal Menu design.

    I need to create a Menu which onMouseHover, displays submenu in a horizontal fashion just below the main menu.

    I have a small code that shows this. Just copy paste to see this:

    ----------------------------------------------------------------------------------------------------------------------------------------------------------
    <HTML>
    <HEAD>
    <script language="JavaScript">
    function big(lyr)
    {
    document.all[lyr].style.height='40px';
    }

    /*small() makes selected layer shorter (height property)*/

    function small(lyr)
    {

    document.all[lyr].style.height='18px';

    }

    /* start() makes all layers short to start with (height property)*/

    function start()
    {

    document.all.Layer1.style.height='18px';
    document.all.Layer2.style.height='18px';
    document.all.Layer3.style.height='18px';
    }
    </script>
    </HEAD>
    <BODY onLoad = "start()">
    <div id="Layer1" style="position:absolute; width:250px; height:32px; z-index:1; left: 10px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer1')"; onMouseOut="small('Layer1')">
    <div align="center">
    <font face="Verdana, Arial, Helvetica, sans-serif" size = "2">
    <a href="menu1.html">Menu 1</a>
    <br>
    | <a href="link1.html">Link 1</a>
    | <a href="link2.html">Link 2</a>
    | <a href="link3.html">Link 3</a>
    | <a href="link4.html">Link 4</a> |
    </font>
    </div>
    </div>

    <div id="Layer2" style="position:absolute; width:250px; height:32px; z-index:1; left: 270px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer2')"; onMouseOut="small('Layer2')">
    <div align="center">
    <font face="Verdana, Arial, Helvetica, sans-serif" size = "2">
    <a href="menu2.html">Menu 2</a>
    <br>
    | <a href="link5.html">Link 5</a>
    | <a href="link6.html">Link 6</a>
    | <a href="link7.html">Link 7</a>
    | <a href="link8.html">Link 8</a> |
    </font>
    </div>

    </div>
    <div id="Layer3" style="position:absolute; width:250px; height:32px; z-index:1; left: 530px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer3')"; onMouseOut="small('Layer3')">
    <div align="center">
    <font face="Verdana, Arial, Helvetica, sans-serif" size = "2">
    <a href="menu3.html">Menu 3</a>
    <br>
    | <a href="link9.html">Link 9</a>
    | <a href="link10.html">Link 10</a>
    | <a href="link11.html">Link 11</a>
    | <a href="link12.html">Link 12</a> |
    </font>
    </div>
    </div>
    </BODY>
    </HTML>
    ----------------------------------------------------------------------------------------------------------------------------------------------------------

    In this case all the submenu is displayed exactly below the main menu.

    However, I need to display all the submenus from the leftmost corner of the second line and not exactly below their respective main menus as in this case.

    Require some assistance !

    Thnx !

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hey !

    Thanks a lot !
    That was a really wonderful example ! It helped me a lot !
    Thanks again !


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •