22
Sep
2013

jQuery Message Bar

Posted in: jQuery No Comments

message-bar
In this tutorial we will create a cool looking message bar with jQuery. This message bar will be displayed at the top of your website.

Demo Download

Step 1: Prepare HTML

Create HTML code for the message bar. Add this HTML code at the top of your webpage.

<div class="open-message-bar"></div>
<div id="message-bar">
	<div class="wrap">This is a cool Message bar</div>
</div>

Step 2: Add CSS

Add CSS properties for the message bar.
Important: Add open.png and clode.png images in /images folder.

#message-bar {
	width: 100%;
	height: 60px;
	background: #bfdb5c;
	display: none;
}
.wrap {
	width: 800px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	padding-top: 10px;
}
.open-message-bar {
	width: 48px;
	height: 48px;
	background: url(images/open.png) no-repeat;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
}
.close-message-bar{
	background: url(images/close.png) no-repeat;
}

Step 3: Call jQuery Library

Call jQuery library in your webpage. I am using Google CDN hosted jQuery library.
You can use alternative method to include jQuery library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Step 4: Add jQuery code

Now, add jQuery script to show / hide this message bar.

<script type="text/javascript">
$(document).ready(function() {
	$(".open-message-bar").click(function() {
		$("#message-bar").slideToggle();
		$(this).toggleClass("close-message-bar");
	});	
});	
</script>

Done!!!

Check demo and download the demo file.

Demo Download

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati
You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Reply