test: 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 :

Make a menu navigation
Social information
Advertising
Highlight important information (promos, etc.)
Contact information
Polls / feedback

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 .

<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>

</div>

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 .

5 comments:

efekentli12 January 2011 at 21:17
sorry, i do it.but i get warning ."XML hata iletisi: The entity name must immediately follow the '&' in the entity reference." what is the problem?
dafit12 January 2011 at 22:27
@efekentli :

your problem is simple to fix.

in XML , after'&' just put "amp;" (WITHOUT QUOTE)

EX : else if($(this).scrollTop() <= pos.top & menu.hasClass('fixed'))

Fix :else if($(this).scrollTop() <= pos.top & menu.hasClass('fixed'))

correct this if i false

vi
V_Mambetov15 January 2011 at 12:13
Hi, i have the same problem as efekentli, and i didn't see the difference in the fix you suggest, sorry !
SAHL AHMED SHAIKH28 January 2011 at 20:08
how to make this at the bottom of the template?

HumorTechblog.com
Gurpreet Singh2 June 2011 at 14:34
This worked perfect for me. Thanks man.
Can you Add more tutorials for blogger to make blogger look more like wordpress.

test

Wednesday, 12 January 2011

Floating bar with jquery and CSS

Here is steps for making a floating bar

How it works ?

5 comments:

footer ad

Email subscription