UvumiTools

We fixed a z-index issue that made the menu to appear bellow elements with absolute positions. We already tried to fix it by apply a height z-index to the whole menu or to every item, but it didn't work, it broke the whole menu. The solution was to apply a z-index to each item when it is hovered, and remove it on mouseout

Hi!

Thx for the great dropdown menu you created!
It runs very smoothly.

However :

1) sometimes the complete menu ul is diplayed vertically a fraction of a second before the code turns it into a horizontal menu. Is there a way to hide this and only display the menu when all styles are set for all items in it?

2) sometimes (mostly in IE off course) the code doesn't run at all and the menu displays only as a vertical ul. What to do about this?

I hope this can be fixed, because I haven't found a mootools menu that can handle 3′rd level links like yours yet

Hi Arjen. Thanks for your feedback, it really helps.
The first issue, mostly visible in IE, is not due the script execution time, which is very fast, but to the page initialization delay. So even hiding the menu at the beginning of the script and unhiding it at the end won't help, because the script will still take some time before it starts executing. The only fix is to hide the menu with css from the beginning, and unhide it then:

put this in your css, where 'myMenu' is the id of the UL to transform in a drop down

#myMenu{
    visibility:hidden;
}

then initialize the drop down like this

new UvumiDropdown('myMenu');
$('myMenu').setStyle('visibility','visible');

This should work. The css will make the menu hidden from the beginning, and then we manually un-hide it after it has been transformed to menu. A blank space will still be visible in place, but at least it won't be the menu itself.
Make sure you use 'visibility:hidden' and not 'display:none' or the dropdown will fail to initialize.

Edit: I just tested and it works. Like I thought, you still have a big blank space for a second, but at least you don't see the menu.

We are currently working on a fix for IE8 right now and will post the update tomorrow. We might add this visibility fix directly into the code so you don't have to set visibility manually every time.

For the second problem though, I don't know, we haven't experienced that. Did you experience that on our site or working on your own code? Because any javascript error happening before the menu initialization will simply stop everything.

Olivier,

I implemented the css and javascript changes you suggested and indeed, the flicker of the menu is gone. Thx a lot!

As for the second problem I had:
I also thought it might be an error in other javascript on the page which could stop the initialization of the dropdown menu. But with exactly the same code, the same page mostly loads correctly with the full menu, .. but sometimes it doesn't. One would expect that an error in other javascript would cause the menu never to load correctly?

I'm trying to disable other javascript to see whether the problem persists.

I'll keep you informed.

Arjen

Arjen wrote

One would expect that an error in other javascript would cause the menu never to load correctly?

Yes, because javascript stops executing as soon as an error occurs. So if you wrote some code containing an error before the menu gets initialized, the menu will not load. If the error happens after though, the menu should still work.

If you want to debug scripts, I recommend installing the firebug plugin for firefox.

I think I found the problem. Some javascript for tooltips with mootools was apparently causing it. I had it load onDomready after your dropdownmenu and now all runs well!

Thx Olivier.

Hi,
This is a great mootools menu but unfortunately it dont work when javascript is off.

I like the super smoothness of this menu, that it adds the arrows automatically, that it deals with a plain unordered list instead of requiring the a's to be wrapped into span's, that the movement effect has two stages (fly out, drop down), that it is easy to style. Very smooth and really stands out.

Unfortunately it is rather ugly with Javascript turned off. If you could make it fall back to a a barely working drop down (without effects & arrows) a la Suckerfish or similar, it would probably be the best drop down menu available.

For now I will probably have to use Superfish & jquery although it isn't nearly as smooth, harder to install and harder to style. BUT it falls back to a working no-arrows drop down with JS turned off.

Still too many no-Javascript users around (~3-6 %).

How to set menu button width?
Maybe in css but how.

Hi Flynn. Thanks for the tip, I didn't know superfish, so many plugins outthere. It's nice menu indeed. Me jealous.
The way it looks without javascript is mostly due to how you setup your css. So I guess it could be done without rewriting to much code. We'll see what we can do.

You are right, it could be done with just the CSS.

I basically just carried over the styles from Son of Suckerfish http://www.htmldog.com/articles/suckerfish/dropdowns/ and it worked right away.

In the non-javascript version the sub menus were slightly misaligned, setting the padding on the a instead of the li cleared that. The non-JS version now looks pretty good but the JS version looks slightly different. Just need to work a bit on the paddings of the .submenu classes, li padding vs. a padding.

That was much easier than I thought, and if I manage to make it all look pretty I'll post my CSS tomorrow.

That's what I have so far. Without JS in IE6 it won't drop down and show only the first level, but no menu drops down in IE6 without JS. In IE7 without JS it only drops down 1 level (for a total of 2 levels), not sure why, it can probably be fixed rather easily. I've added a few comments and if you find the time maybe you can iron it out and use parts of it for your wonderful menu. One addition that I'd suggest for the JS part: In IE6 (with your JS turned on) the drop down will go over other items but not over select form elements. That is a well known IE6 issue it seems, and in jquery there is this http://brandonaaron.net/jquery/plugins/bgiframe/docs/ - I can live without that but it could round up your script.

/* this is the main UL element*/
.dropdown{
margin:0;
padding:0;
list-style:none;
border-bottom:1px dashed #ccc; /* custom style for my menu*/
border-left:1px dashed #ccc; /* custom style for my menu*/
font: bold 11px Arial; /* custom style for my menu*/
width: 100%; /* needed this for IE6 or the border-bottom would move to the top at the right part of the ul, that had no li's */
}

/* these are the inner menus*/
.dropdown ul{
margin:0;
padding:0;
border-top:1px dashed #ccc;
list-style:none;

/*added*/
z-index: 999; /* I have floats after the menu and IE's would appear below them without this */

}

/* these are all the LIs in the menu*/
.dropdown li{
margin:0;
/*padding: 5px;*/ /*putting padding on a instead*/
background-color: #fff;
border-right:1px dashed #ccc;
cursor:pointer;
text-transform:uppercase; /* custom for my menu */
width: auto; /* I wanted to have the first level li's width to adjust ... */
white-space: nowrap; /* ... to the menu text's width instead of being fixed width */
/*added*/
float: left;
}

.dropdown li ul {
position: absolute;
width: 120px;
left: -999em;
}

.dropdown li ul ul {
margin: -25px 0 0 121px; /* margin-top = font-size + ("a" padding x 2) + (border x 4) - at least in FF and Opera. In Safari it's 2 pixels too much, it would be -23px. margin-left = sub li width + 1 */
}

.dropdown li.submenu ul {
margin-top: 0; /* reset the top margin for the javascript version of sub menus */
}


.dropdown li:hover ul ul, .dropdown li:hover ul ul ul, .dropdown li:hover ul ul ul ul {
left: -999em; /* son of suckerfish style of hiding ul's. Screenreaders can read this unlike display:none */
}

.dropdown li:hover ul, .dropdown li li:hover ul, .dropdown li li li:hover ul, .dropdown li li li li:hover ul {
left: auto;
}

/* these are anchor in the menu, if you want to style them differently from the rest of you website*/
.dropdown a{
text-decoration:none;
color:#999;
display:block; /* added to have hover background colors for IE6, too, which doesn't know li:hover and to have the color cover more than just the text */
padding: 5px; /* put the padding on the a and removed from li. Otherwise the non-JS menu was a bit misaligned */
}

.dropdown a:hover{
text-decoration:none;
color:#000;
background-color: #eee;
}

.dropdown li:hover{
color:#000;
background-color: #eee;
}

/* these are the LIs that only belong to submenu*/
.dropdown ul li{
border:1px dashed #ccc;
border-top:0;
margin-left:-1px;
width:120px; /* The second and lower level li's should be fixed... */
white-space: normal; /* resetting the no-wrap from the top level li's */
}

/* these are the LIs that contains a submenu*/
.dropdown li.submenu{
background-image:url('images/expand_down.gif');
background-position:center right;
background-repeat:no-repeat;
padding-right:18px;
width:auto;
white-space: nowrap;
}

/* these are the LIs that contains a submenu and which are in a sub-menu themselve*/
.dropdown ul li.submenu {
background-image:url('images/expand_right.gif');
background-position:center right;
/*padding:5px;*/
padding: 0; /* padding on the a now */
width:120px;
white-space: normal;
}




Also with the above CSS in the JS-on version the arrow-right images now dissapear temporarily while being hovered.

P.S.: I am not waiting for a final solution from you BTW, just wanted to give you something to work with. It's good enough for me right now and after working a little bit more on the CSS I plan to include it into my Wordpress Theme Atahualpa http://wordpress.org/extend/themes/atahualpa . I would include credits to you on the theme's admin option pages and on my own site.

Wow thank you, that's awesome. I was going to work on it this week end, since I'm kinda busy on another project right now, but hey, there it is. I haven't tested it yet, but if you say it works, well I guess it does.
Yeah the reason it doesn't work in IE6 is because the non-JS version relies on the :hover css property, which in IE6 only works on anchors. I don't think anything can be done about that. Same thing happens on the superfish verison. Then for IE7, I'm sure it just needs some tweaking.
I'll give it a shot this week end and try to come with a working version to update on the website.

Thanks again, it will be a nice improvement

Hey Olivier, any news on that update?

I am having the trouble with IE8 and can't seem to use your initialization code to make it work.

Sorry I didn't have time to work on that this week end, had other stuff to finish.

Regarding IE8, I did try to fix it, because indeed, two of our most popular plugins are broken in IE 8 (this one and crop). I spent a lot of time trying to make it work with no success (I got the menu to position correctly vertically but not horizontally), and it turned out the only solution I found was to put this tag in the document head :

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

this tag tels Internet Explorer, if higher than 7, to render the page like IE7. So yes, it's more a hack than a real fix, but turns out it's the solution suggested by microsoft itself on the official IE blog (and in the browser itself, with the "Compatible mode" button, between the address bar and the refresh button).
The problem with IE8 is it's supposed to be compliant, but apparently, compliant doesn't mean "like the other browsers".
So in the end, in IE8, your page will look different from IE7 and IE6, but will still not look the same as the other browsers which produce the expect results.

We use this tag on the site and it seems to do the job. It pretty much activates that Compatibility Mode by default on the page, which is better than nothing. We thought there was no rush to post a note about it, since IE8 is till beta, but apperently we should update our plugin pages.

It seems now almost impossible to get a complex CSS design to work in IE6, IE7, IE8 and the other browsers. So I guess I'm going to use this tag a lot and not worry about IE8 in the future

Hello, I just noticed something

I'm using uvumi dropdown 1.0.1, and I keep stumbling into problems when I'm trying to implement other mootools plugins into my page.

I replace "mootools-for-dropdown.js" with "mootools-1.2-core.js" (because they are suppose to be the same code right?), and then the entire script false apart.

So I decided to look at the mootool-1.2.js and compare it with mootools-for-dropdown.js and noticed that your JS file is missing almost 100 lines compared to the core Mootools.js code starting at line 212.

Has there been a fix for this? At this time, I'm only able to use mootools plugins only from your site...

Did you check the dependencies in the requirement section on the plugin page? The dropdown needs Fx.Elements, which is not part of mootools-core but mootools-more : http://mootools.net/more
Then the reason our file is still shorter than the original core is because it does not include the full core. Some stuff, like the ajax requests or json, is not needed for the dropdown so we did not include them to try to keep the file as small as possible. You can build a custom core here http://mootools.net/core

Hi,

It seems that something wrong is with download package.

Demo page from download package displays dropdown only in case "Compressed Dropdown" checkbox was selected. But if "Uncompressed and Commented UvumiTools Dropdown Plugin" checkbox was selected instead demo page does not display the dropdown.

"Compressed Dropdown" checkbox and "Uncompressed and Commented UvumiTools Dropdown Plugin" checkbox are alternative, aren't they?

There is no problem, the demo uses the compressed version. If you don't download it, it's not going to work. You can download both, it's not a problem, they are two distinct files, and that's why they can't replace each other, they have different names and location. If you want to use the uncompressed version in the demo, change the file name in the script tag in the document head

Quote

If you want to use the uncompressed version in the demo, change the file name in the script tag in the document head

Of course, I did try this. But after changing

<script type="text/javascript" src="js/UvumiDropdown-compressed.js"> </script>

into

<script type="text/javascript" src="sources/UvumiDropdown.js"> </script>

demo page still does not display the dropdown.

Alright, my bad (actually, no, someone forgot to copy one file and it was not me). What happened is last time we updated the the dropdown, we forgot to copy the latest version of the uncompressed code. Now it's fixed. You can either download it again, or replace

this.menu.setStyles({
			height:'auto',
			overflow:'visible'
		});

at line 82, with

this.menu.setStyles({
			height:'auto',
			overflow:'visible',
			visibility:'visible'
		});

Sorry about. It's been like this for almost 2 weeks oops

in case of clickToOpen = true
I make this fix to apply click event only on real submenu.

What do u think about it ?

				//apply events to make the submenu appears when hovering the LI
				if(this.options.clickToOpen){
					li.addEvents({
						click:function(e){
							var issubmenu = (e['target'].hasClass('submenu')) || (e['target'].match('a') && e['target'].getParent('li').hasClass('submenu')); 
							
							// apply only on submenu
							if(issubmenu){
								e.stop();
								$clear(li.retrieve('delay'));
								this.showChildList(li,this.options.opacity);
							}
						}.bind(this),
						mouseenter:function(){
							$clear(li.retrieve('delay'));
						}.bind(this)
					});
				}else{
					li.addEvent('mouseenter',function(){
						$clear(li.retrieve('delay'));
						this.showChildList(li,this.options.opacity);
					}.bind(this));
				}

with good identation and bug fix for IE

Quote

//apply events to make the submenu appears when hovering the LI
if(this.options.clickToOpen){
li.addEvents({
click:function(e){
var issubmenu = (e['target'].hasClass('submenu')) || (e['target'].match('a') && e['target'].getParent('li') && e['target'].getParent('li').hasClass('submenu'));

// apply only on submenu
if(issubmenu){
e.stop();
$clear(li.retrieve('delay'));
this.showChildList(li,this.options.opacity);
}
}.bind(this),
mouseenter:function(){
$clear(li.retrieve('delay'));
}.bind(this)
});
}else{
li.addEvent('mouseenter',function(){
$clear(li.retrieve('delay'));
this.showChildList(li,this.options.opacity);
}.bind(this));
}

with good identation and bug fix for IE

//apply events to make the submenu appears when hovering the LI
if(this.options.clickToOpen){
	li.addEvents({
		click:function(e){
			var issubmenu = (e['target'].hasClass('submenu')) || (e['target'].match('a') && e['target'].getParent('li') && e['target'].getParent('li').hasClass('submenu')); 
			
			// apply only on submenu
			if(issubmenu){
				e.stop();
				$clear(li.retrieve('delay'));
				this.showChildList(li,this.options.opacity);
			}
		}.bind(this),
		mouseenter:function(){
			$clear(li.retrieve('delay'));
		}.bind(this)
	});
}else{
	li.addEvent('mouseenter',function(){
		$clear(li.retrieve('delay'));
		this.showChildList(li,this.options.opacity);
	}.bind(this));
}

Hm, why not, I'll test it. we already have a new version ready to go, but we are in the middle of server migration and other stuff, so it will have to wait a bit. FYI, you must wrap e.target inside $(). the event target is not automatically extended with the $ function, for memory reason, because most of the time, the target is not being used. While it's not a problem in Firefox because the original Element object is extended, it's an issue in IE.