SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: Dropdown menu
-
Nov 29, 2003, 14:39 #1
- 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; }
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!
-
Nov 30, 2003, 06:59 #2
- 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.
-
Dec 19, 2003, 11:32 #3
- 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; } } }
Cross-Browser.com, Home of the X Library
-
Dec 19, 2003, 13:52 #4
- Join Date
- Nov 2003
- Location
- Thessaloniki, Greece
- Posts
- 79
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?)
-
Dec 20, 2003, 10:13 #5
- 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 itCross-Browser.com, Home of the X Library
-
Dec 20, 2003, 10:18 #6
- 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...
-
Jun 19, 2004, 16:34 #7
- Join Date
- Jun 2004
- Location
- bloomington in
- Posts
- 5
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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/
Originally Posted by MikeFoster
Last edited by ssalter; Jun 19, 2004 at 17:08.
-
Jul 12, 2004, 10:29 #8
- Join Date
- Apr 2004
- Location
- PA
- Posts
- 250
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by ssalter
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....MikeLast edited by EvM-Mike; Jul 12, 2004 at 12:24. Reason: clarify post
Bookmarks