You can see the demo menu on the left side. This plugin is a simplified version of Aviate Mega Menu - jQuery CSS DropDown Menu Plugin. You can use it as Vertical or Horizontal Menu as well on the left/right/bottom/top side. When you use it as Vertical Menu, fits to the full width of the actual window's size, calculating equal sections for each menu items. The menu links can be customizable via CSS and configurable with external URLs too.

For internal URL, just add #section_name inside the href attribute like this:

<a href="#section_name">SECTION NAME</a>

and add

<a id="section_name"></a>

to the content, where you would like to navigate the user on onclick event.

Alignment

The menu alignment is configurable with parameter when you initialize the jQuery Page Scroll Menu. These can be dynamic only when you using absolute or fixed positions. Choosing left or right option will displays the menu on the side of the screen, vertically centered.

Positions

The fade in/fade out effect only works with fixed mode, in this way the menu will always visible on the screen. With absolute position, the menu will displayed on a layer in front of the website, therefore you don't need to modify anything on your website's hierarchy. It is possible to include it in existing place, like a div element with inline option. Really easy to configure the background color of the Scrolling Menu with any HEX or RGB color codes.

Implementation

The menu fully responsive, usable on mobile and tablets. Try out to resize the window to check out how is fits to the screen on lower resolutions. Thanks for this functionality it is possible to use it on any modern websites. In mobile view, you can open the menu by clicking on the icon. Fade out and fade in feature helps for better viewing the website contents for the visitors, it is automatically fade-in/fade-out, when the screen scrolling down or hover on the menu with the mouse pointer.

You have to add the CSS file to the head section of your website, like this:

<link href="css/pagescroll_menu.css" rel="stylesheet">

Add the following Javascript files to your website also in the head section:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="js/pjm.min.js"></script>
<script type='text/javascript'>                                                                                        
jQuery(document).ready(function() {
    jQuery('.pagescroll-menu').pagescroll_menu();	
});
</script>
	

HTML Markup

Use the following format to add menu to your website:

	<ul class="pagescroll-menu">
            <li><a href="#home">HOME</a></li>
            <li><a href="#section2">FEATURES</a></li>
            <li><a href="#section3">POSITION</a></li>
            <li><a href="#section4">OPTIONS</a></li>
            <li><a href="#download">DOWNLOAD</a></li>
       </ul>
	

Then don't forget to add anchors to the website:

<a id="section2"></a>

Do you also need a modern email form?

Check out this highly customizable Premium jQuery Plugin with MailChimp support for $6 only: