Home > WordPress Menubar > Menubar 4.2 and Superfish

Menubar 4.2 and Superfish

October 25th, 2009 Leave a comment Go to comments

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.

Categories: WordPress Menubar
  1. October 27th, 2009 at 09:29 | #816

    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”?

  2. October 27th, 2009 at 11:51 | #817

    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!

  3. October 27th, 2009 at 17:09 | #818

    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)?

  4. October 27th, 2009 at 17:40 | #819

    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?

  5. October 28th, 2009 at 16:00 | #820

    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.

  6. October 28th, 2009 at 18:13 | #821

    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!

  7. October 28th, 2009 at 19:57 | #822

    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?

  8. October 28th, 2009 at 20:24 | #823

    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.

  9. October 29th, 2009 at 00:31 | #824

    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!

  10. October 29th, 2009 at 10:50 | #825

    Yeah that would be great Andrea :D

  11. November 1st, 2009 at 11:41 | #827

    Yippee, that beta works andrea. Great work :D

  12. January 3rd, 2010 at 14:57 | #828

    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.

  13. January 6th, 2010 at 00:16 | #829

    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!

  14. January 6th, 2010 at 12:23 | #830

    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?

  15. January 6th, 2010 at 15:30 | #831

    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!

  16. January 29th, 2010 at 18:34 | #832

    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!

  17. January 29th, 2010 at 23:59 | #833

    Hi Mick,

    the Superfish navbar is a much requested feature, and I hope I’ll be able to release it soon. Please stay tuned!

  18. Philippe
    May 8th, 2010 at 15:26 | #1152

    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?

  19. May 8th, 2010 at 23:05 | #1155

    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!

  20. Hawdy
    June 19th, 2010 at 10:38 | #1203

    Mick :
    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!

    Any news of this?? =D

  21. June 19th, 2010 at 16:34 | #1204

    Hi Hawdy,

    unfortunately I’ve had very little free time lately, so the Superfish navbar is still in my to-do list… Sorry!

  22. hawdy
    June 22nd, 2010 at 12:40 | #1208

    andrea :
    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

  23. hawdy
    June 22nd, 2010 at 18:47 | #1209

    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..

  24. June 22nd, 2010 at 23:55 | #1210

    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.

  25. July 18th, 2010 at 06:29 | #1235

    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.

  26. July 18th, 2010 at 17:55 | #1237

    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.

  27. draney
    July 30th, 2010 at 17:46 | #1270

    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.

  28. draney
    July 31st, 2010 at 00:14 | #1271

    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!!

  29. July 31st, 2010 at 01:02 | #1272

    Hi Draney,

    thank you for your feedback! I’m sure other readers with large menus will find your explanation useful.

  1. No trackbacks yet.

Spam Protection by WP-SpamFree