SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2000
    Location
    Toronto
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Slide Out Menu problem

    I'm trying to get my drop down menus to line up under their assigned topics regardless of the users resolution, as my page uses a centered table design. (Sorry no example at this point).

    I have found a script that does this:
    ypSlideOutMenus found at Youngpup.net

    He includes an example of a centered menu which calculates the current offset of the top left corner of the drop down menu and then initializes it to specific pixels from there.

    My problem is, however, that he only includes an example of one menu item. I would like to know how to alter the code below, so it handles 2 or more menus. I guess im just not javasavee enough to get it to do this.

    Code:
    _________________________________________________________
    <html>
    <head>
    <script language="javascript" src="../ypSlideOutMenusC.js"></script>
    <script language="javascript">

    var myOffset = -37;

    // the number you pass to initLeft doesn't matter since it will get
    // changed onactivate
    var myMenu = new ypSlideOutMenu("menu1", "down", 0, 25, 180, 200)

    myMenu.onactivate = repositionMenu

    function repositionMenu()
    {
    var newLeft = getWindowWidth() / 2 + myOffset;
    myMenu.container.style ? myMenu.container.style.left = newLeft + "px" : myMenu.container.left = newLeft;
    }

    function getWindowWidth()
    {
    return window.innerWidth ? window.innerWidth : document.body.offsetWidth;
    }

    </script>
    <style type="text/css">
    .menuActuator a {
    color:#666666;
    font-weight:bold;
    font-size:12px;
    font-family:arial;
    }

    .menu {
    font-family:verdana;
    color:#666666;
    font-size:10px;
    background-color:#cccccc;
    layer-background-color:#cccccc;
    }
    </style>
    </head>

    <body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor="white">
    <table align="center" bgcolor="#CCCCCC" cellpadding="2" cellspacing="0" border="0">
    <tr>
    <td width="50" align="center" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.showMenu('menu1');" onmouseout="ypSlideOutMenu.hideMenu('menu1')">menu1</a></td>
    </tr>
    </table>

    <div id="menu1Container">
    <div id="menu1Content" class="menu">this is menu 1!</div>
    </div>
    </body>

    ------------------------------------------------------------------------------------------------

    Code attached for example as well

    Thanks!

    BQ


    Attached Files Attached Files

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2000
    Location
    Toronto
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No ideas?? Please. I'm desperate. thanks

  3. #3
    Bangarang! Karloff's Avatar
    Join Date
    Mar 2003
    Location
    Manchester, United Kingdom
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically, all you need to to is create a second ypSlideOutMenu object:

    Code:
    <script language="javascript">
    var myOffset = -37; 
    var myOffset2 = -57;
     
    //menu instance #1
    var myMenu = new ypSlideOutMenu("menu1", "down", 0, 25, 180, 200)
    //menu instance #2
    var myMenu2 = new ypSlideOutMenu("menu2", "down", 0, 25, 180, 200)
     
    
    myMenu.onactivate = repositionMenu;
    
    function repositionMenu()
    {
      var newLeft = getWindowWidth() / 2 + myOffset;
      myMenu.container.style ? myMenu.container.style.left = newLeft + "px" : myMenu.container.left = newLeft;
      
      //and once more for the 2nd one though this isnt really clean practice, i am simply lazy
      myMenu2.container.style ? myMenu2.container.style.left = newLeft + "px" : myMenu2.container.left = newLeft;
    }
    
    function getWindowWidth()
    {
      return window.innerWidth ? window.innerWidth : document.body.offsetWidth;
    } 
    </script>
    There, that should do the trick. Simply adjust the positioning of the myMenu2 instance and thats it.

    If you want to learn more about JavaScript objects and a few more basics that will help you with this script, check out this brilliant tutorial: http://www.sitepoint.com/article/470 (note that the second page is about objects :-)

    Hope this helped,
    Karl


Bookmarks

Posting Permissions

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