Updated 27th November 2011
The jQuery Floating Menu plugin allows you to add a floating, sticky menu containing important links to your WordPress site. These menus can be created from any WordPress 3.0 custom menu.
This WordPress plugin can handle multiple floating menus on each page and has many options to customise position and features, which are easily set via the widget control panel. The menu can also be toggled open/closed via external links inserted using shortcodes.
Demo jQuery Floating Menu
WordPress Floating Menu Plugin Demo
Download The Plugin
Download Floating Menu 1.4 (22,909)
Installation
- Upload the plugin through `Plugins > Add New > Upload` interface or upload `floating-menu` folder to the `/wp-content/plugins/` directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- In the widgets section, select the Floating Menu widget and add to one of your widget areas
- Select one of the WP menus, set the required settings and save your widget
Useage
In order to use the floating menu plugin you will need the following:
A WordPress custom menu
Either use an existing menu or set one up via the menu option in WordPress admin.
Widget area
Location of the actual widget is not important since the plugin automatically sets the position based on the control panel settings. You can therefore add the floating menu to an existing widget area in your WordPress theme or create a new widget area.
To learn more about adding widget areas to WordPress see our WordPress tutorial – “Adding A Widget Area To Your Theme Files”.
Create Your Floating Menu
To create your floating menu go to the widget admin page and drag the “Floating Menu” widget to the desired widget area. Select your custom menu from the drop down list in the widget control panel.
Click “save” to activate the widget.
Configuring Your Widget
The floating menu can easily be customised using the options available in the widget control panel:
Event:
Open/Close the menu using either ‘hover’ or ‘click’.
Tab Text:
Enter the text that you would like to use for the menu tab.
Width:
Set the width of the menu in pixels
Location & Aligment:
The position of the menu in the browser window is determined using its location (either Top or Bottom) and aligment (left or right). The location also changes how the menu slides out:
- Top Left or Top Right – menu slides down
- Bottom Left or Bottom Right – menu slides up
For each one you can also add the number of pixels that you would like to offset the menu by from either the location or alignment in the text box next to the drop down list. The default offset for both location and alignment is 10px.
E.g. To position a menu 50 pixels from the top and 100 pixels from the right you would use the following settings:
Set Alignment from Center
check this box to position the menu based on the center of the browser window as opposed to the sides. The alignment value now becomes the number of pixels left/right of the screen center.
This option allows you to fix the position of the menu even when the browser resolution changes.
Floating Speed:
The speed in milliseconds for the menu floating animation (i.e. the time it takes to “catch up” when the page scrolls up or down) – e.g. to set the floating speed to 1.3 seconds use 1300.
The default speed is set to 1.5 secs.
Animation Speed:
The speed in milliseconds to open and close the slide out menu.
The default speed is set to 0.6 secs.
Auto-Close Menu:
If checked, the menu will automatically slide closed when the user clicks anywhere in the browser
Keep Open:
If checked, the menu tab will remain open at all times.
Disable Float:
Check this option to disable the floating animation – menu remains in fixed position in browser window.
Skin:
8 different sample skins are currently available for styling the floating menu. Since there are no essential styles required to create the floating menu, these can easily be used to create your own custom menu theme.
Note: If you use one of the skin CSS files to create your own style please remember to copy the CSS to your theme folder as all files in the plugin folder are automatically deleted when the plugin is updated.
Shortcodes
The plugin includes the feature to add text links within your site content that will open/close the floating menu tab.
[dcfl-link] –
default link, which will toggle the floating menu open/closed with the link text “Click Here”
[dcfl-link text="Open Menu"] –
toggle the floating menu open/closed with the link text “Open Menu”
[dcfl-link action="open"] –
open the menu with the default link text “Click Here”
[dcfl-link action="close"] –
close the floating menu tab with the default link text “Click Here”
[dcfl-link action="close" text="Close Floating Menu"] –
close the floating menu with the link text “Close Floating Menu”
Frequently Asked Questions
Also please check out our Frequently Asked Questions for the Floating Menu plugin.
Many issues that can crop up with installing and using the plugin with different themes have been covered in our comments section. Please check previous comments for further information/tips.
Demo jQuery Floating Menu
http://designchemical.com/lab/demo-wordpress-jquery-floating-menu-plugin/
Download The Plugin
Download Floating Menu 1.4 (22,909)
If you liked the jQuery Floating Menu Plugin you should also try out:
WordPress Slick Menu Plugin
Sticky tabs with slide out menus.
WordPress Slick Contact Forms Plugin
Quickly and easily add sticky or floating, slide-out contact forms to any widget area. Fully customisable with email validation, optional required fields & animated error messages.
Feedback
If you find this plugin useful please take the time to rate it at wordpress.org.
If you have any problems or suggestions on how we can make the plugin better let us know via comments, email or our online contact form.
Donate
We develop & support all of our plugins for free. If you use this plugin and find it useful please consider a donation as a token of your appreciation
Screenshots
Widget in edit mode
Updates
Version 1.4 27th November 2011
- Added: option to set position based on center of screen
Version 1.3 25th October 2011
- Added: disable floating animation option
Version 1.2.1 13th September 2011
- Fixed: validation error
Version 1.2 11th June 2011
- Added: shortcodes to create external links to open/close floating menu tab
- Added: 4 new CSS skins
Version 1.1 16th May 2011
- Added: Option to keep menu open at all times
total
twitter
facebook
google +1
linkedin
stumbleupon
digg
delicious
pinterest
reddit
Hello,
Float menu is a great plugin. It is stilish and very useful. The plugin is working great but as soon as I activate Nivo Slider for WordPress the menu is not floating anymore.
I do not have knowledge about php, js and css and if you have time to investigate the problem please give me a hint in order to use these two plugins together.
Many thanks, M
Hi,
The Nivo slider plugin used to have a problem as it loads jquery a second time. Im not sure whether the plugin author has fixed this yet
Is it possible to add a search box to the floating menu?
Hi,
You would need to add the code manually.
Hi – I’m still having trouble with the menus not loading for a few seconds, leaving all the contents visible in the sidebar. Occasionally, with a slower speed connection, the menus don’t load at all. Is there a way that I can adjust the order of loading perhaps? I find the menus really elegant and useful, so I would like to get them running smoothly.
Thanks in advance for your help.
Jim
This is a great menu! I am still having the ghosting problem when the pages load. This is an intermittent problem, but when connection is a bit slow, it shows the menu items as they would be in a normal menu, just for an instant before the floating menu loads.
Any thoughts?
Your demos show the text within the menus justified at the left. My menus have text centered. How do I get them to justify left?
Also, when a page loads, there is an instant where the menu text shows like it would in a basic menu. It just flashes for an instant – I wonder if it is just taking a minute for the script to get up to speed.
Please help.
This is controlled by your theme’s style sheet. On line 24 of style.css you have the body tag set to text-align: center, which centers all content on the page
Thanks a bunch. This is a great menu! I am still having the ghosting problem when the pages load. This is an intermittent problem, but when connection is a bit slow, it shows the menu items as they would be in a normal menu, just for an instant before the floating menu loads.
Any thoughts?
Great Plug In! I have been searching all over for this feature and it works very well.
I was wondering if it is possible to adjust it to stay on the top and go across the entire page. I have tried with the positioning and changing the pixel width but it seems to glitch and not display the entire color properly. I would like to have this menu function :
http://carterdigital.com.au/
Can I adjust your widget to work like the navigation on this site when you scroll down?
Hi,
Yes but not directly using this plugin. It would probably need additional custom code to handle it.
For the full width make sure that the background color is set in the CSS. If you are using a sample skin some use background images, which have a fixed width
Hi Lee,
I have one question (maybe you were already asked about this but…) – how can I edit this plugin to make them floating as Slick Social Buttons – i mean: if you are on a very top of website slick social buttons have margin-top adjusted to theme and margin-top is higher then when you slide webpage down – than margin-top of slick social buttons is fixed and is lower. If i want to have i.e. logo and header image i would like to have floating menu under that so margin-top has to has higher value, but when i slide down page i want to have float menu with margin-top i.e. 100px form the edge of browser. How can I do that?;)
Hi,
You need to add custom jQuery code as the plugin doesnt have the feature built in. The code below is what we use for the social buttons so you can adapt this for the menu:
$(window).scroll(function(){ var fl = $('#dcssb-float'); var offset = fl.offset(); if(offset.top > 178){ $('#dcssb-float').stop().animate({marginTop: 0}, 500,'easeOutQuint'); } else { $('#dcssb-float').stop().animate({marginTop: '148px'},500,'easeOutQuint'); } });Thank you very much for quick reply! I’ll try to do something with this piece of code
Hi,
It looks like your footer file contains the wp_footer() function twice
I absolutely love this plugin, but is there any way to have grandchild level menu items slide out or drop down?
Hi,
Unfortunately there is no built-in feature in the actual plugin. You can add custom jquery to handle this though. The following tutorial gives some quick/easy code for adding accordion effects to a menu:
jQuery Tutorial – Simple Vertical Accordion Menu
Hello dear, I need change the jQuery Floating Menu background to orange color, I like me know if it is possible? I revised the CSS but I no understand
Thanks for support
Hi,
I suggest that you use one of the skins as a starting point for the CSS and just change the settings in there. Background colour is changed using the “background” parameter. This does require some knowledge of CSS though
http://www.jtricks.com/javascript/navigation/fixed_menu.html
to make it like this…
sorry for double post.
i really please to know how to make position:absolute in this plugin
I have added it to the new update – see version 1.3
hi.
thanks for this plugin.
how to make this plufin fixed and dont have animate movement,
please
hi,
The current version of the plugin doesnt have this feature although this is something we can look at adding for future updates
I was wondering if it’s possible to replace the menu items with images. For example, on this website she has replaced her static navigation menu items with images:
http://www.deconstructingthehome.com/
Could I do the same, except obviously with the Floating Menu? If so what kind of code would I need to do that. Please keep in mind that I am so not a coder (it’s on my mammoth list of things to learn), so I apologize ahead of time for my ignorance.
Thanks so much for the amazing plugin and any help you can provide!
Hi,
You can do it using CSS and background images and apply the images this way. There may also be WordPress plugins, which allow you to insert images into WordPress menus.
The CSS isnt too difficult to learn though – just check for any tutorials on CSS background images
For those of you checking this who’d like to know a solution to adding images to the menu, this is what I ended up doing. I followed some instructions that were left in the comments to this post:
http://mike-thomson.com/blog/?p=290
and added this code in the field of each menu item within the custom menu:
I had to play around with the margins to get all of the items aligned correctly, and one of the larger images isn’t aligned right no matter what I do, but it still looks pretty good and will have to do until I actually go live with my site and can get help from another forum. When I finally do that I will update with comments here. OR, if someone else has a better solution please feel free!
Lee,
I do have another question, how do I get rid of the “Menu” text at the top? When I inspect the element with Firebug I see the following:
Menu
With what code do I get rid of this and what file do I add it? I use the Thesis theme framework, so I’d imagine something added to the custom.css file, but what? I really have no idea how to do this, sorry.
Also, when I hover on the Categories item, the two test categories I have drop down which is great. But, they appear behind the next menu item until you actually hover over them. Any ideas how to make them show up over other menu items on hover? Maybe I should just ask about this stuff on the Thesis forum, but I figured I’d try with the actual plugin author first. Thanks again so much for your time!
Whoops, that part about what I saw in Firebug when I inspected the “Menu” element didn’t show up right. I didn’t notice your kind, “To add code to your comments wrap the code text in tags" before I stupidly clicked the "Post Comment" button, apologies!:
…even. Boy, I’m looking like a first class idiot.
Sorry about everything I wrote up there. Sheesh, was NOT thinking clearly due to some serious back pain. Anyways, I’m nearly there with this thing.
Looks like I made the mistake twice with displaying code. For those of you looking to add images, add your version of the following to the Navigation Label field when creating your custom menu in WordPress:
To remove the “Menu” text, or whatever the title happens to be, add the following code to your theme file, in my case for those Thesis users, the custom.css file:
.custom #dc-floater-3 .tab span { display:none; }Now I just have to figure out how to get those categories to drop down correctly. *sigh*
Not sure why this plugin wont work with my theme. I have tried adding it to every widget area I have, and it still wont display a floating or slide out concept. When I add it to any of my widget area, my menu appears in that widget area just broken up. Anyway I can fix this? Please, I would really like to use this plugin. Thank you!!
Great job on it by the way! It is an amazing plugin!
http://www.itconflict.com
Hi,
The problem can either be caused by jQuery being incorrectly loaded again by another plugin, the wp_footer() function is missing from your theme’s footer file or if there is a javascript error on the page before the menu initialises this may also stop the code from running
Hi, how do I delete you plugin? I tried it through dashboard and it would not delete. What can I do?
Hi,
If you are unable to delete via the plugin admin page you can just delete the plugin files on the server
hi, nice plugin.. it works but i’m having issue with my footer area… when the plugin is activated, you can see the menu replicate it self in the footer area in a full width.. here is the link http://postmypet.net.
i hope you can help me resolve the issue. thanks, im using classipress.
Hi,
It looks like the theme files may have the wp_footer() function included twice as the widget code is being added 2 times to the footer – only way this can happen is if wp_footer is called twice. Check your footer.php file
Hi Lee –
Thanks a TONNE for the super awesome plugin this thing saved me a ton of headache… and solves a great many of my probs.
ONE twist though – like Max has mentioned aboeve the plugin works solid on home page. BUTT – the plugin disappears in single posts and on other pages…
You said make siure the widget area is present… I guess it is because everything else is showing sidebar and all – then why is the plugin not showing?
PLEASE HELP>>>>>
Hi
Seems to be working OK now
I was wondering if someone could tell me what code in which file needs changed to adjust the menu content & bg so that it drops down from the right side of the menu item, as I would like the menu items below to remain visible. Thanks!
Hi,
You will need to edit the CSS files. Create a copy of one of the skin CSS files and use this as the template. Make sure you put any custom CSS in your theme files and not in the plugin folder as this would get deleted whenever WordPress updates
I really like the looks of the menu, but is there a way that it wouldn’t be floating?
Hi,
If you dont need the floating effect then you can just use a standard menu list without any plugin and used fixed positioning in the CSS so that it stays in one place.
You wrote “If you dont need the floating effect then you can just use a standard menu list without any plugin and used fixed positioning in the CSS so that it stays in one place.”
Could you please explain how to do that? Sorry if I’m stupid, I’m new to all this…
Thanks in advance
Hi,
That’s not really covered by the plugin. Check online for how to apply “fixed” positioning using CSS
Thanks mate, I figured it out now
I’m confused. I’m trying to find (if this is it?) a plug-in for my page tabs. I just want some of my page tabs to hover over and not to be cllicked into as the info is in my dropdown tabs. Example:
Hover over the tab ABOUT and drops down to “biography’ and “photos’ tabs. Or my next tab is “Stores”…. I don’t want anyone to be able to click into “stores”, it is just a page tab with the drop down menu with the names of my stores that they can cllick into. Do you understand? I don’t know if your plug-in does that. It’s a simple request, I just can’t find the plugin and I’m going crazy.
Hi,
This isnt the right plugin unfortunately. The mega menu plugin would do what you asked though – http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drop-down-mega-menu-widget/
To create “blank” menu items that cant be clicked you can use the custom links option in the menu admin area to add these – in the URL field just enter “#”
Huge thanks for the amazing plugin.
One of the best and absolutely painless setup.
Regards,
Marshall
Hi,
Thanks for the feedback. Glad you like the plugin
Why does the floating menu lock the scroll bar to the right of my website?
http://www.xn--html-koaf4j.se/
It is extra problematic for this page:
http://www.xn--html-koaf4j.se/alla-html-koder-for-konstiga-tecken/
It is not possible to “grab” the scrollbar with the mouse, when the floating menu is activated. What can I do to solve this problem?
(Sorry for the strange url:s – they contain swedish characters.)
Best Regards,
Torbjörn
Hi,
I dont see any problems with Firefox. What browser are you using?
Hey, Lee! The plugin doesnt work on single posts (single.php) and pages (page.php). But on home page plugin is excelent work. What is that? Can you help me?
Hi – the actual page is irrelevant to the plugin. Check that the single and page files contain the correct code to include the widget area
[...] Floating Menu creates a widget, that adds a floating, sticky, dump down menu from any customary WordPress tradition menu regulating jQuery. [...]
[...] jQuery Floating Menu plugin from Design Chemical is a useful little script that floats a menu at the left or right hand side of your [...]
[...] Floating Menu creates a widget, which adds a floating, sticky, drop down menu from any standard WordPress custom menu using jQuery. [...]
[...] WordPress Plugin – jQuery Floating Menu [...]
ok many thanks¡
and another question. the ‘contact us’ youi have is a plug in or is ‘your’ plugin?
may thankiuu
Its a jquery plugin called ‘contactable’ – http://theodin.co.uk/blog/ajax/contactable-jquery-plugin.html
?¿?¿? sorry Lee, i don’t undesrstand you.
1. i create a page
2. i create a menu
and now???
install the plugin and create a floating menu widget in the widget admin area. The info above gives more detail on how to configure the widget.
Once set up you could add an image using CSS by setting the image as a background image to the floating menu box.
many thanks Lee but this is for ‘clever’ people… and this is not me…
i don’t understand so much like you.
my only idea is to put something like the ‘contact us’ you have here but with an image.
dos it too complicate?
thanks
CUrro
Hi – You could add a menu with a single empty link and then add the image as a background image in the floating tab box
or something like the ‘contact us’ you he¡ave here? how do you get it?
thanks
it is possible to put an image? like a banner?
thanks
Curro
Hi Curro – TheWordpress plugin version is specifically for menus at this time, however if you use the jQuery floater plugin you can add any HTML content to the floating tab – see http://www.designchemical.com/lab/jquery-floater-plugin/getting-started/ for details on how to use it.
[...] Floating Menu creates a widget, which adds a floating, sticky, drop down menu from any standard WordPress custom menu using jQuery. [...]