Menubar 4.2 and Superfish
WordPress Menubar 4.2 adds support for the FORCE_SSL_ADMIN mode (defining FORCE_SSL_ADMIN in wp-config.php makes WordPress require HTTPS for the backend). Thanks to David for the bug report and the beta testing!
The 4.2 version also supports the new Superfish template. Superfish is a jQuery menu plugin, written by Joel Birch, that improves a Suckerfish menu in many ways.
The Superfish template for Menubar 4.2 integrates Superfish to offer a dropdown menu with two much requested enhancements: first, adds a delay on mouseout before hiding the sub-menus, to be more forgiving of mouse movement errors, and second, indicates the presence of sub-menus by adding arrow images to the relevant menu items.
Superfish also adds animation of sub-menu reveal, and drop shadows for sub-menus in capable browsers (not IE6).
Other improvements: long menu names are not truncated, menu items can be right aligned specifying the class name right in the CSS class field, and four different color variations are available (red, yellow, green, blue); and, as usual, you can customize the template CSS according to your needs.
Menubar 4.2 is available in the WordPress Plugin Directory. To preview the new Superfish template you can visit the WP Menubar demo site, and to download it you can visit the template Download page.
Just discovered this and now starting to play with it on a client site. Seems great so far – many thanks for sharing with the WordPress community.
Quick question: I’m using the Superfish template, and I want my own colours. If I add a new CSS file (by copying ssf-blue.css to “mynew.css”, do I have to rename all instances of ssf-blue in the class names to “mynew”?
Hello ZigPress,
you are right, the class name must match the CSS file name. Of course you could just edit an existing CSS file, and change the colors.
Thank you for using Menubar!
Brilliant, thanks. It’s really coming together nicely. When it’s launched (December or January) I’ll send you the URL.
One further question: I’m using a really light coloured background, and I need my submenu indicator arrows to be a dark colour.
But when I open arrows-ffffff.png in Paint Shop Pro to make the triangles darker, it’s just a big white rectangle (no transparency)… can you give me some advice (or better still, an image URL)?
I’m sorry ZigPress, but the arrows magic is part of the Superfish jQuery plugin I integrated, I’m afraid I can’t help. Anyway I think the arrows-ffffff.png image is 100% transparent, and the arrows in it are white or translucent white. Maybe try a different image editor?
I’m new to Menubar. I just installed it today and I have some problems. When I select Page: A static page – it still just puts it as type PageTree!
Also the menu goes behind my content text so it’s not visible beyond one entry down.
Hello Barry,
only when you select All Pages in the Page dropdown, a Page type becomes a PageTree type. For the menu behind content issue, I think that’s a CSS problem, if you send me your URL I can try and find a solution. Please let me know!
Hi Andrea.
thanks for your reply. I found the problem, it was a css issue. I’m using Artisteer created theme. I edited the header.php file and included the wp_menubar code within a div and it sorted the problem, not 100% sure why as I’m not much of a coder – I’d imagine it’s applying the artisteer class art-nav settings which make it come to the forefront.
Two other questions.
1. I’d like to be able to keep most of the look of my artisteer menu – particularly the style of the tabs, can this be done?
2. What I really like about menubar is having a non clickable item as a heading. Is it possible to get the code for this part only?
Hi Andrea.
On my last point. I’ve added the Superfish ssf-blue.css to my live site http://www.makingapokerwebsite.com . Though it’s a very nice menu and I really love the non clickable item About, I don’t think the look fits in totally with the site. Any ideas you might have for it to blend in better with the site, I’d be glad to hear.
Cheers,
barry.
Hi Barry,
I’m working on integrating Menubar with Artisteer themes, keeping the looks of the Artisteer menu and the configurability of Menubar. If you wish you could be a beta tester!
Yeah that would be great Andrea
Yippee, that beta works andrea. Great work
Hi Andrea,
I’m using menubar with suckerfish (I altered the colors) menu on a new site of mine http://www.barryocallaghan.com . Once again the submenu (Poker Strategy dropdown) is appearing behind the main content in IE7, also IE8 in IE7 compatability mode, but this time I can’t seem to fix the problem. any ideas please?
Thanks,
Barry.
Hi Barry,
it looks like there is a known IE7 problem here. I tried searching for “IE dropdown behind content” and found many results, but I’ve not been able to find a working fix. Still trying!
Hi Andrea,
There is a very easy fix. I got it last night on my theme’s forum http://www.pagelines.com/forum/topic.php?id=332 from its creator. It involves a simple change to the menubar-template – in my case that’s the file ssf-red.css and you just need to add one line
.ssf-red-wrap {position:relative; z-index: 50;}
While we’re on this topic is there a way to get the dropdown to be the same width as its parent?
Hi Barry,
thank you for the fix! I’m going to add it to the Superfish templates.
To change the width of the dropdown, you can follow the instructions in http://www.dontdream.it/superfish-questions-answers but you’ll get the same new width for all the dropdowns, they won’t be matching the width of each parent item.
Thanks again for your feedback!
First, thank you… this is brilliant! I was wondering if you might have any plans to port the nav-bar style Superfish menu to work with Menubar… I could really use it, and would be quite happy to make a donation to see it happen
. Any thoughts?
http://users.tpg.com.au/j_birch/plugins/superfish/#sample4
(4th tab)
Thanks again so much!
Hi Mick,
the Superfish navbar is a much requested feature, and I hope I’ll be able to release it soon. Please stay tuned!
Lovely template. I do however have one problem on page load in firefox, the arrows of parent items will sometimes load again, causing the 1st-level menu items to change size and ugly shift in the whole menu. I can get round this by setting the list width of menu items but I would like to set just the parent width BEFORE the javascript is ran. Is this possible?
Hello Philippe,
I think it’s possible, but I can’t help you on this, because I simply integrated the Superfish script with Menubar, without delving into Superfish itself. Sorry!
Any news of this?? =D
Hi Hawdy,
unfortunately I’ve had very little free time lately, so the Superfish navbar is still in my to-do list… Sorry!
No problem! in your little free time, you still answered my question. thanks, and i will waiting for the navbar. But i still use your menubar in my wordpress site. Awesome dude! =D
Andrea, i want to change the default search box to lijit search box. can you please tell me which file i must edit? i thought it was on wpm3.php and tried to change search_ssf to javascript from lijit source, but it dont appear on menu. maybe i should try another files? thanks and sorry for my bad english..
Hi Hawdy,
you were right, wpm3.php is the file to edit. I don’t know if the Lijit JavaScript is compatible with the Menubar structure, but you could give it a try.
Hello – Great addition and well-written.
I have a beginners question. I need my bar to have three items centered across the bar. Right now they are all aligning left. Can I apply a “justified: full” property somehow – or make each box wider? The items in question are About Us, Calendar, and Contact Us on this page: http://aa-hc.org/
Thank you.
Hello Dave,
you could manually center your menu items in the navbar using the padding property, e.g.
.sf-blue {
...
padding: 0;padding: 0 0 0 150px;
...
}
Instead of 150px, you should enter the value that best achieves the centering result.
I like Menubar, even after introduction of WordPress 3.0 menu system, but I have a question:
Is there any way to make the menu stay within the screen area?
My menu has 13 categories that drop down under the Portfolio item. Each of those has 5-10 sub-items. I’m using the Superfish template and the last category items are close to the bottom of the screen at a 1024 x 768 resolution. The sub-items that drop drop down from there run off the screen, making them completely inaccessible. The menu collapses if you move your mouse away to scroll the page down and you can’t scroll down first because the menu bar goes off top of screen.
I solved the problem and thought I would share the answer in case anyone else is having the same problem.
First I found this Superfish plugin
http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test/index.html
I edited the wpm3.php file to call the supposition plugin, like this:
//
Lastly, I made two little changes to the superfish.js file as described in this thread:
http://old.nabble.com/Superfish-1.4.8-w–Supposition-td22889967s27240.html
Hope this helps someone!!
Hi Draney,
thank you for your feedback! I’m sure other readers with large menus will find your explanation useful.