Sticky Header or footer with mouse over expansion

Display a floating bar top or bottom of your site, that follows the users scrolling actions, and when the user hovers or clicks on the floating bar, have it expand revealing important news or content, that is interactive.

Using lovely JQuery we can easily create a sticky footer that follows the users screen, once the user hovers over (or mouse click if preferred) the footer or header then it will expand out reviling your hidden content, this is a nice way to get users attention to something important that they really need to view / read. We have used this on our own shop for its cart, we show the user at all times if there cart is empty or has products, if it has products then on hover we show them what they have and, they can even interact with it removing items from the cart.

For an interactive demo just check out our online shop here 

The script simply consists of 1 JS file, 1 CSS file (or integrate it into your primary CSS file) and a call to JQuery, the rest is just simple HTML

Lets start with the head section:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="stickybar.css" />
<script src="stickybar.js"></script>

 

Now just the visible bit of the footer or header

<div id="stickybar" class="GentexStickybar">
<a href="#togglebar"><img src="open.gif" data-closeimage="close.gif" 
data-openimage="open.gif" style="border-width:0; float:right;" /></a>
<div style="text-align:center;padding-top:3px">
<
a href="http://www.gentex.com.au">Gentex Networks</a></div>

 

Now this section of the HTML is the hover / clickable part of the footer / header.

<div class="resources" style="margin-top:10px">
 
<div style="float:left">
    <b>Web Development</b>
    <ul>
    <li><a href="http://www.gentex.com.au">Gentex</a></li>
    <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
    <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
    <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
    <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
    </ul>
</div>
 
<div style="float:left">
    <b>News Related</b>
    <ul>
    <li><a href="http://www.cnn.com/">CNN</a></li>
    <li><a href="http://www.msnbc.com">MSNBC</a></li>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://news.bbc.co.uk">BBC News</a></li>
    </ul>
</div>
 
<div style="float:left">
    <b>Technology</b>
    <ul>
    <li><a href="http://www.news.com/">News.com</a></li>
    <li><a href="http://www.slashdot.com">SlashDot</a></li>
    <li><a href="http://www.digg.com">Digg</a></li>
    <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
    </ul>
</div>
 
</div>

That's really it! Now there are some controls for example I did say that this could be placed at the top or bottom, we can control that and if its clickable or mouse over only, Can link it to external content elsewhere, you don't have to use the inline HTML shown in the last above HTML snippet, and you can also control the speed.

Here are the controls i mentions above in the JS file.

id: "stickybar", //id of sticky bar DIV
position:'bottom', //'top' or 'bottom'
revealtype:'mouseover', //'mouseover' or 'manual'
peekamount:35, //number of pixels to reveal when sticky bar is closed
externalcontent:'stickybarcontent.htm', //path to sticky bar content file on your server, or "" if content is defined inline on the page
speed:200 //duration of animation (in millisecs)

So that's really is, now I guess your going to want the files right? ok then here they are

Tags
Tips and Tricks , Jquery , Javascript , Web Design
Share

Categories

Tags

Archive