Themeforest

WordPress Plugin – jQuery Floating Menu

Updated 30th June 2012

wordpress floating menu plugin

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:

Demo jQuery Floating Menu

WordPress Floating Menu Plugin Demo

Download The Plugin

Download Floating Menu 1.4.1 (38,932)

Installation

  1. Upload the plugin through `Plugins > Add New > Upload` interface or upload `floating-menu` folder to the `/wp-content/plugins/` directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. In the widgets section, select the Floating Menu widget and add to one of your widget areas
  4. 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:

Floating menu example 1

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.1 (38,932)

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.

Screenshots

Widget in edit mode

Updates

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

78 Comments

  • This is a great plugin, thank Lee.

    I use this on a few of my one page sites, as it works really well to scroll down. It always works great, but a recent site ( http://theslowup.theartinstallations.co.uk/ ) it just refuses to work? There are no other plugins in use, and other than uploading the same theme I always use with this plugin, and basically nothing else, the site is untouched, so can’t see how there is a java problem somewhere? Basically I’m clueless!

    Wondered if you might have a solution?

    Thanks

  • Flash was due to conflicting scripts. Issue fixed. Thanks for a great plugin!

  • Flash of unstyled content on load in Chrome Versie 22.0.1229.79 under OSX. No such problem with Firefox or Safari.

  • Hi !!
    I really love the plugin, just wondering if I can use it for something other than the menu? Client (a non-profit) wants the float to display image (Please Donate) and a link to their donate page. I know this will be a coding thing, just wondering how much trouble that will be??
    Thanks so much!!
    -s

  • Hi Lee,

    A client of mine is trying to use your plugin but it throws an error when I enable WP_DEBUG, which is a best practice when developing plugins and themes according to Andrew Nacin from the core WordPress team:

    http://nacin.com/2010/04/23/5-ways-to-debug-wordpress/

    Here’s the notice it throws:

    Notice: wp_enqueue_script was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or init hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.) in /Users/mikeschinkel/Sites/mygumdoc/public_html/wp-includes/functions.php on line 2748

    Your plugin adds actions upon load of your plugin file but you need to added them from within an ‘init’ hook. I’ve fixed the code for you and posted it here:

    https://gist.github.com/3019112

    I’m hoping you can issue a plugin update soon so that I can approve my client to continue using your plugin otherwise we’ll have to go with something else.

    Thanks in advance.

    • Hi,

      Plugin updated – see version 1.4.1

  • Hi,

    I’ve followed the instructions for installation as closely as humanly possible yet probably at least 10 times over and over and I still can’t get the floating menu to show up on my site: guitartoday.ca

    Please help me :)

    • hi,

      The page is missing the widget area where the floating menu code is inserted. If your theme is based on twenty eleven you need to go to the theme options page in admin and set it so that the sidebar is included

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

          <div class="tab">
          <span>Menu</span>
          
          • <div class="tab">
            <span>Menu</span>
            

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

          <img src="http://your image location" style="width: px; height: px; padding: 0; margin: 0;">

          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

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags