Create A Responsive Top Notification Bar with jQuery and CSS3 - Freenbar.js

Freenbar.js is a minimalist jQuery script which creates a fixed responsive notification bar sliding out from the top of your web page. Fully styleable via CSS.

How to use it:

1. Create the Html for a top notification bar.

<div id="barwrap">
  <div class="bar">
  <span id="head-image"><img src="img/authkey.png" alt=""></span>
  <span id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nunc placerat, mollis lectus ut, lobortis enim.</span>
  <span id="otherimg"></span>
  <span id="ok"><a href="#">Dismiss</a></span>
  </div>
</div>

2. Add the following CSS/CSS3 snippets into your CSS file or include the freenbar.min.css directly into your document. Feel free to override or modify the styles shown below to create your own styles.

/* space between the bar and your content */
#barwrap { margin-bottom: 30px;  }

.bar {
  text-align: center;
  padding: 8px;
  padding-top: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  /* set it at will according to your message's length in small devices */
  max-height: 100px; 
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  color: #f5f5f5;
  border-bottom: thick ridge rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 2px 13px 0.5px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 13px 0.5px rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 3008;
}

#head-image {
  margin-right: 1%;
  position: relative;
  top: 8px;
}

#text { position: relative;
}

#ok {
  float: right;
  margin-top: 6px;
  margin-right: 10px;
  font-size: 25px;
}

#ok a {
  color: #3EAAEE;
  text-decoration: none;
}

3. Include the necessary jQuery JavaScript library at the end of your document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

4. The core JavaScript to active the top notification bar when page loads.

$(function() {
  setTimeout(function() {
    return $(".bar").animate({
      height: "toggle"
    }, "slow")
  }, 450);
  return $("#ok").on("click", function() {
    $("#barwrap").css("margin-bottom", "0px");
    $(".bar").animate({
      height: "toggle"
    }, "slow");
    return !1
  })
});

---

This awesome jQuery plugin is developed by Jmlevick. For more Advanced Usages, please check the demo page or visit the official website.