jQuery Peek v.0.1.1

jQuery Peek is a great way to keep your navigation while preserving your precious screen realestate for your content. While the user is viewing the page, the navigation is tucked away. When the user scrolls up (or down), the navigation will reapear. Check out the examples below to see Peek in action.

Twitter's Bootstrap

Using Bootstrap with Peek is easy simply call Peek on the navbar and you're done. No customization needed.

Example

JavaScript

$('.navbar').peek();

View Full Screen Demo Get Bootstrap

Zurb Foundation

Foundation isn't quite out-of-the-box ready as Bootstrap, but with some simple CSS styling Foundation is ready to go.

Example

CSS

body {
  padding-top: 60px;
}

.top-bar {
  position: fixed;
  width: 100%;
  z-index: 10;
  top: 0;
  -moz-transition: top 0.2s ease-in-out;
  -o-transition: top 0.2s ease-in-out;
  -webkit-transition: top 0.2s ease-in-out;
  transition: top 0.2s ease-in-out;
}

.top-bar.hidden {
  top: -45px;
}

JavaScript

$('.top-nav').peek();

View Full Screen Demo Get Foundation