Animation Sidebar Floating Icon Bar

2026July05

Web html5, css3, javascript, php, sql, jquery, xml, ajax, web design & development, photo maker, SEO.
Online web design, along with everything you need for a complete website.
Animation Sidebar Floating Icon Bar creation.

instructions

Copy the "sidebar-floating" folder into your website folder. Files should stay inside this folder. Open the sidebar-floating.html 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. 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.

The first line below is the jQuery library file. If your HTML pages already have a similar line in the 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. This menu works with other versions like "jquery-1.8.2.min.js".

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. 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. Edit the "style.css" in the "sidebar-floating" folder. On line #10 edit the left: 0; to right: 0; to place the menu on the right side. On line #8 edit the margin-top: 150px; to any other px number to move the menu up or down on the page. Edit the "floating.js" in the "sidebar-floating" folder. Do not edit the other 2 .js files. Edit links in the floating.js to link to your pages. Icons are included in the 2 icon folders.

OPTIONS COLORS: | Edit the "style.css" to change the background color or add a border.

ICONS HIDING ON MOBILE: Media queries code is included at the bottom of the "style.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.js" to copy and paste the last button line to add a new button. Edit the new button with your icon image and link.

code Sidebar Floating Icon Bar

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <link rel="stylesheet" href="https://www.netbax.net/pages/creation/tools/sidebar-floating/style.css" type="text/css"> <script type="text/javascript" src="https://www.netbax.net/pages/creation/tools/sidebar-floating/floating.js"></script>

Animation Sidebar Floating Icon Bar demo

sidebar floating Download All Pack

All Basic HTML5

HTML is the main markup language for web pages, and its elements are the basic building blocks of web pages. HTML is written in the form of HTML elements consisting of tags enclosed in "greater than" and "less than" symbols within the content of the web page.

All Basic CSS3

CSS (Cascading Style Sheets) is a computer language that belongs to the category of style sheet languages used to control the appearance of a document written in a markup language.It is used to control the appearance of a document written in HTML and XHTML, that is, to control the appearance of a web page and a website in general.

js JAVASCRIPT

Javascript is a set of computer software and specifications developed by James Gosling at Sun Microsystems, later acquired by Oracle Corporation, which provides a system for developing application software and its development in a multi-platform computing environment.

CREATIONS

In this chapter I call creation I will present you creations html, css and javascript that are very useful and creative in a web site. You can get them ready-made with Netbax creations or create them yourself as you wish with the help provided by the Netbax editor.

NAVIGATION Bar

having easy-to-use horizontal & vertical menu is important for any web site. with css you can transform boring html menus into good-looking horizontal & vertical bars. horizontal & vertical menu is such an important part of your website. it’s how your visitors navigate to the main areas of your site and makes it easy for them to find.

WEB BUTTONS

Collection of hand-picked free HTML and CSS button code examples.In this article, we'll see some really cool looking responsive buttons using only a few lines of CSS.You are free to copy, modify and use this code as you wish.All the buttons shown here can scale accordingly to the font-size attribute, and should work in any relatively recent browser.