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