Nice And Simple Toolbar For Your Website With CSS3 And jQuery

Our goal is to realize a fixed panel, on the bottom of the page, to improve interaction with our users.
Well, below you can see my idea in “visible status” (I’ve designed it using Photoshop). In this post we’ll use some basic techniques to realize the panel, after the reading only your fantasy could be a limit to enhance the toolbar for you purposes.


So a panel with social icons and their tooltip bubbles on the left side and a quick menu on the right. Some features we want for our bar:

• Hide/Show toolbar clicking on specific buttons
• Adaptive width during the resizing of the window
• Tooltip Bubble when the mouse is moved over an icon
• Quick Menu Panel on the right side
• Cross Browser Compatibility

Live Demo and Source Files

To view in action the final result click below on preview button. You can also download the source files.
The toolbar has been thought to be added to the News Aggregator that we built in a previous tutorial, “How To Realize A News Aggregator Using Simple Pie In An Adaptive Layout” (if you want to see only the toolbar in action, please click here).

The Basic Structure

We’ll update the HTML code of index.php and the CSS code of style.css of the News Aggregator.
We build a fixed panel (div with id toolbar) with two floating sides where we will add in a seco