SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Dropdown menu

  1. #1
    SitePoint Enthusiast -saturn-'s Avatar
    Join Date
    Nov 2003
    Location
    Thessaloniki, Greece
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dropdown menu

    Hi.

    I've been working on Dave Lindquist's implementation of Using Lists for DHTML Menus to bring it close to a previous, non-Standards menubar we were using before, in order to replace it.

    I have attached a ZIP file that contains the source of XHTML, CSS and JS and I'd like you to help me in the following:

    Right now Dave's implementation requires you to click on a menu item in order for the submenu to appear/disappear.

    I'd prefer the mouse click to make the browser visit the location of the menu item so I made the following change to the .js file:

    Code:
    	actuator.onclick = function() {
    		window.location = this.href;
    		}
    Please tell me if I need to add anything else regarding that issue.

    I'd like some help on the following too:

    How can the submenus appear when the mouse hovers over them and disappear as it hovers out of them?

    I've seen Mike Foster's implementation of such menus (xMenu 4) but I think he specifies an area (as large as the submenu when open) out of which the mouse hides the submenu. Can it happen more easily?


    Thanks in advance!
    Attached Files Attached Files

  2. #2
    SitePoint Enthusiast -saturn-'s Avatar
    Join Date
    Nov 2003
    Location
    Thessaloniki, Greece
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    May I add that I'm already using the x Library for this site, so if you could combine its powers with what I'm trying to do, it would probably save us some extra coding.

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -saturn-,

    I guess I'm a sucker for little challenges like this

    The original menu code had... well, I think it was only working by accident.

    I don't claim it to be perfect, but it worked well for me on Win2K with Opera7, Mozilla1.5, and IE6.

    Merry Christmas from Cross-Browser.com

    Code:
    window.onload = function()
    {
      initializeMenu("companyActuator", "companyMenu");
      initializeMenu("servicesActuator", "servicesMenu");
      initializeMenu("clientsActuator", "clientsMenu");
      initializeMenu("casestudiesActuator", "casestudiesMenu");
      initializeMenu("showcaseActuator", "showcaseMenu");
    }
    Code:
    /*
     * menuDropdown.js - implements an dropdown menu based on a HTML list
     * Author: Dave Lindquist (http://www.gazingus.org)
     * Extensively modified by Mike Foster, cross-browser.com, 19Dec03
     */
    
    var currentMenu = null;
    
    if (!document.getElementById)
        document.getElementById = function() { return null; }
    
    function initializeMenu(actuatorId, menuId)
    {
      var actuator = document.getElementById(actuatorId);
      var menu = document.getElementById(menuId);
      if (actuator == null || menu == null) return;
    
      actuator.menu = menu;
      menu.actuator = actuator;
      
      actuator.onmouseover = function()
      {
        if (currentMenu) {
          this.hideMenu();
        }
        this.showMenu();
      }
    
      actuator.onmouseout = function(evnt)
      {
        var e = evnt || window.event;
        if (e) {
          var oTo = e.relatedTarget || e.toElement;
          var li = this.parentNode || this.parentElement; // assumes actuator is child of LI
          // has mouse moved out of LI?
          while (oTo && oTo != li) {
            oTo = oTo.parentNode || oTo.parentElement;
          }
          if (!oTo) {
            this.hideMenu();
          }
        }
      }
    
      menu.onmouseout = function(evnt)
      {
        var e = evnt || window.event;
        if (e) {
          var oTo = e.relatedTarget || e.toElement;
          // has mouse moved out of UL?
          while (oTo && oTo != this) {
            oTo = oTo.parentNode || oTo.parentElement;
          }
          if (!oTo) {
            this.actuator.hideMenu();
          }
        }
      }
    
      actuator.showMenu = function()
      {
        var m = this.menu;
        m.style.left = this.offsetLeft + "px";
        m.style.top = this.offsetTop + this.offsetHeight + "px";
        m.style.visibility = "visible";
        currentMenu = m;
      }
    
      actuator.hideMenu = function()
      {
        if (currentMenu) {
          currentMenu.style.visibility = "hidden";
          currentMenu = null;
        }
      }
    }

  4. #4
    SitePoint Enthusiast -saturn-'s Avatar
    Join Date
    Nov 2003
    Location
    Thessaloniki, Greece
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    What can I say... It works as wished. All I have to do now is embed it in my site.
    Merry Christmas to you too, Mike and THANK YOU VERY MUCH!

    (so what would YOU like for Christmas? )

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welcome

    so what would YOU like for Christmas?
    • Governments that care about the evolution of their societies - instead of focusing on money and power.
    • Corporations that recognize that the current 'open trade' policy amounts to nothing more than slavery.
    • Citizens that will open their eyes, take responsibility, and take back their Nation.
    • School systems that support the concept of 'discovery' instead of 'memorization'.
    • Teachers that aren't afraid to discuss fundamental truths.
    • I'd really like to get caught up on my work


    That should do it

  6. #6
    SitePoint Enthusiast -saturn-'s Avatar
    Join Date
    Nov 2003
    Location
    Thessaloniki, Greece
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damn! I just ran out of my Genie lamp rubs...

  7. #7
    SitePoint Member
    Join Date
    Jun 2004
    Location
    bloomington in
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Marvelous...but...

    Mike,

    Fantastic, works like an absolute charm!
    But...


    Is there a way to add sub menus onto this? For example, the first menu has several dropdown items and it'd be marvelous to be able to have one or more of those submenus to have submenus as well. You see this sort of thing a lot in dhtml and javascript scripts but this css method of doing the menu seems so much more superior, at least in regards to accessability and so on.

    Steve

    EDITED:

    Nevermind, I found a marvelous script at:

    http://www.htmldog.com/articles/suck...downs/example/


    Quote Originally Posted by MikeFoster
    Hi -saturn-,

    I guess I'm a sucker for little challenges like this

    The original menu code had... well, I think it was only working by accident.

    (snip)
    Last edited by ssalter; Jun 19, 2004 at 16:08.

  8. #8
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ssalter
    Mike,

    Is there a way to add sub menus onto this?

    Actually, I just found this script the other day and I was wondering the same thing???? I am currently using the brainjar top menu, but would love to do this, is there a way to include sub menus?????


    Also, I am using Dave's expandable menu example (menu3, the multiple level one). As it is, one has to click on one of the "+" menu items to expand the menu. When you are taken to the new page, you have to click the menu again to expand it if you wanted to go to another page within the same section.

    Is there any way for the menu to expand automatically when a page is loaded or perhaps get a version of the javascript that would expand a particular item. If the menu is two deep it would need to expand the two levels, etc, etc.....

    Thanks....Mike
    Last edited by EvM-Mike; Jul 12, 2004 at 11:24. Reason: clarify post


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
  •