Blog Has Moved
Tuesday, July 28, 2009
Since migrating my site to Drupal I now no longer use Blogger and hence my blog has moved here.
MenuMatic update
Monday, November 03, 2008
I just released MenuMatic 0.68 which has a few improvements and should be a little more efficient. Some of the improvements are:
- center option: A method I often use to center elements with css is setting the left to 50% and then the left margin to minus half the width of the element. This works really well when you know the width of the element is not going to change. But when your client has control to add or remove pages via a cms the menu width might change. So I added a center option to keep your menu centered even if the width of the menu changes.
- stretchMainMenu option: I renamed the menuWidth option to stretchMainMenu as that seems like a much more accurate name. Also I made it work much quicker. In case you have not used it, this option will stretch each link in your main menu until they fill the main ul or ol. So set stretchMainMenu to true and set a width on your main ol or ul in the css and you can simulate layouts that you can normally only achieve with tables.
- fixHasLayoutBug option: A few of you have run into Microsoft's hasLayout Bug, so if you find yourself troubleshooting a weird bug like the submenus all show up at the top of the window instead of by the link you are hovering over, then try enabling this option. It will force all the menu elements to have layout in IE, also all the parent elements of the menu since this is also important for getting accurate positioning. * Note I have not yet tested this, so if you end up using it please let me know if it works or not :)
- call-back functions: I added 18 callback functions to make modifying MenuMatic for different unique situations easier and faster. For example, if you need to do something right after a subMenu is positioned but before it is shown, you can use onPositionSubMenu_complete
- Google Code: I am now using Google Code to host MenuMatic so you can use the issue tracker there to report any bugs or submit feature requests. Thanks!
Labels: css, javascript, MenuMatic, mootools
|
| posted by Jason J. Jaeger |
32 Comments:
Hello,
Thanks for the great script, it has everything I've been looking for a drop down menu script. It works great in Firefox 3 (except the submenus are not transparent), but I have trouble running it in IE7 - the drop down works, but there is no rounded corners, no sliding of submenus (though the transparency works) and those are the features I needed. I downloaded the files and loaded the examples in IE; then I opened the live examples from your website - still, they were showing same thing. IE reports this error:
'MenuMatic' is undefined.
Am I missing something here or I should change something in the source code of the page or js file?
Thanks, your help is much appreciated.
I forgot to include second error message reported by IE7:
"Line: 349
Char: 1
Error: Expected identifier, string or number"
This line matches the following code in the source js file
var MenuMaticSubMenu = new Class({
I hope this will help. Thanks again
I found the reason for the second error - there was one extra comma, here
..._complete()},});var MenuMaticSubMenu=new Class({Implements:...
I removed it and the script works perfectly in IE.
Now if I could have rounded corners to work in IE, that would be great. Although, as I can see, you're using css for rounding effect, and as I know IE doesn't recognize these css properties. Any advice on this?
Cheeers
Hi Robert,
Thanks for the note about the comma.
As for rounded corners, I figured since rounded corners are not necessary I would go with the quick and easy method of using css. All other methods right now (using background images or canvas) can get pretty messy and/or complicated pretty quickly (mostly when making them work in IE). However the next major release of MenuMatic will have a rounded corner option which will make it super easy and will work cross-browser.
For now though using extra divs with background images might be the easiest way to go. For example you could use the onInit_complete callback function to insert the extra necessary divs and add the necessary css and images.
So the javascript would be something like this:
window.addEvent('domready', function() {
var myMenu = new MenuMatic({
onInit_complete:function(){
var allLinks = $(document.body).getElements('#'+this.id+' a, #'+this.subMenusContainerId+' a');
allLinks.each(function(item,index){
var tlc = new Element('div', { 'class': 'tlc' }).inject( item ,'bottom');
var trc = new Element('div', { 'class': 'trc' }).inject( item ,'bottom');
var blc = new Element('div', { 'class': 'blc' }).inject( item ,'bottom');
var brc = new Element('div', { 'class': 'brc' }).inject( item ,'bottom');
});
}
});
});
and the css would be something like this:
#subMenusContainer a{
display:block;
position:relative;
}
.tlc, .trc, .brc, .blc{
display:block;
position:absolute;
width:7px;
height:7px;
}
.tlc{
top:0;
left:0;
background: url( ../img/tlc.gif ) no-repeat 0 0 #fff;
}
.trc{
top:0;
right:0;
background: url( ../img/trc.gif ) no-repeat 0 0 #fff;
}
.brc{
bottom:0;
right:0;
background: url( ../img/brc.gif ) no-repeat 0 0 #fff;
}
.blc{
bottom:0;
left:0;
background: url( ../img/blc.gif ) no-repeat 0 0 #fff;
}
this is assuming you have some 7x7 corner images. Of course this will only add rounded corners to the links. Adding rounded corners to the ul or ol element itself would get more involved.
Hi Jason
congratulation for your work! vey nice.
I added a few lines on your program to apli style to the parent tag "li".
Sometime it necessary to aply a style to the tag "a" and "li"
//YB
$(this.btn).getParents('li').removeClass('mainMenuParentBtn');
$(this.btn).getParents('li').addClass('mainMenuParentBtnFocused');
It could be great if you do it as well.
Thanks
Hi Yves,
Thanks for the suggestion. I can see where applying styles to the list elements would be useful. I will probably include that in the next release.
-Jason
Hi
this is great -thanks!
One question!
I installed the latest version and only changed background colours for the main menu options.
In FF3.0.4, when I click on a main menu option, the whole menu shifts to the left and then moves back to the right before the next page loads.
It doesn't do this in Safari 3.1.2
Any ideas?
Thanks
Mark :)
hi jason
your instructions say mootools is required. so, what does this line do?
google.load("mootools", "1.2.1")
do i need to install mootools on my wordpress manually, before menumatic will work?
thanks
hi greengecko
vertical menu bugs?
in firefox and chrome, vertical menumatic, with javascript disabled, hovering when the mouse passes over any text BEHIND the menu causes the menu to close.
an apparent bug in Google Chrome (or in MenuMatic) makes the background image jump if mootools is missing, or with javascript disabled. i don't see this in ie or firefox.
am i seeing this right?
thanks
dude
it would be awesome if you would post all your menumatic js and css files on google hosting, so all we need is to put links in our webpage. if you don't include version numbers in the filenames, then we can enjoy new versions when they come out.
cheers!
Wow, this is really a great script!
It works perfect...
...but not with the lightbox "Multibox", which also uses mootools.
Anyone got a solution?
Hi Mark,
Are you using the center option?
If so, try moving the js to the top of your html this may make it fire faster so you don't see that movement.
If not, let me know (maybe sending me a link or a zip )
Thanks
-Jason
Hi Johny,
It looks like you figured out the answer to your first question. ;)
I would love to use google hosting in that way. But unfortunately it looks like they only have that kind of hosting for major javascript frameworks (someone please correct me if I am wrong on this). I tried actually using the google hosting I do have in this way (linking to it in the html instead of downloading it and linking to it locally). And it threw the stats waaay off. It registered as several hundred downloads in a few minutes :)
Also a regular google code account forces each new upload to have a new name (so I could not just have menumatic.js for instance and just update it regularly).
If anybody knows of a service that can do what the google ajax libraries api service does for mootools please let me know :)
---
When the MenuMatic js does not run (due to lack of mootools or js being disabled etc) Then all the submenus will have the exact same z-index as the main menu.. so in the vertical menu example I will give the #container a z-index of 2 and the #footer a z-index of 1. This will keep the submenus from going behind the footer text when js is disabled. It is really a page style issue rather than a MenuMatic bug, but thanks for catching it.
---
The background moving is also a page style/webkit rendering issue. The background image's vertical positioning is set to center, and when the js does not run the page gets longer and shorter as you show and hide the submenus. This moves where center is. Of course the container and the background image should move in sync imho since the container has a top of 50% but that is not how the webkit rendering engine renders it :)
Thanks for the questions and comments!
-Jason
Hi Lars,
Thanks! I believe that Multibox still requires mootools 1.11 while MenuMatic requires mootools 1.2
Perhaps somebody out there has a version of Multibox that they have updated to work with mootools 1.2?
Good Luck!
-JJJ
looking forward to the update!
if mootools is not getting loaded, what might be the cause?
in chrome, enlarging the browser text-size causes sub-menu items to get truncated on the right and bottom of the menu. have not tested other browsers...
Hi Johny,
A few things that might make the mootools library not load:
1. Might be conflicting with another library (for instance if you have mootools 1.1 and 1.2 on one page)
2. If a javascript error occurs before the mootools library is loaded it will prevent it from loading.
3. Of course if it is linked wrong :)
4. Or if you are linking to the google hosted version and it is down for some reason (I have never run into this, but hey it could happen).
Hi Johny,
That is a good point... MenuMatic sets the width of the subMenus in pixels, therefore it will not enlarge if the text size is increased.
However it does seem like browsers are moving to page zooming for the visually impaired over font enlargement. But I will make a note of it on my to do list anyways :)
Thanks
-Jason
Hey there,
I'm running into problem with IE6 (and to a lesser extent with IE7). We have pretty large menu (391 li's), up to 3 levels deep and loading a page that has it causes IE to freeze for a few of seconds.
We're loading the tree at the bottom of the page and then moving it to the top on domready.
I suspect IE is rather slow to inject elements into the DOM (though it's really just a wild guess). Would modifying menumatic to inject all of the elements it creates together, rather than iteratively, help much?
Any idea or hint is welcome.
Thanks
Please Please please please please make this a JQuerry plugin, I am having lots of troubles with JQuery + Mootools combination, on all Ie browsers while still using the jquery no conflict function.
@Vlad
Hi Vlad, is there any particular reason you are loading the tree at the bottom of the page and then moving it to the top?
And are you moving it from the bottom to the top and then creating a MenuMatic instance out of it or visa versa?
Obviously if you can reduce the number of time you manipulate the dom that will always help. MenuMatic does iterate through all the menu elements and moves the submenus to a hidden div at the very bottom of the html when a new MenuMatic instance is created. However this behavior is integral to the core functionality of MenuMatic.
Moving an entire menu from one place on a page to another though is something that you should be able to do to just the parent ul or ol element and so you should not have to iterate through each element to do that.
Either way, it would not hurt to make sure you are following best practices for speed boosting a site. Such as having well compressed images, combining and compressing javascript files and css files, and having your css files at the top of the html and the javascript at the bottom to name a few. You can read more at http://developer.yahoo.com/performance/rules.html
That is sort of generic advice I know, feel free to send me a link to what you are working on if you want more specific advice :)
take care
-Jason
@ alex
Wow that is a lot of pleases!
Hello again, I know I already responded to this question in your follow-up email, but I wanted to post my answer here to in case anybody else has the same need and finds this post thread.
Basically I would LOVE to create a JQuery version of MenuMatic but currently lack the time. It may happen in the future but not any time soon. If anybody reading this knows JQuery and Mootools and would like to contribute by creating a MenuMatic JQuery port please send me an email. Or if I receive enough funding via the donation link on the MenuMatic page then I will be able to afford to take the time necessary :)
Take Care!
-Jason
Is there a way to display the top menu link as selected/current (like .mainMenuParentBtnFocused), when the user is located at any page listed in the submenu of that top link?
Thanks
Yes you can by using server side language.
for ex.
someting in php would go like
scan through all the href attributes in the #nav menu, if href in nav menu matches the page's href (the url) then set class to that link .btnfocused (or whatever).
Theoretically should work, now i dont know if it will kept working when the user tries to manioplate the menu again.]
A lot simpler solution would be to create a new class that has the same css properties as the btnselected class and add that instead of the btnselected class to the the element you like. Thus when the user will use the menu again, it wont change.
I did that quite a while albeit only on the parent element link, and it did work (i havent used php but the guy who programmed it did it).
else you can do a jQuery function after the page initialized to look for a certain href tag in the page, (this can be set as an invisible id only used for this purpuse, you set it yourself) so if it matches the link will be changed to btnfocused.
Thats about all i can think off,but i'm sure there is a way to do via ASP.NET if you have that on your website.
Best Regards
(sorry idont know the funcitons exactly so i just told you what the steps are, you can get a programmer to write the functions, since i'm not a pro at jquery nor php).
Excellent script!
Is there a way to assign one color to each menu?
Ex. I have Company with sub menu, services with sub menu and contact, I want to be able to assign a color to services another color to company and one for contact.
Thanks for the excellent work.
I have been trying to get a lightbox to work on the same page that i have the menumatic script on and i can not get it to work to save my life, it seems like i can only have one or the other. Has anyone else run into this problem and has anyone found a solution? I would really love to hear what you have done.
By the way, i love your menuMatic script, it is awesome!!!!
Hey
I have discovered that you can manipulate the structure of the smOW div and add divs there using the jQuery library (alongside) the jQuery noconflict() rule. for ex i have added 2 new divs inside the .smOW div to make for some nifty images.
The amount of customization possible to this script even without using the mootools framework is fantastic.
Basically you take what the script gives you and then you modify it on the fly using jQuery, this is freaking awesome.
Here is the jQuery code i used to get this done.
$j(".smOW").wrapInner(" div class='subNavTop' div");
$j(".subNavTop").wrapInner(" div class='subNavBottom' div");
add the tags since blogger doesnt let me post html code
Posting because someone may find this useful
hey man, i have a question.
I used the above code to add 2 divs in the Code,
my head syntax is the following
mootoools library
jquery library
menumatic js
custom js based on jquery.
as my previous post i am trying to append 2 divs to the smOW div.
Now in firefox it works perfectly, however in ALL OTHER browsers it fails. Even in Google Chrome and Safari
Do you have any ideea why?
First, thank you for this great script.
Second, a feature request for the next edition:
Can you add an option to make the initial submenus activate on a mouse click instead of a mouseenter? Then any other menus would activate on the mouseenter as normal.
This would emulate the way many dropdown menus work - and also eliminate the sometimes annoying activation when you move your mouse to the top of the screen.
I figure this would be useful as an option for a lot of people - and, with my very limited knowledge of Mootools, I suspect it might be fairly easy to do.
Thanks again.
What the hell is this? My Antivirus detected as Trojan - "JS/IFrame.gen"
in your site.
@Armando
Yes the solution would be very similar to alex.d's answer to Robert.S's question. Add extra class names to the elements either on the server-side before the page renders or via javascript (probably before you create the MenuMatic instance). Then of course use css to style accordingly.
@Jared Coles
I have used MenuMatic with different lightboxes before with no problems (like milkbox and multibox (had to tweak multibox to work with mootools 1.2 though). I have also heard that greybox works as well. However I have received this question several times so I think I will do a post soon on the subject and set up some example pages.
@alex.d
I will take a look into that.
@Malcolm
Thanks for the suggestion I will definitely add that to the next release.
@Programmer
That is very odd. I am not seeing this nor am I seeing any signs my site was hacked.. (Tested on multiple machines with different security software)
Anybody else getting security messages?
Hi
I'm quite new @ js
Do you know how to rebuid the script to show subfolder from right to left?
Thanks!
maRIUSZ
Post a Comment
<< Home