jQuery Floating Icon Menu
Sidebar menu free website addon application
Floating icon menu script. jQuery code creates the automatic scrolling animation. This script works on all types of websites and web templates, HTML 4.01, HTML5 and responsive design.
See Also…
See Also…
Example on this page
Scroll down this page a small amount. The floating menu, show in the left sidebar on this page, uses jQuery Javascript and css code to allow the menu to animate as the page scrolls. Css Media Queries code is included to optionally hide this menu on smartphones.
Download script
Click below to download the floating icon menu add-on as shown in the sidebar example. Includes all files, icons and examples. See the help page in the download for setup instructions and options.
Download jQuery Floating Menu (.zip)Options
See the help page included with the script download. Editable options include:
- Vertical top to bottom location setting
- Left or right orientation
- Background colors and border
- Use your own icon images
Included icons
The following icons you can use are included with this addon in the download. Both black and white icons are included.
You can optionally use your own icons. The default icon size is 36 x 36 pixels. Icon images are .png images with a transparent background. You can optionally use any image type by editing the menu file included with the download.
Adding space for the menu
This gets a little complicated because how you add left or right space for the floating menu may depend on how your webpages or template is configured. The following is just one quick way to add space.
Add a div around your page text content. This div is just for adding padding:
<div class="padfloat">
Your page text content here
</div>
Always remember if you open a div, be sure to add the closing </div> tag.
Once you add the div around your content, you'll need css to add the padding. Plus, you may optionally want css media queries to remove the padding when the floating icon menu hides on smartphones.
View the source code of this webpage. You'll see how we added the css code for the left padding on this page to move the text content over and make space for the floating menu, and we have included some media queries to remove the padding when the browser width becomes more narrow than 482 pixels.
Note: We used the Media Queries breakpoint of 482 because this is the same breakpoint used in the css code that hides the menu in the css file included with the floating menu download. If you plan to set the floating menu to from hiding on mobile to not hiding on mobile, then you can skip using the Media Queries code.
The following is our css code that can be added to an external style sheet like your "style.css". Notice in this code there really is only a single class. The .padfloat class. Used once as regular css code, and used once as Media Queries code for 482 pixel or less wide screens.
.padfloat { padding: 0px 0px 0px 35px; }
/***************
Media Queries - WHEN PAGE WIDTH LESS THAN 482 IS ACTIVE
***************/
@media handheld and (max-width: 482px),
screen and (max-device-width: 482px),
screen and (max-width: 482px)
{
.padfloat { padding: 0px 0px 0px 0px; }
}
/***************
END Media Queries
***************/
TROUBLESHOOTING: Menu not working:
- It is important that the jQuery library line (jquery-1.11.3.min.js, or any version) is above all other .js lines in the <head> section of each HTML page. The scripts can not run if the library file is not loaded first.
- See troubleshooting section on the help page included with the download.
- Can not see menu: The menu may be under another item on your page. Try editing the z-index in the css file to a higher number. Try moving the menu location in the css file.
Device compliance
This script has been tested in all browsers, IE, Safari, Google Chrome, Firefox and Opera and also iPhone and iPad and was compatible with all devices. If you encounter problems in other browsers or devices, please contact us to let us know.
Related Topics
Free news scroller script
Static IFrames support
Javascript and RSS news feeds