jQuery Mailchimp-Like Animated Sticky Menu Plugin - StickyChimp

StickyChimp is a simple jQuery plugin inspired by Mailchimp.com for creating a smart & animated navigation menu that stays at the top of your web page.

Related plugins:

• Sticky Top Menu Bar with CSS3
• Fixed Position Top Menu Bar with jQuery and CSS3 - nagging-menu
• Super Tiny jQuery Sticky Navigation Menu Plugin
• Animated Sticky Header On Scroll with CSS3 and Javascript
• jQuery Sticky Navigation Bar For One Page Website - SMINT

How to use it:

1. Create the html for the navigation menu

<div class="menu-wrap">
<ul class="menu">
<li><a>Home</a></li>
<li><a>Banana</a></li>
<li><a>Coconut</a></li>
<li><a>Apple</a></li>
<li><a>Grape</a></li>
</ul>
</div>

2. The CSS for the menu

.menu-wrap {
position: fixed;
top: 0;
height: 60px;
width: 100%;
background-color: white;
-webkit-box-shadow: 0 1px 1px rgba(6,8,8,0.1);
box-shadow: 0 1px 1px rgba(6,8,8,0.1);
}
ul.menu {
margin: 0;
padding: 0 0 0 30px;
}
.menu li {
float: left;
height: 60px;
line-height: 60px;
padding: 0 15px 0 15px;
font-size: 0.875em;
font-weight: bold;
text-align: center;
cursor: pointer;
list-style: none;
}
 @media all and (max-width: 420px) {
ul.menu {
padding: 0;
}
.menu li {
padding: 0;
width: 20%;
}
}
.menu li:hover {
background-color: #EEE;
}

3. Load the necessary javascript files on the page

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

4. Call the plugin

<script type="text/javascript">
$(document).ready(function() {
$('.menu-wrap').stickychimp();
});
</script>

Change log:

0.3.0 (2014-01-31)

• version update

0.2.0 (2013-12-10)

• Added data-api support so it can also be used in a similar manor to a Bootstrap plugin.

---

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