Create jQuery Notification Bar

How to create jQuery notification bar, you will learn in this article. Moreover, it will appear on top of the website or webpage. So for that, you have to use jQuery fadein(), fadeout() function to create a beautiful effect. Thru this effect, you can hide/show jQuery notification bar.

First of all, you have to create an HTML file. I assume that you have to know basic HTML tags. If you are a beginner, you might need to learn basic HTML tags. Create div wrapper to show in the top of the page. In this element, you have to add some element text notification message inside the span tag. One more span element you need to write after the div element for the show notification icon when the notification bar is hidden. And Finally, HTML code as per below.

<div class="jquery-bar">
    <span class="notification">
        <p class="font-style">« Back to Article - <a href="#">jQuery Notification Bar (Header Top Notification)</a></p> <p class="jquery-arrow down"><img src="img/up-arrow.png" alt="Click to Hide Notification" style="cursor:pointer;"></p>
    </span>
</div>
<span class="downbar jquery-arrow"><img src="img/down-arrow.png" alt="Click to Show Notification" style="cursor:pointer;"></span>

Furthermore, you have to write a CSS for designing a notification bar. So you have to write the following CSS style.

.jquery-bar {
    background: #FFFFFF;
    width: 101.40%;
    position: relative; 
    margin: -13px 0px 0px -5px;
    padding: 2px 0px 0px 0px;   
    border-bottom: 2px solid #CC0000;
    box-shadow: 0px 4px 5px #AAAAAA;
    font-size: 14px;
    font-family: 'Lato Regular', Arial;
    text-transform: uppercase;
}
.jquery-bar .notification {
    display: block;
    width: auto;
}
.downbar {
    cursor: pointer; 
    top: 0px;
    right: 70px; 
    padding: 0px 3px 0px 3px;
    position: absolute;
    background: #FFFFFF;
    border-radius: 0px 0px 5px 5px;  
    border: 2px solid #CC0000;
    box-shadow: 0px 4px 5px #AAAAAA;    
    border-top: none;
}
.downbar:hover{
    background: url(../jix/bg.png);
    cursor: pointer;
}
.down {
    position: absolute;
    top: 3px;
    right: 85px;
}
.up {
    top: -45px;
    display: none;
}
.arrow {
    cursor: pointer;
}
.font-style{
    text-align: center;
}
.font-style a{
    color: #CC0000;
    font-size: 15px;
    text-decoration: underline;
    text-transform: none;
}

Next, you have to write a jQuery file. It depends on the jQuery library. jQuery library provides functions. Moreover, you can use the jQuery UI library. It provides User Interactive design functions. But here jQuery UI library optional.

Following jQuery custom code you have to write.

<script>
    $(document).ready(function() {
        // jBar Script by Todd Motto
        $('.downbar').delay(1000).fadeIn(400).addClass('up', 600);
        $('.jquery-bar').hide().delay(2500).slideDown(400);
        $('.jquery-arrow').click(function(){
            $('.downbar').toggleClass('up', 400);          
            $('.jquery-bar').slideToggle();
        });     
    });
</script>

Finally, your jQuery notification bar created. You can check demo and download source code. Share your feedback with us. Your opinion is valuable to us. Thanks. You can explore here jQuery related posts.