PDA

View Full Version : [DHTML] Multi-level Effect Menu



blm126
09-13-2006, 02:24 AM
1) CODE TITLE: Multi-level Effect Menu

2) AUTHOR NAME/NOTES:Brady Mulhollem

3) DESCRIPTION: A horizontal/vertical menu that features many options. More on the demo page.

4) URL TO CODE: Demo and description are here (http://www.bradyontheweb.com/demo/ml_nav_demo/index.html).

jscheuer1
09-13-2006, 04:44 AM
In Opera 9.01 several of the effects cause the flyout to disappear and/or redraw when the mouse traverses from the trigger to the flyout. This is generally fixed by having some kind of delay onmouseout of the trigger before the flyout disappears. However, if you already have that, it probably has to do with Opera not recognizing that the mouse is over the flyout due to some style property applied to the flyout for a given effect.

Particularly bad were the two blind wipes for the horizontal menu. It also appears as though the border (or what looks like the border) of the trigger isn't considered as a part of the trigger and flyout for the purposes of determining if the mouse is still over one or the other of them.

A very ambitious menu. Looks like it shouldn't be too hard to either fix these items or disable them where they may cause problems.

ddadmin
09-13-2006, 05:38 AM
I agree with John. The script looks like it has a lot of potential, but as is, it's quite rough around the edges. For example, the submenus are not completely aligned to the triggering menu item, meaning you have to carefully move your mouse over to the submenu, or it will disappear on you. The way the submenus appear is just very jittery it feels.

Please keep us posted on further developments on this menu. It definitely has a lot of potential, with a better interface, and more importantly, improved submenu behavior.

blm126
09-13-2006, 11:25 AM
well. I updated it based on what you both said. The border is only 1px wide and I that is more of a browser issue so there was not fix for that. It was actualy intetional that they wouldn't line up so that was very easy to fix

ddadmin
09-13-2006, 06:46 PM
It definitely feels more "solid" now! I noticed with the multiple level examples (>2 levels), the sub menu don't automatically disappear when the mouse leaves the submenu. Is that intentional? I'd think most people would prefer that it did.

mburt
09-13-2006, 06:47 PM
There's an error on the horizontal-menu in FF though... I just tried it.

blm126
09-13-2006, 09:32 PM
I noticed with the multiple level examples (>2 levels), the sub menu don't automatically disappear when the mouse leaves the submenu. Is that intentional? I'd think most people would prefer that it did.
I was unable to reproduce this. What browser did you notice it in? Also was it a particular effect?

There's an error on the horizontal-menu in FF though... I just tried it.
What error? The only one I am aware of is the "double border". It is less an error than an annoyance.

ddadmin
09-13-2006, 10:00 PM
I was unable to reproduce this. What browser did you notice it in? Also was it a particular effect?


I was using the latest version of Firefox (1.5x). I think I found the culprit- if the submenu appears above the textarea, moving the mouse out won't trigger the submenu to disappear.

mburt
09-13-2006, 10:32 PM
The menu was sort of "shaking" when I tried it.

blm126
09-13-2006, 10:41 PM
The menu was sort of "shaking" when I tried it.
lol,read the page. That is one of the features!


As to the firefox/textarea problem. I have confirmed that this is only occuring in Firefox and it also happens in Firefox 2 beta 2. I plan to make a simple script to see if the problem is something I did or a firefox bug. I'm starting to think it is a firefox bug. However, a quick search of bugzilla didn't turn up anything.

ddadmin
09-17-2006, 01:08 AM
Hi blm126?
Do you anticipate updating this script soon for the aforementioned? Just trying to gauge when I should post this script to DD. Overall it's definitely a useful script.

shachi
09-17-2006, 08:18 AM
Kind of flickers before the menu appears.

blm126
09-17-2006, 05:13 PM
Hi blm126?
Do you anticipate updating this script soon for the aforementioned? Just trying to gauge when I should post this script to DD. Overall it's definitely a useful script.
Yes, I will be working on this and try to have a solution soon(at most 3-4 days, depending on how easy it is to fix). I am also going to take a look at the IE bug where dropdown menus appear behind form elements(and activeX, I think).

jscheuer1
09-17-2006, 06:39 PM
Yes, I will be working on this and try to have a solution soon(at most 3-4 days, depending on how easy it is to fix). I am also going to take a look at the IE bug where dropdown menus appear behind form elements(and activeX, I think).

The best looking solution to that IE bug is the iframe shim. It isn't all that hard. The trickiest part is applying it only when the browser is IE 5.5 through 6. I've done a number of these mods for simpler scripts.

http://www.dynamicdrive.com/forums/showthread.php?p=45170

blm126
09-18-2006, 12:31 AM
Finished Updating(beat my guess by days!). The link above has been updated(well actually the page). This version adds the following

Support for a couple more browsers
Workaround for the Firefox/textarea bug
IE iframe shim trick(thanks for the tip,John!)
Fade effect in IE
"plus" option
couple other bugs were fixed




Kind of flickers before the menu appears.

What flickers?

jscheuer1
09-18-2006, 04:33 AM
Looks much better. There is a bug in Opera where if you have a menu out and you go back over the arrow image on the trigger, the fly out disappears.

blm126
09-18-2006, 07:08 PM
Don't you hate when a fix for one browser bug requires a fix for another browser's bug? Almost makes me want to use browser detection. The link above has once again been updated(if you have viewed it before you may need to clear your cache) to fix the bug John pointed out. Here is the offending piece of code if anyone is interested


function ancestor(child, parent){
if(child==null)return false;//Saves checking elsewhere
//This is a fix for a Firefox bug *gasp*
//In firefox if e.relatedTarget(which is passed in as child) is a textarea the browser will error out if you even try to test for propertys. However, you can still compare it to another element
//Aparantly causes a bug in Opera!
var allc = parent.getElementsByTagName('*');
if(allc.length > 0){
for(var i= 0;i<allc.length;i++){
if(allc[i] == child){
return true;
}
}
}
else{
//IE5 does not support the * for a tag name so this is the backup
//http://www.dynamicdrive.com/forums/showthread.php?t=12341 Thanks Twey!
for(; child.parentNode; child = child.parentNode){
if(child.parentNode === parent) return true;
}
}
if(child.nodeType == 3){
//If child is a text node we need to run for the parent in Opera.
return ancestor(child.parentNode,parent);
}
//If we get here return false
return false;
}

Ideally, I would like to use


function ancestor(child, parent){
//http://www.dynamicdrive.com/forums/showthread.php?t=12341 Thanks Twey!
for(; child.parentNode; child = child.parentNode){
if(child.parentNode === parent) return true;
}
return false;
}

jscheuer1
09-18-2006, 07:22 PM
That's got it in Opera. The only thing that I think I would add is a delay for the disappearance of the flyouts. This would diminish the annoying tendency for them to disappear if you move the mouse outside the lines even just a slight amount while tyring to get it over the flyout.

The way this is normally done is to set a timeout delay for the disappearance of the flyout, and then to cancel it if the mouse gets back over the flyout.

ddadmin
09-18-2006, 09:05 PM
The only thing that I think I would add is a delay for the disappearance of the flyouts. This would diminish the annoying tendency for them to disappear if you move the mouse outside the lines even just a slight amount while tyring to get it over the flyout.


I was just about to post this suggestion too. I think adding a delay feature would make the menu a lot less "jittery". Anyhow, blm126, please let me know if I should go ahead now to post this script on DD, or if you are still in the process of updating some aspect of it.

Thanks!

blm126
09-18-2006, 09:21 PM
Not yet. I think I'll add a delay feature since you guys seem to think it is a good idea. Also, when I was working on it I noticed that my fix for Opera broke my fix for Firefox. I tried for an half an hour to come up with another solution, but this problem required a browser detect. Running the firefox code won't hurt any browser but Opera so browsers that are pretending should be fine. And if Opera or firefox do try and change the useragent then they will just have to deal with the related browser bugs. I don't see anyway around it. The firefox bug is just to strange.

blm126
09-18-2006, 11:02 PM
Ok, I am done adding the delay feature. I decided to add it as a switch option. The demo is near the end of the page. So to save you the trouble of asking dd, I am done updating for now(unless there is anymore bugs pointed out,but I doubt there will be).

ddadmin
09-18-2006, 11:47 PM
Looking good! I'm sure a lot of people will appreciate the delay feature. I'll be adding this script most likely on Wednesday, so any changes before then will be added in as well.

jscheuer1
09-19-2006, 03:18 AM
Not yet. I think I'll add a delay feature since you guys seem to think it is a good idea. Also, when I was working on it I noticed that my fix for Opera broke my fix for Firefox. I tried for an half an hour to come up with another solution, but this problem required a browser detect. Running the firefox code won't hurt any browser but Opera so browsers that are pretending should be fine. And if Opera or firefox do try and change the useragent then they will just have to deal with the related browser bugs. I don't see anyway around it. The firefox bug is just to strange.

I'm not sure exactly what all this involves or if you know of the quick and easy way to single out Opera, no mater what it is reporting itself as. Just in case you don't - Opera will always return true for window.opera - all others return false:


if(window.opera)
set conditions for Opera only

I will use this on occasion if Opera is the only browser that needs a certain approach in a script. It can and, has in the past been abused though. So, be careful how you use it.

blm126
09-19-2006, 11:29 AM
Opera isn't the problem. Friefox is. Opera is only a problem when the fix for firefox is used.

jscheuer1
09-20-2006, 03:07 AM
Well, then:


if (!window.opera){
FF fix code here
}

ddadmin
09-20-2006, 10:37 AM
Ok, script featured: http://www.dynamicdrive.com/dynamicindex1/blmmenu/index.htm :)

mburt
09-20-2006, 10:50 AM
Hmm... The horizontal link still flickers in the newest version of FF. It's an awesome menu though :)

blm126
09-20-2006, 11:15 AM
Well, then:


if (!window.opera){
FF fix code here
}
Thanks for tip, John.

ddadmin
09-20-2006, 09:01 PM
Just noticed a rather big bug in IE6. On the script page (http://www.dynamicdrive.com/dynamicindex1/blmmenu/index.htm), for the horizontal menu in the demo, if you move your mouse over the 4th menu item to reveal all 3 sub menus, move the mouse out, then back to the 4th menu item again immediately, all 3 sub menus are revealed and with blank data. In Firefox, this doesn't occur.

blm126
09-20-2006, 09:34 PM
An IE bug no doubt. I have found a rather hackish workaround, but it will suffice for now. I also fixed some typos in the help page while I was at it.

mburt:That is an option turned on and off through the use of the inaccessible switch. If you read through the page it states that.

ddadmin
09-21-2006, 12:55 AM
Great, that was fast. :) Ok, script on DD updated to the latest build at this point: http://www.dynamicdrive.com/dynamicindex1/blmmenu/index.htm

blm126
10-12-2006, 11:11 PM
v1.1 released!
Available at: http://www.webtech101.com/index.php?page=effect-menu
version with included documentation: http://www.webtech101.com/uploads/mleffect/mleffect.zip

Changelog

Feature Changes

Pure CSS backup menu. In most browers(Firefox,Opera,IE7) a dropdown menu will be produced without javascript
Sub menus are hidden by default and must be shown with "accessible" switch for IE6 without javascript
removed one of the effects(blink) for various reasons
Two new switches trail and left(details on linked page)
delay switch wait time has been increased


Code Changes

more CSS, less javascript
onload event handler modified to play nice with other scripts
IE conditional comment changed to not effect IE7 which does not need it
CSS almost completely re-written to work better and look nicer
Various bug were fixed
Browser detection removed(in favor of a try..catch)

ddadmin
10-13-2006, 12:03 PM
Looking good! I'll get to updating this script in the next few days.

jscheuer1
10-14-2006, 06:48 AM
This is becoming and looking to become an even more useful script. I applaud the emphasis on style over script to the point of the navigation being available to non-javascript enabled browsers. That is a really great move! Moving away from browsers detection is also a very good idea. However, try {} catch(){} is not usually required and will create problems in older browsers. The real use for try/catch, in my opinion, is for debugging a particularly difficult error. A better substitute for browser detection is object detection, sometimes also called feature detection. The classic example being:


if (document.getElementById)
var el=document.getElementById('id');
else if (document.all)
var el=document.all['id'];

Generally, anything that you can test for with try/catch can be tested for in this sort of way. Sometimes one needs to get a bit creative, like checking for the 'typeof' something before processing it but, this is also object detection and doesn't require any particular browser, just a browser that recognises what objects you are using and what objects you want to use in conjunction with them.

blm126
10-14-2006, 02:44 PM
Yes, I would rather use object detection, but I can't. I need the try catch to counter a Firefox bug(I did eventuallly find it in bugzilla, and has been open since Firefox 1). If a script even tries to use object detection on any property of relatedTarget(property of an event) when relatedTarget is a textarea Firefox throws a security error. That is why it was so hard to fix. How do you detect the problem before it occurs? My solution is to not try and wait for firefox to throw the error.

jscheuer1
10-14-2006, 07:25 PM
I'm not clear on this bug, could you supply a link to it at bugzilla? However, in FF, the type (comment, text, HTML element, whatever) of a node can be detected before anything else is done to or with it, so can its value - which must be null for it to be an element.

I realize that identifying it as the relatedTarget() may be too late for this sort of detection but, with a bit of thought (combined with the predictable flow of the code involved), a way could probably be found to identify and test it before it is accessed via the relatedTarget() object.

Once that is determined, it may become unnecessary to even use the relatedTarget() object.

blm126
10-14-2006, 08:15 PM
hmm...can seem to find where I had it bookmarked.With multiple computers and multiple browsers on each I may never find it. However, I have prepared a quick demo here (http://www.webtech101.com/uploads/dd/firefoxbug.html). This shows exactly what the bug does. As far as I can tell it occurs in every version of firefox I have (1,1.5,2 RC2). Simply move your mouse from the textarea to the div and back, and watch the errors pile up.

jscheuer1
10-15-2006, 04:09 AM
Hmm, that does on its face seem a good candidate for try/catch. However, it doesn't work at all in IE, even when you use window.event.relatedTarget. IE has mouseenter and mouseleave events (that don’t react to event bubbling), specific to that browser (from 5.5 on) that may or may not be of any use in this case. I am assuming that you've worked out a way to carry out the functionality for this in FF. If that is the case, that method probably could also be used by most other browsers, eliminating the use of both relatedTarget and try/catch.

I'm thinking that this could be real useful in preventing a sub-menu from disappearing if its trigger is moused out but the sub-menu itself is being moused over and visa versa. A variable timeout delayed disappearance function that gets cleared by the appropriate subsequent mouse over(s) can accomplish this same thing. Were you using it for anything else?

blm126
10-15-2006, 03:02 PM
However, it doesn't work at all in IE, even when you use window.event.relatedTarget. IE has mouseenter and mouseleave events (that donít react to event bubbling), specific to that browser (from 5.5 on) that may or may not be of any use in this case.

IE supports window.event.toElement(mouseout) and window.event.fromElement(mouseover) that the same thing as relatedTarget. That is what I am using in the full script.

I am assuming that you've worked out a way to carry out the functionality for this in FF.
Yes and no. When I was using browser detection I had another version that still used relatedTarget, but did not try and access any properties. This avoided the bug in Firefox.

If that is the case, that method probably could also be used by most other browsers, eliminating the use of both relatedTarget and try/catch.
That was what I originally did until I found out that it didn't work in Opera.(or IE5, but I don't worry about that browser)


I'm thinking that this could be real useful in preventing a sub-menu from disappearing if its trigger is moused out but the sub-menu itself is being moused over and visa versa. A variable timeout delayed disappearance function that gets cleared by the appropriate subsequent mouse over(s) can accomplish this same thing. Were you using it for anything else?
That is exactly what I am using it for.The timeout is something I hadn't thought of will look into.

jscheuer1
10-15-2006, 03:24 PM
This setTimeout/clearTimeout scheme is used with many of DD's menus. An example is in AnyLink Drop Down Menu:

http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

The code is a little confused (I didn't write it) because the (e) parameter is included in some of the functions but, not used by all of the functions it is included for and things are a bit more complex than necessary.

The basic idea is:

onmouseout="disappear_var=setTimeout('disappear_function()', 20);"

and:

onmouseover="clearTimeout(disappear_var);"

RobinMalott
10-16-2006, 12:27 AM
Hi - love this script! Any chance there's a way to make the horizontal one go up rather than down? I would like the menu towards the bottom of my page.

Thanks!

blm126
10-16-2006, 12:54 AM
Currently, no. Sorry

ddadmin
10-17-2006, 09:58 AM
Ok, I may have found a bug in IE6 with version 1.1 of the menu. The steps to producing the error is not always the same, but here goes. On your demo page (http://www.webtech101.com/index.php?page=effect-menu), I've been moving my mouse over the first two menus' "browser" menu link back and forth. Every now and then, IE6 will throw a loop of errors to the effect of:


Invalid argument
Char 2
Line number 198

The error can only be dismissed if I reload the page, as it loops.

blm126
10-17-2006, 08:00 PM
I managed to reproduce this by moving the mouse wildly in the general direction of the menu :) IE was just having a fit again. Everything is updated(I hope)

ebsboards
10-20-2006, 08:59 PM
Brady- I have a few questions - is your website working? I tried to access bradyontheweb.com but it will not come up?

blm126
10-21-2006, 02:21 AM
Yes, it is. However, there isn't anything there probably isn't anything there to interest you. Check out my web design site, http://www.webtech101.com

ebsboards
10-22-2006, 01:04 PM
I love your script and have a few questions - I have downloaded your menu and am interested in creating a template for a site I am working on where it would stay in set in place and not move in the following look - http://www.entertainmentbookingsource.com/test.html.
as you will see from that page example, when you resize the page the original menu script I tried to use there moves all over the place and does not stay set with the rest of the site (justified left to right within the framework). I just dont know how to overcome that.
That is why I am coming to you for assistance and potentially to use your script.
What do you think.
Thanks in advance for any feedback you can give

(I also posted a comment on your other page - http://www.webtech101.com/index.php?page=effect-menu, not sure if you see that comment also)
Thanks!

blm126
10-22-2006, 01:41 PM
My script should be fine in place of that one.

ebsboards
10-22-2006, 01:46 PM
ok great - i am going to try to plug your code in today and see what happens. i will report back today. thanks for the assistance.
i will probably have a few more question.
Thanks!:)

ebsboards
10-22-2006, 10:23 PM
Hello again - second question - how can I change the font to Aria or Veranda and 10pt? When I try to change the font it puts spaces between the drop down rectangles?
Thanks again!

ddadmin
10-23-2006, 06:30 AM
Ebsboards:
For future reference, please post a new thread in the "DD scripts Help (http://www.dynamicdrive.com/forums/forumdisplay.php?f=2)" forum when asking a question, instead of replying here. This section is mainly for the submission and updating of new scripts.

ebsboards
10-23-2006, 06:35 AM
FYI - On the page where the script is located on DD - if you click on the Contact button for the author of the script it takes you to THIS thread. Maybe that should be adjusted if you dont want people posting there? Just a thought....
I have been getting feedback here from the author of the script and hope to continue receiving guidance here from him if possible.
JA

ddadmin
10-23-2006, 06:58 AM
Ah you're right, I can see how that can be confusing. This thread was the most logical place to link to get an overview and view updates posted by the author, but for people who need support, it's always implied that one should post in the DD scripts help forum instead.

blaszta
12-19-2006, 03:00 AM
Hi, I found a bug for horizontal menu in IE 7 (the vertical one is ok, I think). In IE7 the child menu will be shown far to the right so it will display under the next menu item.

I know IE7 is quite troublesome and even my own website doesn't fully supported it :D

blm126
12-31-2006, 10:27 PM
Hi, I found a bug for horizontal menu in IE 7 (the vertical one is ok, I think). In IE7 the child menu will be shown far to the right so it will display under the next menu item.

I know IE7 is quite troublesome and even my own website doesn't fully supported it :D
Sorry it took me so long to get back to you...Was this the version on my site, or the version on dd? I was unable to reproduce this on either.



dd:Could you update the script to 1.1? I made a really stupid typo in the first one, and I have had a quite a few emails about problems it causes.

toddly
03-17-2007, 12:25 AM
Hi,
I was thrilled to stumble upon your superb menu. For it to function best for me, I need the submenus to have a slightly different hue from the parent. I am thinking that one way to do this would be to have the whole menu be slightly transparent, so that the color of the submenu would show thru some of the color from the neighboring cell (when the menu pops out) and thereby create a new hue distinct from the parent menu.

Or, preferably, if the code could somehow distinguish between the parent menu and the submenus, then different colors could be specified for the parent and the submenu. However, it looks as if you created an extremely simple and pared down code that does not make such distinctions. Would it be possible to add something benign to the code to make the program distinguish between the two? Or, alternately, would it be possible to make the entire menu slighlt transparent?

Thanks, and thanks again for your very fine contribution to the menu world.

Toddly