Skip to main content

Fixed Navigation Bar On Top

Here i have an advance trick to give new feature to your web page. You can create a navigation bar which remains stable while user scroll down the web page. It looks awesome and very easy to implement. Credit of this implementation goes to Jquery, Css and Html. You just need to create a simple navigation bar by introducing element li as inline.
Half work is done then add a new class in your css and create a jquery function. This function performs all magic. It checks the web page position and as per requirment switches between two css classes of navigation bar.
Sounds interesting take a look at its jquery function.
You may Download the whole code.

Jquery Code:

 $(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');
                });
            }
        });

});

Image Before Scrolling: 

 

Image After scroll down:

Css Code:

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

#content {
    width: 750px;
    margin: 0 auto;
    margin-bottom: 25px;
    padding: 30px 0;
    text-align: left;
}

ul {
    padding: 0;
}

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

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

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%;
    height:60px;
    box-shadow: 0 0 40px #222;
    -webkit-box-shadow: 0 0 40px #222;
    -moz-box-shadow: 0 0 40px #222;
}
Html Code:
<body>
<div id="navi">
    <div id="menu" class="default">
        <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 --> 
 
Hope you will like this post.
Labels:

Comments

Post a Comment

your Comment is sent for moderation, Thankyou

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.
Post a Comment
Read more

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model
Post a Comment
Read more

OSI Model (Tutorial-6)

What is the OSI model ? Open Systems Interconnection model is fundamental to all communications between network devices.  Developed in 1974 by ISO after the American Department of Defence began using the TCP/IP suite of protocols.  Finally adopted in 1977. It is now the theoretical model for how communication takes place between network devices. What are the seven layers ? Layers OSI Model Layer 7  Layer 6  Layer 5  Layer 4  Layer 3  Layer 2  Layer 1
Post a Comment
Read more