Nice And Simple Toolbar For Your Website With CSS3 And jQuery
- 2 December 2009
- Tutorials, Web Design
- This post was written exclusively for PV.M Garage by Piervincenzo Madeo
- Comments (109)»
During these months I’ve learned an important lesson as blogger. If you want to start an activity on the web with a blog, magazine or a general website, you must plan a clever action on the Social Networking and Bookmarking websites.
Often it’s an hard thing to interface a website with the many available social services, but recently there are some famous blogs, like Abduzeedo and Mashable, that are using a fixed toolbar on the bottom of the page with useful button for the sharing.
There are services, like Wibiya, that allow to add a toolbar in a few steps, but why don’t you create a really custom panel using your CSS and jQuery skills?
In this tutorial we’ll learn how to build a nice toolbar for our website using some CSS3 properties and basic jQuery techniques.
The Idea Behind
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 second step the list with the icons and their tip bubbles (left), a quick menu and the “hide button” (to hide the toolbar ).
We can also expect a “show button”, it is useful when the panel is hidden and we want to re-activate it. For this reason we add the div tag with id toolbarbut.
HTML and CSS code
Here the html basic structure.
<div id="toolbarbut">
<!-- hide button -->
</div>
<div id="toolbar"> <!-- toolbar container -->
<div class="leftside">
<!-- all icons in floating left side -->
</div>
<div class="rightside"> <!-- all things in floating right side -->
<!-- hide button -->
<!-- quick menu list -->
</div>
</div>
Update style.css using the following lines of code (take a look at the comments).
div#toolbar, div#toolbarbut {
position: fixed; /* set fixed position for the bar */
bottom: 0px;
right: 0px;
z-index: 9999; /* keep the bar on top */
height: 36px;
background: url(images/bcktool.png);
/* CSS3 */
-moz-border-radius-topleft: 8px;
-khtml-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-khtml-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
-moz-box-shadow: 0px 1px 10px #666, inset 1px 1px 0px #a4a4a4; /* inset creates a inner-shadow */
-khtml-box-shadow: 0px 1px 10px #666;
-webkit-box-shadow: 0px 1px 10px #666;
/* CSS3 end */
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}
div#toolbar {
width: 85%;
min-width: 700px; /* to limit the width when there is an excessive window resize */
margin: 0px auto; /* centered toolbar */
left: 0px;
}
div#toolbar a:hover {
border: none; /* fix 'hover' (a:hover {border-bottom: 1px dotted #666;}) border in the News Aggregator */
}
div#toolbarbut { /* div for the 'hide status' */
width: 60px;
height: 15px;
margin-right: 3%;
display: none;
}
.leftside {
float: left;
}
.rightside {
float: right;
}
It’s important to note that we have just added a nice shadow effect and rounded borders exclusively using CSS code.
Show/Hide Buttons
Now we can add the code for the “show button”.
<div id="toolbarbut"> <!-- hide button --> <span class="showbar"><a href="#">show bar</a></span> </div>
Below the properties for the relative CSS class.
span.showbar a { /* show button */
padding: 5px;
font-size: 10px;
color: #989898;
}
We complete the right side later, but now we can add the “hide button” within the div with id rightside, as shown.
<div class="rightside"> <span class="downarr"> <!-- hide button --> <a href="#"></a> </span> <!-- other stuff in floating right side --> </div>
Properties for the relative CSS class.
/*-- Right Side --*/
span.downarr { /* hide button */
float: right;
border-left: 1px solid #a4a4a4;
}
span.downarr a {
display: block;
width: 36px;
height: 26px;
padding: 25px 0 0 10px;
background: url(images/downarrow.png) no-repeat 5px 7px;
}
Show/Hide Effect with jQuery
First of all we need to download jQuery (copy it in the right folder) and activate it in head tag of index.php.
<head> <!-- ... --> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> </head>
We want to hide the panel clicking on “hide button”, when the toolbar isn’t visible there should be the “show button” that allows us to restore the panel.
We can use the following jQuery solution (add the code after the <body> tag).
<script type="text/javascript">
$(document).ready(function(){
//hide toolbar and make visible the 'show' button
$("span.downarr a").click(function() {
$("#toolbar").slideToggle("fast");
$("#toolbarbut").fadeIn("slow");
});
//show toolbar and hide the 'show' button
$("span.showbar a").click(function() {
$("#toolbar").slideToggle("fast");
$("#toolbarbut").fadeOut();
});
});
</script>
Now we can hide and show the bar whenever we want.
Left Side
In this space we add a list of Social Network Icons (we use “Set of social icons” by Tydlinka), with a particularity: we want to show tooltip when the mouse is moved over a list element.
HTML and CSS code for the Left Side
Update the index with the following XHTML code. We add a general unordered list (with id social) to create the sequence of the icons and a div tag (with class tip) nested within the li tag of the general list to realize the tooltip bubble.
<div class="leftside"> <!-- all things in floating left side -->
<ul id="social">
<li><a class="rss" href="#"></a><!-- icon -->
<div id="tiprss" class="tip"><!-- tooltip -->
<ul>
<li><a href="#">580 Readers</a></li>
<li><a href="#"><small>[Subscribe]</small></a></li>
</ul>
</div>
</li>
<li><a class="facebook" href="#"></a>
<div id="tipfacebook" class="tip">
<ul>
<li><a href="#">Share Page</a></li>
<li><a href="#">| Profile</a></li>
</ul>
</div>
</li>
<li><a class="twitter" href="#"></a>
<div id="tiptwitter" class="tip">
<ul>
<li><a href="#">ReTweet</a></li>
<li><a href="#">| Profile</a></li>
</ul>
</div>
</li>
<li><a class="delicious" href="#"></a>
<div id="tipdelicious" class="tip">
<ul>
<li><a href="#">Bookmark</a></li>
<li><a href="#">| Profile</a></li>
</ul>
</div>
</li>
<li><a class="digg" href="#"></a>
<div id="tipdigg" class="tip">
<ul>
<li><a href="#">Digg</a></li>
<li><a href="#">| Profile</a></li>
</ul>
</div>
</li>
<li><a class="stumble" href="#"></a>
<div id="tipstumble" class="tip">
<ul>
<li><a href="#">Stumble</a></li>
<li><a href="#">| Profile</a></li>
</ul>
</div>
</li>
</ul>
</div>
And now the CSS code. We use position: absolute; to set-up a custom position for the tip bubble.
/*-- Left Side --*/
ul#social li {
display: inline;
}
a.rss {
display: inline-block;
width: 104px;
height: 35px;
margin-left: 5px;
background: url(images/rss.png) no-repeat;
}
a.facebook, a.twitter, a.digg, a.delicious, a.stumble {
display: inline-block;
width: 40px;
height: 35px;
margin-top: 1px;
}
a.rss:hover, a.facebook:hover, a.twitter:hover, a.digg:hover, a.delicious:hover, a.stumble:hover {
background-position: 1px 1px; /* simple css hover effect */
}
a.facebook {
background: url(images/facebook.png) no-repeat;
}
a.twitter {
background: url(images/twitter.png) no-repeat;
}
a.delicious {
background: url(images/delicious.png) no-repeat;
}
a.digg {
background: url(images/digg.png) no-repeat;
}
a.stumble {
background: url(images/stumble.png) no-repeat;
}
.tip {
position: absolute; /* important */
top: -75px;
width: 250px;
height: 78px;
background: url(images/tip.png) no-repeat;
float: left;
display: none;
}
/* custom distances for the icons */
#tipfacebook {
left: 75px;
}
#tiptwitter {
left: 120px;
}
#tipdelicious {
left: 165px;
}
#tipdigg {
left: 210px;
}
#tipstumble {
left: 255px;
}
.tip ul {
padding: 22px 0 0 25px;
}
.tip ul li {
display: inline;
padding-left: 3px;
}
.tip ul li a {
font-size: 18px;
color: #989898;
}
.tip ul li a:hover {
color: #666;
}
.tip ul li small {
font-size: 10px;
}
Use jQuery to Set-up the Hover Effect for Tooltip Bubbles
It’s time to add a nice effect for our bubbles. As usual, with some lines of code, jQuery allows us to create a nice menu for sharing our pages on the Social Networking and Bookmarking websites.
//show tooltip when the mouse is moved over a list element
$("ul#social li").hover(function() {
$(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
$(this).find("div").hide();
});
});
Right Side
Now near the “hide button” we add a useful quick menu.
HTML and CSS code for the Right Side
Here the complete code. We use a span for the menu title and a new div (with id quickmenu) for the new panel.
<div class="rightside"> <!-- all things in floating right side -->
<span class="downarr"> <!-- hide button -->
<a href="#"></a>
</span>
<span class="menu_title">
<a class="menutit" href="#">quick menu</a> <!-- quick menu title -->
</span>
<div class="quickmenu">
<ul> <!-- quick menu list -->
<li><a href="#">Premium Member</a></li>
<li><a href="#">Become Author</a></li>
<li><a href="#">Submit News</a></li>
<li><a href="#">Send Feedback</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
And now the style!
/*-- Right Side --*/
span.downarr { /* hide button */
float: right;
border-left: 1px solid #a4a4a4;
}
span.downarr a {
display: block;
width: 36px;
height: 26px;
padding: 25px 0 0 10px;
background: url(images/downarrow.png) no-repeat 5px 7px;
}
span.menu_title {
background: #e4e4e4;
border-left: 1px solid #a4a4a4;
padding: 10px;
}
span.menu_title a {
font-size: 16px;
line-height: 34px;
color: #9a9a9a;
}
.quickmenu {
position: absolute; /* important */
top: -251px;
right: 46px;
width: 260px;
height: 250px;
background: #e4e4e4;
border-top: 1px solid #a4a4a4;
border-left: 1px solid #a4a4a4;
border-right: 1px solid #a4a4a4;
/* CSS3 */
-moz-box-shadow: 2px -3px 5px #c5c5c5, -3px 0px 5px #cdcdcd;
-khtml-shadow: 2px -3px 5px #c5c5c5, -3px 0px 5px #cdcdcd;
-webkit-box-shadow: 2px -3px 5px #c5c5c5, -3px 0px 5px #cdcdcd;
/* CSS3 end */
display: none; /* important */
}
.quickmenu ul {
padding-top: 20px;
}
.quickmenu ul li {
border-bottom: 1px solid #989898;
padding: 5px 10px;
margin: 0 15px 0 15px;
}
.quickmenu ul li a {
font-size: 18px;
color: #989898;
display: block;
}
.quickmenu ul li a:hover {
color: #666;
}
Show/Hide QuickMenu Panel on Click Event
Below you can see the jQuery code used to make visible or hidden the menu panel clicking on menu title (tag a with class menutit). We also add a little fix to avoid the jump to link anchor (#).
//show quick menu on click
$("span.menu_title a").click(function() {
if($(".quickmenu").is(':hidden')){ //if quick menu isn't visible
$(".quickmenu").fadeIn("fast"); //show menu on click
}
else if ($(".quickmenu").is(':visible')) { //if quick menu is visible
$(".quickmenu").fadeOut("fast"); //hide menu on click
}
});
//hide menu on casual click on the page
$(document).click(function() {
$(".quickmenu").fadeOut("fast");
});
$('.quickmenu').click(function(event) {
event.stopPropagation(); //use .stopPropagation() method to avoid the closing of quick menu panel clicking on its elements
});
//don't jump to #id link anchor
$(".facebook, .twitter, .delicious, .digg, .rss, .stumble, .menutit, span.downarr a, span.showbar a").click(function() {
return false;
});
That’s all friend! Click here to visualize the complete code.
Conclusions
I think this kind of solution is useful to enhance interaction with your users, it can simplify the sharing of the contents and it could be really useful to improve your presence on the Social Networking websites. Think also at the possibility of providing quick-links for your readers to increase the page views .
It’s a good idea to validate the toolbar code and to test the browser compatibility.
W3C Validation
Response: “This document was successfully checked as XHTML 1.0 Strict!”
Browser Compatibility
Some screenshots from different browsers (Windows 7 OS).
A little note: the images for this tutorial are in images folder in the archive with the source files, where you can also find a complete layered psd file of the toolbar. Download it!
25 Great Stock Images Plus with $100 Subscription Giveaway
Entrepreneurs that inspire you to grow your internet business
Unique Handwritten Free Fonts For Your Next Designs
A Roundup of 45 Industrial Free Fonts
55 Unconventional And Original Free Fonts For An Unique Design
How to Create a Battery Icon in Photoshop
How To Create A Magnifying Glass Icon In Photoshop
Touch The Future: Create An Elegant Website With HTML 5 And CSS3
It’s a great tutorial!
I think this bar is an useful way to promote your identity on web and other informations like pages, sponsormetc..
Thanks for sharing this! You’re great!
Ciao
There seems to be a need for fixed toolbars at the bottom of a website. I saw a similar approach at Soh Tanaka’s website.
This toolbar is really impressive.
Thanks for sharing.
I like the idea of a widget at the site bottom, i used wibiya for a long time, but the problem is that it can increase loading time of the blog and hence decrease user experience
That’s really useful.
Thanks a lot!
Wow, very impressive. Thank you for sharing. I’m going to put this to use for a new site I’m making! I’ll send you a link to it when finished. Keep it up bro.
Amazing tut! Thanks.
You rock, man! Fantastic tut!
Am I the only one who thinks these page footer bars are insanely irritating?
That said, great tutorial, even the IE version looks great :P
This is a useful tut. I’m planning to implement something like this on a website that I’ll be building the the coming months. Some good ideas shown here.
Amazing tut! Thanks.
This is great! I love finding useful Web developer scripts and tools like this, I’ll definitely implement this onto one of my sites.
It is a great plug in. One comment though, it does not work in ie6, it is floating left in ie7. Do you think you can fix ie issues?
@gcs: My idea is to realize something that works with the css3 new properties. IE6, IE7 are passed browser. Sure, also IE8 doesn’t work with css3, but it is the most recent version and I’ve added it (screenshots) for this reason.
So, no!
Thanks for the comment, friend!
is there any way you can change the color of the bar?
Great tutorial! And thank you for sharing your knowledge… I have bookmarked this page, and plan to use it at some point.
If you have a moment, I invite you to join in on the Mac vs. PC debate. Check out my most recent post: http://sannaleeconsulting.blogspot.com/
Thanks again! Happy Holidays. :)
Great tutorial. I have noticed a lot of blog/websites have started to adapt this style. Will be interesting to see how it all develops.
great tutorials, Thank you very much this will be very helpfull.
This is an awesome tut PV. Toolbar is beautiful ( best one Ive seen *) Kudos !
Great tutorial! Thank you for sharing your knowledge
And Thank you very much this will be very helpfull.
;-)
Great tut. Well formated. If you use slideToggle() to show quick menu on click?
Can someone tell me how I can just turn those into buttons instead of the pop up li li stuff!
Please just make it into buttons with css and html code and zip if into a download link please :)
I am having to much problems trying to add-on to the bar!
Where I would just like to add-on buttons as the icons I dont want those grey bubbles lol
Very nice and useful tutorials to web designers,
Thanks for posting.
I think a cool addition to this script would be to set a cookie that will be set for a specific period of time when a user hits the hide button (and would be eaten when the user hit show button).
Great tutorial!
Great suggestion Tim… and thanks for comment!
have you tried the code on the new platform? it loads about 17K and can offer graceful degradation mode as well which loads the bar only after the whole site is up! I suggest you give it another shot
Great Daniel! I’ll try it in my next projects.
To test the new platform for The Wibiya toolbar (Wibar) go to
http://www.wibiya.com/
Welcome to the new Wibiya platform – now open for EVERYONE!
This toolbar looks awesome !!
I know that u have made this toolbar as per the latest browsers and css3 codes but Is there anyway that I can fix that problem in IE6 ??
Is that a position problem for example:
#xyz {position:absolute; etc.} or is there any javascript problem for IE6…
PNG fix is not a big deal for me.. I just want it to be @ right position in any crossbrowsers..
Thanks & Regards,
Mohan
Hi this is awesome toolbar thnaks for sharing and code I’m using it in one of my site but there is problem with IE toolbar float at left side.
You are awesome.. i try to find anyway but i cant find it till i find this webs.. this tuts. very cool.. thanks so much ..
This is for the blind? )))
Can I translate your tutorial in Russian language?
Sure… but please report a link to the original article.
Thanks!
Not sure if you’ve noticed a small glitch in your jQuery code. But here is the fix
Original:
//show tooltip when the mouse is moved over a list element
$(“ul#social li”).hover(function() {
$(this).find(“div”).fadeIn(“fast”).show(); //add ’show()” for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
$(this).find(“div”).hide();
});
});
Fixed:
//show tooltip when the mouse is moved over a list element
$(“ul#social li”).hover(function() {
var position = $(this).position();
$(this).find(“div”).css({“left”:position.left}).fadeIn(“fast”).show(); //add ’show()” for IE
}, function () { //hide tooltip when the mouse moves off of the element
$(this).find(“div”).hide();
});
The fixed version allows you to remove the positioning from the CSS file, and generate it automatically. Also, the callback function was not firing due to a missing }, which has been added
I think your code doesn’t work… (tried)
I was using a new function in jQuery 1.4
Re-tested and it does work here.
Hi Guys
I’m implementing this bar on a website of mine, but I’m having problems tweeking the stylesheet so that the colours match my site.
I am trying to get the background colour of the complete bar to be a dark blue, #1a4168 to be precise.
Any help or guidance would be much appreciated. The website can be found over at:
http://www.theoutdoors.org.uk/
Hey Chris, I’m honored… it looks very nice! Thanks.
Has anybody installed this on a phpbb3 based forum, toolbar looks awesome.wibiya is slow and causes errors. This one looks great.
Damn fine work.
Can anybody help me set this toolbar up on my phpbb3 forum??? my forum is at http://www.twoedge.us/phpbb/forum
Love it! Great work. I had done one in CSS, but not with jquery. This is much nicer than the services!
Has anyone combined this with a script to open in the same window/mimic wibiya’s?
Thank you for make this. Is very nice and working in my web.
Very nice article. Appreciate the knowledge given.
On a similar note, how would you go about fixing the toolbar to the top of the screen? I’ve been trying to do it all day without much success.
I think I will try to do this, too, as the bottom position doesn’t look good on my site at http://www.sustainabledelco.org, because of the video on the site.
I was able to mode the toolbar to the top. Check out my site at http://wurster.ws/wordpress/.
Great idea. I really like it. I got it to work fine on one Wordpress site but then had trouble on another. The problem was interference with another js library like prototype. I found the solution at http://devoracles.com/jquery-error-documentready-is-not-a-function-sure.
My next task will be to move the toolbar to the left side of the screen.
I was able to move the toolbar to the side as you can now see at http://www.wurster.ws/wordpress/.
thank you! i’ve been looking for this for a long time..
This toolbar is good option. Thanks for the code.
Works great! Thanks for the great tutorial.
Integrated in http://kebelek.narod.ru :)
I like this A LOT!
How can I implement this on my blog?
I’m currently using jquery 1.4.min
it seems that your plugin uses jquery-1.3.2.min
i can’t get it to work..
how can i fix this?
i’d appreciate any help.. thank you..
thank you for this tutorial
This looks great. I am glad I found it. Does anyone have experience adding a chat icon and connection on a bar like this. We want to integrate our online chat/support to a toolbar but need some assistance working through the technical part of it. Thanks!