jQuery Sticky Footer Menu | Lessoncup Programming Blog

Monday, 20 January 2014

jQuery Sticky Footer Menu

Hi, today i am going to tell about how to develop a stylish sticky footer menu bar with showing tooltip while mouse hover using jquery and css, you can keep this stylish footer in any website and manage the design as you like. it is just few lines of jquery code let's see how to do this small app


in html just design the footer menu by taking DIV's and inside the main-nav-wrapper div take UL and LI tags and give the unique class names to each LI tag inside the LI tags take span tag and give the content related to button and this SPAN tag content will appear while mouse hover on LI tag like tooltip
<div id="bottom-bar">

<div id="main-nav-wrapper">
<ul id="main-navigation">
<li class="profile active">
<a href="#profile"><span style="margin-left: -32.5px;">Profile</span></a>

<li class="blog">
<a href="#blog"><span style="margin-left: -26.5px;">Blog</span></a>

<li class="twitter">
<a href="#twitter"><span style="margin-left: -34px;">Twitter</span></a>

<li class="tumblr-likes">
<a href="#tumblr-likes"><span style="margin-left: -29.5px;">Likes</span></a>

<li class="ask">
<a href="#ask"><span style="margin-left: -61px;">Ask me anything</span></a>

<li class="submit">
<a href="#submit"><span style="margin-left: -34px;">Submit</span></a>

<li class="flickr">
<a href="#flickr"><span style="margin-left: -29.5px;">Flickr</span></a>



the bellow styles are used to style the footer menu bar

#bottom-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 45px;z-index: 1000;}

#main-nav-wrapper {position: absolute;width: 100%;height: 45px;bottom: 0;visibility: visible;background: white;
-moz-box-shadow: 0 -1px 0 rgba(0,0,0,0.11);-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.11);box-shadow: 0 -1px 0 rgba(0,0,0,0.11);z-index: 120;}

#main-navigation {list-style: none;margin: 0;padding: 0;}

#main-navigation li.active {height: 49px;}

#main-navigation li {position: relative;display: block;height: 45px;width: 52px;float: left;border-right: 1px solid #ededed;}

#main-navigation li:hover span{display:block;}

#main-navigation li.profile a {background-position: -106px 0;}

#main-navigation li.profile.active a {background-position: -52px 0;}

#main-navigation li.active a {background: url(main-nav.png) #fe544a;}

#main-navigation li.blog a {background-position: -212px 0;}

#main-navigation li.blog.active a {background-position: -158px 0;}

#main-navigation a {width: 100%;height: 100%;display: block;background: url(main-nav.png) black;text-indent: -9999px;
position: relative;outline: none;cursor: pointer;}

#main-navigation li.twitter a {background-position: -318px 0;}

#main-navigation li.twitter.active a {background-position: -264px 0;}

#main-navigation li.tumblr-likes a {background-position: -424px 0;}

#main-navigation li.tumblr-likes.active a {background-position: -370px 0;}

#main-navigation li.ask a {background-position: -530px 0;}

#main-navigation li.ask.active a {background-position: -476px 0;}

#main-navigation li.submit a {background-position: -636px 0;}

#main-navigation li.submit.active a {background-position: -582px 0;}

#main-navigation li.flickr a {background-position: -742px 0;}

#main-navigation li.flickr.active a {background-position: -688px 0;}

#main-navigation li a > span {text-indent: 0;position: absolute;bottom: 55px;color: #fff;font-weight: 700;font-size: 12px;text-align: center;display: none;background: #000;background: rgba(0,0,0,0.8);-webkit-border-radius: 5px;
-moz-border-radius: 5px;border-radius: 5px;padding: 7px 14px;left: 50%;white-space: nowrap;}

#main-navigation li a > span:after {content: url(main-nav-arrow.png);position: absolute;left: 50%;bottom: -8px;
margin-left: -5px;}



now write the click functions on li tag as selector, and inside the function i have just used removeClass() method to remove active color from selected button and applied a new active class using addClass() method to make the button to be in active mode
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>




Live Demo   Download Script

1 comment :

  1. I was searching for many blogs site and now finally I have got this cool place with lots of information.
    UI design agency


Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA

Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons