Floating bar with jquery and CSS

One friend commented in my blog asking how to implement a floating bar to website . Do you know what is a floating bar in website and how it look like ? See my live demo please .Some other good examples of floating bars can be found at Meebo and Wibiya , I think many of you know Wibiya .With a floating bar ,we can :
  1. Make a menu navigation
  2. Social information
  3. Advertising
  4. Highlight important information (promos, etc.)
  5. Contact information
  6. Polls / feedback 

floating bar

Live demo


Here is steps for making a floating bar


1,In this post ,I will make a floating menubar ,but you can replace the code (in bold) with code of advertisements ,social networks ,contact information or anything you like .

<div id="navi">
<div id="menu" class="default">
<!--code of floating bar goes here-->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">WordPress</a></li>
</ul>
</div><!-- close menu -->
</div><!-- close navi -->

if you are using Blogger ,go to Dashboard ->Design - >Edit HTML, and add this code right after <body> in template xml .

2,We need some CSS for menu bar .
Here is the CSS code :
<style>

#navi {
    height: 50px;
    margin-top: 50px;
}

#menu {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
    background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);
   
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
   
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
    padding: 0;
}



#navi ul {
    padding: 0;
}

#navi ul li {
    list-style-type: none;
    display: inline;
    margin-right: 15px;
}

#navi ul li a {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
    padding: 3px 7px;
   
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
   
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}

#navi ul li a:hover {
    background: #01458e;
    color: #ff0;

    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}

.default {
    width: 850px;
    height: 50px;
   
    box-shadow: 0 5px 20px #888;
    -webkit-box-shadow: 0 5px 20px #888;
    -moz-box-shadow: 0 5px 20px #888;
}

.fixed {
    position: fixed;
    top: -5px;
    left: 0;
    width: 100%;
   
    box-shadow: 0 0 40px #222;
    -webkit-box-shadow: 0 0 40px #222;
    -moz-box-shadow: 0 0 40px #222;
}
</style>

if you are using Blogger ,add this code right before </head> .You can edit CSS to make menubar display as you want (change color ,font ,shadow,round corner...)

3,Finally , the most important part  : Javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
   
    var menu = $('#menu'),
        pos = menu.offset();
       
        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            }
            else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });

});
</script>

you can add this code right before </body>  .

Now save template file and you will see a menubar floating in your site .

How it works ?

At first ,we don't scroll the page , "menu" element has a class "default" .When we scroll the page ,
javascript code will : Hide the menu -> replace class "default" with class "fixed" -> then show the menu again .
What makes the magic is in classes "default" and "fixed" , in CSS code , we define "default" class with attributes for a static menubar and "fixed" class with attributes for a floating menubar .
 So when we scroll the page ,"default" class will be replaced with "fixed" class ,and this will make menubar float over other elements .

When we scroll back to top ,"fixed" class will be replaced with "default" class ,and floating menu becomes static menu .
That's all for a floating bar .To customize this floating bar ,just need some changes in CSS. I hope this will be helpful to you .

Share this post

Advertisement

0 comments:

Post a Comment