Create A Floating Menu Like In Facebook In Your Own Website

Posted by in Articles, css, Programming

You can take an example of floating chat menu at the bottom of the page. These kinds of floating menus in your website or blog can attract many of your visitors. Most widely these floating menus can be used in several notifications, subscription information, etc. Be creative as much as you can and the possibilities are endless. Facebook used it for chat bar; you can use it for something else.

Let’s go through the core codes of this ability in Facebook and let me show you how to apply this in your blog.

First see what Facebook have:

And this is what we are going to create at very basic level.

We are having this method just using CSS nothing more than that. First let me tell you something about CSS position property.

Position property allows you to position your HTML objects in exact co-ordinates relative to the main window or any other HTML object it is enclosed in.

Now let’s see the important values of Position property.

Position: absolute means to position the object absolutely in that co-ordinate you specify. You’ll have to specify the co-ordinates from Top and Left. You can also use Bottom and Right, Bottom and Left, Top and right, Top and Left which literally represents the X and Y axis. The absolute positioning positions the object fixed inside your webpage. The absolute position can be used to layout your website and it is the best method to layout your web rather than using Float methods.

Position: relative doesn’t positions the HTML tag but rather it acts as a boundary for the inner contents. For example, if you set the position: relative to outer wrapper of your layout then any object inside that wrapper will assume the border of outer wrapper as end point.

Initial position of the box

After scrolling down a bit

Position:fixed does the same as position:absolute only the difference is that, the position of the object  remains fixed on the browser window not inside the page. And this is what we are going to use to do our job.

Since you got the basic knowledge about CSS Position property, now let’s head to the main tutorial.

First of all create a DIV with some class assigned to it.

<div class="floating">Menu Content Goes here</div>

We created a div with class named floating and inside that div we kept some text contents.

Now let’s get some CSS ready for floating class.

.floating {

Position:fixed;

Bottom:0;

Right:20px;

Width:200px;

Height:30px;

}

Simple done! If we don’t specify the width, the floating box will take the whole width in the browser window. And if we don’t specify the height, the box will either be invisible or the height will increase according to the content inside it.

Since you’ve created the floating bar as in Facebook, place any thing in that floating box, it can be menu or subscribtion link or some advertisement, etc.

Click here to see the working demo of this tutorial.

There are several things you can do with this trick. For example, see this social bookmark floating icons.

Initial position of the floating icons

Here is the live demo, scroll down a bit to see it action, the icons remains in same position.

Hope you loved this tutorial.