Top
Home Forum Upload Contact About Us Share Login 🌙

logo

Animation Sidebar Floating Icon Bar creation


Animation Sidebar Floating Icon Bar creation.

Facebook Tweet1

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.

<script type="text/javascript" src="sidebar-floating/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="sidebar-floating/jquery.easing.1.3.js"></script>

<link rel="stylesheet" href="sidebar-floating/style.css" type="text/css">

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".

<script type="text/javascript" src="sidebar-floating/floating.js"></script>

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.

demo

sidebar floating Download All Pack

download


<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="floating.js"></script>

web design maker from 100 €

ads
web sale design maker

html properties tutorial

html

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.



html property tutorial

css properties tutorial

css1

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. CSS is a computer language intended to stylistically develop a web page, ie to formulate more features, colors, alignment and gives more features than html. For a beautiful and well-designed website the use of CSS is considered necessary.


css properties tutorial

javascript properties tutorial

java

Java 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.



javascrip properties tutorial

creation properties tutorial
creation1

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.




creation properties tutorial

css menu bar horizontal & vertical
css-menu

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 your good content.


css menu bar horizontal & vertical

css notebook paper design

notebook1

Question: I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page.

answer: this tutorial will show you how to create a notebook themed website using only css.


css notebook paper design

fancy text generator

fancy text generator

a fancy cool font generator that helps create stylish text font styles with beautiful symbols and fancy characters for instagram other places.




fancy text generator

online privacy policy generator

alt-key1

online privacy policy generator. Generate a Privacy Policy or a Privacy Notice for your site. Comply with CCPA, GDPR, CalOPPA, Google Adsense and affiliate programs.




online privacy policy generator

online favicon text maker
keyboard

online favicon text maker, Quickly generate your favicon from text by selecting the text, fonts, the colors, and border. Download your favicon in the most up to date formats.




online favicon text maker

online meta tag code generator full complete

button1

online html meta tag code generator full complete use for generate your meta information code like meta description, meta keyword etc. just set parameter value and generate Meta code. Search Engine find your web page easy or optimize your website.


online meta tag code generator

online banner text generator

banner1

online banner text generator a helpful tool to generate image banner.Upload your assets, company logo, Simultaneously edit text, image and effects directly on all banners.




online banner text generator

online 3d text generator

3d

online 3D text generator, a free online 3D tool to create 3D typography. Quick and easy, this online tool helps you create the best text design possible with just a few clicks.It can be used for your company, to create a 3D text logos, or for art. This 3D text maker will only take you a few clicks to create the perfect 3D logo.


online 3d text generator

online html marquee generator

marquee

online html marquee generator.Link,text,images, Marquee Generator Text Marquee Generator.Use this HTML marquee generator to create scrolling text or images for your website.




online html marquee generator

Online Font Family Generator

font

Online Font Family Generator, CSS font family generator is a very handy resource for webdevelopers and general. Generate in an instant awesome header text styles or content text styles for your website. More than 1000 font family styles are integrated that you can use.



Online Font Family Generator

Online neon text generator

button2

online neon text generator, a free online neon tool to create neon typography. Quick and easy, this online tool helps you create the best text design possible with just a few clicks.It can be used for your company, to create a neon text logos, or for art. This neon text maker will only take you a few clicks to create the perfect neon logo.


Online neon text generator

footer

If you’d like to send us feedback, or have any other question, please fill out the form below and we will get back to you as soon as possible.