Updated 30th June 2012
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.
Also Check Out Our Premium WordPress Plugins:
- Wordpress Social Stream
- Wordpress Social Network Tabs
- WordPress Social Share Buttons
- Wordpress Top Social Share Posts
Demo jQuery Floating Menu
Download The Plugin
- 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
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.
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:
Open/Close the menu using either ‘hover’ or ‘click’.
Enter the text that you would like to use for the menu tab.
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.
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.
The speed in milliseconds to open and close the slide out menu.
The default speed is set to 0.6 secs.
If checked, the menu will automatically slide closed when the user clicks anywhere in the browser
If checked, the menu tab will remain open at all times.
Check this option to disable the floating animation – menu remains in fixed position in browser window.
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.
The plugin includes the feature to add text links within your site content that will open/close the floating menu tab.
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
Download The Plugin
If you liked the jQuery Floating Menu Plugin you should also try out:
Sticky tabs with slide out menus.
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.
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.
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
Widget in edit mode
Version 1.4.1 30th June 2012
- Updated: change wp_enqueue_script to function
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