It’s been a year since I first released UberMenu – WordPress Mega Menu Plugin. In that time it has sold almost 4,000 copies and continues to be an extremely popular WordPress menu solution. I’m so lucky that this plugin has had such success – it has allowed me to move my business to digital goods development full-time, which has been wonderful. I’d like to thank all of the great customers who have bought UberMenu, I truly appreciate it.
In the last year I’ve gathered a lot of insight into the menu process through my interactions with the many users I’ve supported. I’ve learned a lot about what features users make the most use of, what tends to cause confusion, common customization needs, and a whole lot more.
I’ve spent the last month and a half distilling this accumulated knowledge into what is now UberMenu 2.0, refining functionality and enhancing the feature set. My goals with UberMenu 2.0 have been:
- Increase the intuitiveness of the plugin
- Improve areas that tend to cause customer confusion
- Increase javascript efficiency
- Increase plugin extensibility
- Improve menu design, robustness, and flexibility
I’m very proud of the new UberMenu 2.0, which represents a huge time investment to deliver major enhancements. Here are some of the new features in UberMenu 2.0.
Enhanced CSS
The basic CSS structure of UberMenu has been torn down and rebuilt to provide an even stronger foundation for the menu. This means menus act more intuitively out of the box, and customizations are simpler to implement. It also means that UberMenu works excellently as a pure CSS menu with full-width submenus.
More Efficient Javascript
A stronger CSS foundation means less calculations in the javascript, which leaves us with a much lighter weight and more efficient jQuery plugin enhancing UberMenu. The javascript has also been rewritten as a jQuery plugin, implementing jQuery best practices. The upshot is that UberMenu now loads and runs faster than ever.
Full Width Submenus and Defined Columns
One part of UberMenu 1.x which was less intuitive than it could be was column formatting. Columns were sized entirely based on their content size, which led to some interesting corner cases. While these issues were easily resolvable via custom CSS, for users without a working knowledge of the box model, such strange behavior was frustrating and confusing.
In UberMenu 2.0, columns can be sized in two ways, on a per-submenu basis: naturally, or in grid based columns. In a natural layout, each column is sized to its contents, and each column may be a different width. This is great for single-row submenus. For multiple-row submenus, UberMenu 2.0 adds the ability to set a submenu to be full-width, and apply a specific number of columns to the submenu. These columns will be uniformly sized, and extend the entire width of the submenu automatically.
I believe this new system is much more intuitive and will provide users a much better experience when wrangling their submenus into the formats they desire.
Fully Responsive Menus
When designing Agility HTML5 Template, I spent a long while studying responsive design best practices. UberMenu makes use of that knowledge to deliver a responsive mega menu. As the viewport changes, UberMenu’s contents size intelligently to optimize display at each size. (Note this can be disabled for non-responsive themes).
iPhone and iPad Compatibility
Going hand in hand with the responsive mega menu enhancements, UberMenu is now even more compatible with iOS devices, delivering an intuitive user experience for responsive themes.
More Flexibility
Another goal of UberMenu 2.0 is to build in some of the most common customizations into the Control Panel, to avoid core UberMenu edits. Now you can:
- Customize dropdown animation speeds
- Trigger via hover in addition to hoverIntent and click
- Customize hover intent timing
- Disable image resizing
- Enable or disable loading UberMenu on registration and login pages
Fresh menu skins
Both design trends and my own design skills have advanced a lot in the last year. UberMenu 2.0 features refreshed menu skins, with progressive CSS3 enhancements. The designs are now cleaner and more modern (the old designs are still included for legacy use, if desired).
Watch for more menu skin options coming soon!
Rewritten Style Generator
The UberMenu Style Generator has been completely rewritten to make use of LESS via lessphp. This means more consistency and easier upgrades. The new Style Generator also has the ability to write your custom style to an external stylesheet rather than including the CSS in the site header (though that is still an option).
A note on backwards compatibility
In developing UberMenu 2.0, I’ve made every effort to maximize compatibility with previous UberMenu installations. All menu items and their options, as well as UberMenu Control Panel options, will remain intact. Unfortunately, some sacrifices had to be made in the name of progress. Because the underlying CSS structure has been enhanced, some types of customizations may no longer appear as desired and may need to be reworked – though in some cases they will no longer be necessary at all! Specifically, submenu positioning and column resizing may need to be readdressed. However, all previous class names and IDs have remained consistent to minimize the impact and make the transition for users from 1.x to 2.0 as smooth as possible.
Well, that’s about it. I hope UberMenu customers enjoy the upgrade! It’s been a long process getting to this point, and I’m very pleased with the results. Feedback is always welcome and will be considered for future releases whenever possible.
Thanks again to all UberMenu customers for your business!
I’ve purchased this menu few weeks ago and I love it. It is very easy to install, and even easier to customise. I have been looking for a free plugin but decide to buy this one and… UberMenu is worth every penny spent on it. Thanks guys for this plugin.
xx Anita
Thanks so much for your kind words! Glad you are enjoying the plugin 🙂
Chris
Oh!
So, you are the creator of the great Agility theme.
Agility is a beauty in its own rights.
This Uber menu is another beauty.
You are tempting me to use wordpress themes 🙂
You have added a beauty into the world of wordpress menus.
In the demo I have noticed that whereas all other menus do open up or drop-down smoothly but the Uber menu drops-down with a slight jerk.
I will always prefer a smooth drop-down- and that is of course my personal taste.
Excellent work.
Thanks for your kind words about both UberMenu and Agility! 🙂 Regarding the UberMenu dropdown animation, the smoothness of that animation is going to depend in part on your computer’s graphical processing power. Because the ‘UberMenu’ dropdown in the menu has extra graphical elements – namely a Google map and images – there may be some chop in the animation for processors that can’t handle the extra rendering load. For example, under normal circumstances that animation is very smooth for me, but if my computer is running a lot of applications at the time, the animation may appear choppy. Hope that helps explain it! 🙂
Best,
Chris
Hi Chris
Thanks for an awesome plugin 🙂 I am helping a friend install their menu, ad am trying to read through the Help manual at the moment but for some reason, the section after Javascript API doesn’t seem to be displaying properly at all (an open-ended tag maybe?)
I am using FF 11.0.
Thanks
Kind Regards
Flick
Hi Flick,
Yes, I’m aware of that issue – sorry for the trouble. It seems to be a browser bug with Firefox, actually. Everything renders properly in Chrome, Opera, Safari, and even IE. I spent a while trying to track down an error on my part, but didn’t find anything. Unfortunately the best solution for now is to simply use a different browser.
Best,
Chris
Hi,
I’m looking for the same menu of this website: http://www.alexandermannsolutions.com. I don’t know if UberMenu can do the same thing like the one in that site. If it can, I’ll buy UberMenu and install it on my website.
Thanks,
Nghi Tran
Hi Nghi,
While you could create that layout, UberMenu does not have that submenu hover capability out of the box (where you hover over a submenu item and it changes part of the submenu), sorry!
Best,
Chris
Hi, this is really a beautiful plugin. I want to use it on a multi-site installation, with eaxh site having the exact same navigation menu, but don’t want to go through configuring it for each site separately.
Is it possible to export the created menu along with all customization, so that it can be imported into a network site seperate from the main site?
If not, will it be possible to incorporate into a future release? Thanks!
Rich
Hey Rich,
Thanks, glad you like UberMenu! 🙂
At this point, that’s not possible, unfortunately. Hopefully in the near future WordPress will allow you to export only menus. It’s possible that for now you could just create a menu, export all content and import it into the other sites, but that is obviously suboptimal.
It’s possible that you could use the switch_to_blog function to pull the menu from a specific site (haven’t tried it). That’s probably the solution with the best chance of working and being maintainable.
Note that the single regular license from CodeCanyon does not permit multisite usage, just so you’re aware.
All the best,
Chris
Thanks for that info Chris.
Now I am not sure – should I then purchase one extended license to use on all network sites, or should I purchase one regular license for each of the network sites that I use it on?
Once I get the purchase done then I can see if I can apply your recommendations 🙂
Rich
OK, I see that there is no extended license available, so I guess I will be needing one regular license for each site…
Yes, that’s accurate, you’d need one regular license per site. Feel free to try it out with a single license of course, and if it works the way you want, purchase the additional ones.
Actually, you can probably do a proof of concept (loading a menu from a different site) before even purchasing the menu, to check whether that switch_to_blog idea would work.
Best,
Chris
Hi,
I would ask this in the support area, but envato disabled my account temporarily for a paypal issue, so I can’t get my license number. Anyways, I added this css to ubermenu to make the megamenu wider than the menu, as well as to float right.
#megaMenu{
float:right;
}
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item.ss-nav-menu-mega-fullWidth > ul.sub-menu.sub-menu-1{
width:750px !important;
max-width:none !important;
}
However, this broke the menu’s responsive features on the iPhone (presumably other devices too). Is there a way to tweak the CSS to still revert to responsive mode on mobile devices?
Thanks for any help!
Hi Josiah,
You’ll want to wrap any styles that only apply to the widest layouts in an appropriate media query.
If you have further questions, please post them in the forum once you are able to access your license key.
Best,
Chris
“Actually, you can probably do a proof of concept (loading a menu from a different site) before even purchasing the menu, to check whether that switch_to_blog idea would work.”
How would I do that? I have a client that wants UberMenu, but the theme they are using is “twitchy”. I’m concerned that it won’t play nicely with UberMenu.
That quote has to do specifically with using WordPress multisite and pulling a menu from a different blog. If you want to be as sure as possible that UberMenu will work with your theme, you should review the requirements, and check that your theme is properly coded and meets WordPress standards.
Best,
Chris
At that point you either settle for a simpler menu or scour the interwebs in search for tips and tricks to twist the WordPress menu system to function in the way you want it to. Of course, if you’re a coding legend you probably won’t have any problem, but for other mere mortals there is now a great solution: UberMenu 2.0.
I bought the plugin and I love it! I’m working on a major website for a big client. I would love to have 2 menus on the same page! I’ve created an image only menu using logos for menu buttons. But I want to create another menu using another set of logos.
Can you recommend another plugin where I can create another image hover logo menu on the same page as my uber menu?
Thanks so much!
Hi Joe,
Thanks, great to hear you’re loving the menu! 🙂
Unfortunately, I’m not aware of any other plugins that allow you to add images to the menu that way. Of course, there you can always accomplish it with CSS and background images if necessary.
Best,
Chris
Hi:
I am upgrading the menu on an older custom theme and am attracted to your plugin – looks wonderful but I did have a couple of questions. I see you don’t support Ie6 (I am so glad dropped off the map!!!!) and I could probably care less about ie7 but… how does this function in ie7, ie9 and ie10? Also – how is this for seo?
Thanks,
Leslie
Hi Leslie,
Apart from CSS3-specific style enhancements, UberMenu functions in the same in IE8 and IE9 as it does in other browsers. You can test out the demo in those browsers if you like UberMenu Demo.
As for SEO, UberMenu is a semantically hierarchical menu conforming to the standard nested UL submenu pattern. For SEO purposes, it’s recommended that you don’t exceed 100 links on your page – so you probably don’t want more than 80ish menu items in your menu.
Hope that helps!
Chris
Hi,
I love using using Ubermenu but have a small problem. I have created a Contact Us menu item in my main menu with content added by widgets (similar to the example). When I hover over the Contact Us menu item the submenu drops down fine, but when I click over the submenu and try to go back to hover over the Contact Us menu item again, the submenu has partially disappeared. I’m using Chrome.
Any idea what is happening?
Looks like you have some javascript from your theme or another plugin acting on the menu. Hopefully it can just be resolved by removing residual styling (see also: residual styling troubleshooting guide). If you have any further questions, please be sure to post them in the Support Forum – thanks! 🙂
Hi,
I am planning to purchase the menu plugin & use it with the Geo Themes, my question are:
1. Is the menu compatible with Geo Themes?
2. Can i put Geo Themes Pre-made widgets into Uber menu?
3. Are the sub-categories/sub-menu can be filtered based on selection, for example from your above menu & sub-menu of describing Sports. Lets say First three are defined under Menu, as Sports, Outdoor & Indoor. On Clicking Sports a submenu or list generates(Team, Snow, Extreme, Water) on the fly of all sports items list at the same time hiding/disabling others(Outdoor & Indoor), same if Outdoor selected… hides/disable others(Sports & Indoor). This should have to go on while selecting deep nested list links?
If my the 3rd question feature is not present, is it possible to be done you or by some developer as customization.
Thanks.
Hi Ashu,
1. Please review the GeoThemes Integration Instructions – because of the way their themes are coded (last time I checked), you need to edit the code a bit to make it compatible.
2. Yes. You’ll get the markup in the submenu. But whether or not they will look as expected style-wise will depend on how GeoThemes has coded them. You may have to customize the styles to make it look the way you want.
3. No. Submenu contents are static out of the box. It’ll look and work like the demo.
I don’t do customizations myself, but I am partnered with an excellent shop called WerkPress, and you can get in touch with them for customization assistance 🙂
Hope that helps,
Chris
Thanks Chris for such a quick reply. I will get in touch with Werkpress guys when my GoeTheme up & running. 🙂
You’re welcome! 🙂