Paralax Menu jQuery Plugin

Paralax Menu jQuery Plugin allows you to add spark to your sticky menus by gradually changing its link font colors whenever it reaches images or elements with image backgrounds. You can check out the example here.

1. How to use

In order to add Paralax Menu to your website please do the following:

a) Download and include CSS and JS in your markup.

<link type="text/css" rel="stylesheet" href="css/jquery.paralaxmenu.css"/> <script type="text/javascript" src="js/jquery.paralaxmenu.js"></script>

b) Create menu using the syntax below.

<!-- Brochure Menu --> <div id="brochure-menu"> <div id="sub-brochure-menu"> <a href="kitchen">Menu</a> <a href="shopping">Shopping</a> <a href="music">Music</a> <a href="library">Library</a> <a href="location">Location</a> <a href="news-and-events">News & Events</a> </div> </div>

c) Initiate the script by including the following in your scripts.

    $(document).ready(function() {
        $('#sub-brochure-menu').paralaxmenu({
            container: '.page-content',
            wrappers : ['img', 'div.bg-image']
        });
    });
    

The .page-container is, as the names implies, the container of the page where are your elements will be (text, images etc.). The #brochure-menu markup for the sticky menu presented earlier needs to be placed immediately after opening tag so that it looks like this:

<div class="page-content"> <!-- Brochure Menu --> <div id="brochure-menu"> <div id="sub-brochure-menu"> <a href="kitchen">Menu</a> <a href="shopping">Shopping</a> <a href="music">Music</a> <a href="library">Library</a> <a href="location">Location</a> <a href="news-and-events">News & Events</a> </div> </div> ... </div>

2. Options

At the moment there are only 2 options available.

container: the container div id/class where sticky menu is going to be placed.

wrappers: which elements should make menu link colors change.

3. Example

Check out the example here.