jQuery Responsive Top Navigation Bar Plugin - Peek

File Size: 345KB
Views Total: 12452
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Responsive Top Navigation Bar Plugin - Peek

Peek is a lightweight (~2kb) and responsive jQuery plugin for creating an auto-hiding top navigation menu on your website, similar to the jQuery Scroll Nav Plugin. By default, the navigation menu will act as a fixed element at the top of the page. When you scroll down (or up) the web page, the menu will hide (or reappear) to save your screen space, especially on mobile devices.

How to use it:

1. Create the html for the navigation menu

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#">Project name</a> </div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!-- /.nav-collapse --> 
</div>
<!-- /.container --> 
</div>

2. Include twitter's bootstrap files on your web page. Using Bootstrap with Peek is easy simply call Peek on the navbar and you're done. No customization needed.

<link href="libs/bootstrap/bootstrap.css" rel="stylesheet">
<script src="libs/bootstrap/bootstrap.js"></script> 

3. Include the latest jQuery library and jQuery Peek Plugin on the web page

<script src="libs/jquery/jquery.js"></script> 
<script src="dist/jquery.peek.js"></script> 

4. Just call the plugin and you're done

<script>
$('.navbar').peek();
</script>

5. Options

<script>
$('.navbar').peek({
showDirection: "up", // What direction should the user be scrolling when the element is showing.
toggleClass: "hidden", // Class used to hide the element.
triggerDelta: 50, // After a user has scrolled more than this many pixels show or hide the target element.
triggerElement: window // Element to bind the scroll event to.
});
</script>

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