Responsive Sticky Navigation Menu Plugin with jQuery and CSS3 - Pagescroll Menu

Pagescroll Menu is a jQuery menu plugin for creating a responsive, mobile-aware, animated navigation menu which is sticky on the web page during scrolling. You can use it as Vertical or Horizontal Menu as well on the left/right/bottom/top side. The plugin also has the ability to turn the sticky menu into a mobile toggle menu on those smaller screen devices.

Basic Usage:

1. Include jQuery javascript library together with jQuery Pagescroll menu plugin's files in the page.

<link href="css/pagescroll_menu.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/pagescroll_jquery_menu.js"></script>

2. Create a sticky navigation menu using Html unordered list.

<ul class="pagescroll-menu">
<li> <a href="#">Home</a> </li>
<li> <a href="#">New jQuery Plugins</a> </li>
<li> <a href="#">Recommended jQuery Plugins</a> </li>
<li> <a href="#">Most Popular jQuery Plugins</a> </li>
<li> <a href="#">Blog</a> </li>
</ul>

3. Call the plugin on the UL element and make the menu sticky at the top of your page by passing position option.

<script type="text/javascript">
jQuery(document).ready(function() {																				//
jQuery('.pagescroll-menu').pagescroll_menu({
"position":"top"
});
});
</script>

4. More configurations to customize the navigation menu.

<script type="text/javascript">
jQuery(document).ready(function() {																				//
jQuery('.pagescroll-menu').pagescroll_menu({
position: 'top', // left, right, top or bottom
type: 'fixed', // fixed, inline, absolute
mode: 'default', // default, mobile or icons
bgcolor: '#000', // background color of your menu
style: 'style1', // position styles
oldmode: ''
});
});
</script>

---

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