Introducing MenuMatic
Tuesday, September 16, 2008
A couple of years ago when I got into web design I decided to make my own javascript drop-down menu based on the fact that I could not find one out there with all the features I wanted. Several versions later when I found and fell in love with MooTools I immediately rewrote it for mootools. I have been using this for websites for some time now and recently made some more improvements and decided to release it for download. I plan on making several more sweeping improvements in the not-to-distant future (sometime before the holidays hopefully).
I mentioned in a previous post that I would be releasing this script under the name MooMenu but after some googling I found that it seemed that name had been used so I finally settled on the more original name of MenuMatic.
Essentially MenuMatic takes an ordered or unordered list of links and turns it into a dynamic drop down menu system with loads of options. Some advantages of MenuMatic are that it is based on semantic xthml structure, it is completely keyboard accessible, and easier to use than CSS based menus alone since you can adjust the hideDelay option, however it is based on a keyboard accessible version of Suckerfish Dropdowns for users without javascript enabled.
It should be pretty solid but as always email me or post a comment if you find any bugs.
Labels: javascript, MenuMatic, MooMenu, mootools
|
| posted by Jason J. Jaeger |
16 Comments:
I really like your menu. but is there any reason you put js at the end in stead of inside the head tag?
I think it is better to have it in the head tag.
the link is to blogger?
@elivsparsley: There is actually. It helps the page to render faster.
I tried tweaking the css and javascript to allow a horizontal and vertical menu on the page.
The result works perfectly in FF, Safari, and Chrome but has an issue in IE 7. The first vertical menu flyout appears at the top of the page. Any suggestions would be greatly appreciated!!
Here's the code:
http://www.robintek.com/menumatic/
@Gary
Looking at your sample page I can tell you that only 2 small CSS changes will get you up and running.
1.You have a width of 190px set on the link elements inside of #vnav. You will want to change it so you are setting the width on #vnav itself. It looks fine now but if you add more than one top level link there you will see what I mean :)
2. The main issue you are having is caused by Microsoft's lovely HasLayout bug. You can fix this by setting a float of left to the list elements inside of #vnav. In other words:
#vnav li{ float: left }
Floated elements always have layout, and in this case it does not mess up the page at all. If you were having HasLayout issues in a situation where a float would not work you could always set a zoom of 1 (preferably within conditional comments since this is not standard CSS). Although this solution is less desirable.
One more thing to note: You don't have to make 2 modified versions of the menumatic class to have a vertical one and a horizontal one on a single page. All the necessary changes can be done via the options, so you could simply do something like this:
window.addEvent('domready', function() {
var hMenu = new MenuMatic({id:'hnav',subMenusContainerId:'hsubMenusContainer'});
var vMenu = new MenuMatic({id:'vnav',subMenusContainerId:'vsubMenusContainer',orientation:'vertical' } );
});
Hi Jason,
do you see any possibility to get the menu shown up over a flash object?
We have a flash presentation on our new website and the flyouts are covered by the flash movie!
Any ideas?
Cheers,
Sebastian
@Sebastian
When using flash on a page you must set the wmode or else the flash will not respect any z-index you have set up in your CSS. So try setting the wmode to transparent and making sure you've properly defined the position and z-index of the elements involved. Check out John Oxton's post about this situation.
If that does not work, I can give you more in-depth help if you post or email me a link to the page/site you are working on.
very very nice work here. i really like what you did with this menu system. I have had great results using this menu. One question about the vertical menu. is there any way to have the slideouts that are on the right all come out at the same height (y) instead of coming out to the exact right of each button.
@Jared
Thanks Jared. You should be able to get the effect you are looking for if you edit the source code of MenuMatic. If you change lines 809, 811, and 818 to:
this.childMenu.setStyle('top', this.options.tweakInitial.y);
and lines 832, 834, 843, and 845 to:
this.childMenu.setStyle('top', this.options.tweakSubsequent.y);
Then whatever value you set in the tweakInitial.y and tweakSubsequent.y options will be the top of the submenus. So for example:
var myMenu = new MenuMatic({
tweakInitial:{y:10},
tweakSubsequent:{y:10}
});
would make all the menus tops be at 10.
As a side note the next released version will have callback functions to make modifications like this easier (you wouldn't have to edit the source code of the class).
Thanks
-Jason
Hi Jason,
is possible use two (or more) UL "nav" in the same page?
I think that they must be a different id...can you help me?
Thank'you
@Davide
You can have multiple MenuMatics on one page but each id does indeed need to be unique. So you would just create a new MenuMatic instance for each ul like this:
var menu1 = new MenuMatic({id:'nav1'});
var menu2 = new MenuMatic({id:'nav2'});
etc
@Jason Jaeger
thank's for your help!
Now i have 2 menus....one use the vertical up and the other the vertical down!
With firefox no problem...but in IE the second menu (nav2) appears in the top of the page? Why?
I think that is the same problem of
Gary Jorgenson...but i can't do it!
Here's the code:
http://www.accountentando.com/riservato/
It is indeed the same issue as Gary was having... Microsoft's hasLayout bug strikes again! Anyways if you assign a zoom of 1 to the parents of the ul elements it should fix it for IE. So in other words:
div#header, div#navigation{
zoom:1;
}
Good work - just one thing - it is possible to have it on the same page as a lightbox/slimbox/whatever box code? Tried a load of different one's so far and it kills them all!
Actually, just found that Greybox works, but I'll leave my previous comment for future reference. Keep up the good work!
@Sam
Thanks for the note.
I just tried combining the slimbox example page with a menumatic example page and they both seem to work fine together for me. I would love to help but would would need to know a bit more info.. if you want you could send me a link to an example of a page where you are trying to integrate them.
Cheers
-JJJ
Post a Comment
<< Home