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


HTML

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>

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

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

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

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


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


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

</div>

CSS

the bellow styles are used to style the footer menu bar
<style>

#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;}

</style>

JAVASCRIPT

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>

<script>

$(document).ready(function(){
 
 $('li').click(function(){
  
  $('li').removeClass('active');
  
  $(this).addClass('active');
  
 });

 
});
</script>

Live Demo   Download Script

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons