Nice And Simple Toolbar For Your Website With CSS3 And jQuery

Wednesday, 02 December 2009 22:09

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”. Please click here, if you want to see only the toolbar in action.

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>

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 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").css({'vivibility': 'hidden'});
	});
	$('.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 screenshot 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!