Home


[ Allwebco Design ]
[ Allwebco Hosting ]



 jQuery Floating Menu
 This script is provided free for any type of website project. Support is not included. Note: Always make backup files and test after each edit before you go to another edit. You can always delete your backups later.

View support for this addon


STEP 1.) Copy Files
Copy the "floating-j-menu" folder into your website folder. Files should stay inside this folder. Copy the "help-floating-menu.html" into your website folder. Open the "help-floating-menu.html" and go to the next step.


STEP 2.) Test
Open the "help-floating-menu.html" (this page) in your website folder. You should see the floating menu on the left side of this page. If you scroll, the menu should move with the page. If it's not working, re-do the step above.


STEP 3.) Add </head> Code
Select, copy and paste the following 3 lines of code into the "head" of your existing webpage(s) that you want the floating menu on. Put the code just before the </head> near the top of the page. Make backups of your webpages before you start.

Important: The first line below is the jQuery library file. If your HTML pages already have a similar line in the </head> section, do not add this line (the version number may vary) and only add the 2nd and 3rd line. Check each page you add the menu to and do not use duplicate jQuery library file lines.

Note: This menu works with other versions like "jquery-1.8.2.min.js".





STEP 4.) Add Menu
Select, copy and paste the following line of code into your existing webpage(s). This code should go near the bottom of your HTML page. Add this just above the footer section of your webpages or just after the text content in your pages. The exact placement is not important.




STEP 5.) Test
Test the webpage you added the floating menu to in a web browser. The menu should be visible and float down as your scroll down on the page.


STEP 6.) Edit CSS Menu Location
Edit the "floating-j-menu.css" in the "floating-j-menu" folder.
  1. On line #10 edit the left: 0; to right: 0; to place the menu on the right side.
  2. On line #8 edit the margin-top: 150px; to any other px number to move the menu up or down on the page.

STEP 7.) Edit Icons & Links
Edit the "floating-j-menu.js" in the "floating-j-menu" folder. Do not edit the other 2 .js files.
  1. Edit links in the floating-j-menu.js to link to your pages.
  2. Icons are included in the 2 icon folders. The menu is set to use the white icons. Edit the "var FMpath" near the top of this file to use either "white" or "black" icons.
  3. Extra icons are included in each icon folder inside the "floating-j-menu" folder. Edit the "floating-j-menu.js" with the other image names to use other icons.
  4. The PSD file in each icon folder is a Photoshop layered icon file.


OPTIONS
COLORS: | More details
Edit the "floating-j-menu.css" to change the background color or add a border.


ICONS HIDING ON MOBILE:
Media queries code is included at the bottom of the "floating-j-menu.css". The breakpoint is set at 482 pixels. At this point the floating menu will hide. You can change the 482 to any number to set your own breakpoint. Edit the 482 in 4 total places. Optionally change the display: none; to display: block; to unhide the menu.


ADDING MORE ICONS:
See the note in the "floating-j-menu.js" to copy and paste the last button line to add a new button. Edit the new button with your icon image and link.


MORE OPTIONS:
See floating jQuery menu.



TROUBLESHOOTING
 If you do the steps above and floating menu is not working:
  1. Try doing the above steps again from the start.
  2. You are testing the wrong HTML page that you added the floating menu code to.
  3. You are editing on-line files instead of files on your hard drive.
  4. You have not used ALL the code from the above steps. Redo steps above.
  5. If you have uploaded: Remember that hosting areas are case sensitive. Be sure all file, folder names and link names match exactly.
  6. Note: Always make backup files and test after each edit before you go to another edit. You can always delete your backups later.



Best of luck with your new add-on and your website!
~Allwebco Design~


COPYRIGHT © Allwebco Design Corporation
Unauthorized use or sale of this script is strictly prohibited by law. You are authorized to use this on any Allwebco template, website or any template from another company for business or personal use. You are also authorized to modify all included files. View terms of use.