Example / Download

What is it!

This is a jQuery plugin that makes a beautiful sliding menu with pictures!

How to use it!

Well that is simple. Make sure you have a place to put your menu:

<div class="MainMenu">

</div>

Then add a few menu items in it. Make sure that your first picture is the picture
you want to use as a background! The second picture is text in this case. You can
choose not to use it!

<div class="MainMenu">
    <div>
        <img src="img/menu-1.png" />
        <img src="img/text-1.png" />
    </div>
    <div>
        <img src="img/menu-2.png" />
        <img src="img/text-2.png" />
    </div>
    <div>
        <img src="img/menu-3.png" />
        <img src="img/text-3.png" />
    </div>
</div>

To add a submenu, just put an unordered list in it with the class “submenu”. Then
choose if you want a “light” or a “dark” menu!

<div class="MainMenu">
    <div>
        <img src="img/menu-1.png" />
        <img src="img/text-1.png" />

        <ul class="submenu light">
            <li><a href="#">Submenu 1.1</a></li>
            <li><a href="#">Submenu 1.2</a></li>
            <li><a href="#">Submenu 1.3</a></li>
            <li><a href="#">Submenu 1.4</a></li>
            <li><a href="#">Submenu 1.5</a></li>
            <li><a href="#">Submenu 1.6</a></li>
        </ul>
    </div>
    <div>
        <img src="img/menu-2.png" />
        <img src="img/text-2.png" />

        <ul class="submenu light">
            <li><a href="#">Submenu 2.1</a></li>
            <li><a href="#">Submenu 2.2</a></li>
            <li><a href="#">Submenu 2.3</a></li>
            <li><a href="#">Submenu 2.4</a></li>
            <li><a href="#">Submenu 2.5</a></li>
            <li><a href="#">Submenu 2.6</a></li>
        </ul>
    </div>
    <div>
        <img src="img/menu-3.png" />
        <img src="img/text-3.png" />
    </div>
</div>

If you don’t want to use a submenu, but just 1 link, just put an <a href=”#”> in your menu
item! Use target=”_blank” to make the link go in new browser

<div class="MainMenu">
    <div>
        <img src="img/menu-1.png" />
        <img src="img/text-1.png" />

        <ul class="submenu light">
            <li><a href="#">Submenu 1.1</a></li>
            <li><a href="#">Submenu 1.2</a></li>
            <li><a href="#">Submenu 1.3</a></li>
            <li><a href="#">Submenu 1.4</a></li>
            <li><a href="#">Submenu 1.5</a></li>
            <li><a href="#">Submenu 1.6</a></li>
        </ul>
    </div>
    <div>
        <img src="img/menu-2.png" />
        <img src="img/text-2.png" />

        <ul class="submenu light">
            <li><a href="#">Submenu 2.1</a></li>
            <li><a href="#">Submenu 2.2</a></li>
            <li><a href="#">Submenu 2.3</a></li>
            <li><a href="#">Submenu 2.4</a></li>
            <li><a href="#">Submenu 2.5</a></li>
            <li><a href="#">Submenu 2.6</a></li>
        </ul>
    </div>
    <div>
        <img src="img/menu-3.png" />
        <img src="img/text-3.png" />

        <a href="http://www.google.com/" target="_blank"></a>
    </div>
</div>

And that’s it for the markup. Now just do some jQuery magic and youre ready!

<script type="text/javascript">
    $(document).ready(function() {
        $(".MainMenu").pictureMenu();
    });
</script>

The options!

Here is a list of options with the default value. You can edit these options to make
your menu better (or worse)!

• animateTime: 350

  The time in miliseconds it takes to complete the sliding animation!

• menuHeight: 150

  The height of the menu (usually the same as the height of the images)!

• menuWidth: 75

  The width of a menu item (useMenuWidth must be set to true)!

• useMenuWidth: true

  If true: use custom menuWidth for the menu items. If false: use calculated menuWidth!

• menuWidthHover: 40

  The width of the inactive menu items!

• menuActiveWidth: 500

  The width of an active menu item (useMenuActiveWidth must be set to true)!

• useMenuActiveWidth: false

  If true: use custom menuActiveWidth for the active menu item. If false: use calculated menuActiveWidth!

• menuInactiveHide: 1

  The opacity of the inactive menu items!

• menuBorder: 2

  The size of the border between the menu items!

• subMenu: “.submenu”

  Selector of the submenu! Not yet used!

• menuAutoOpen: 0

  The menu that should be default open (Only works when leaveActiveOpen is set to true)!

• leaveActiveOpen: false

  Set to true if you want active menu items to stay open!

• leaveActiveOpenCookie: false

  Set to true if you want to leave menu items open after refresh (requires cookie plugin)

• cookieExpire: 0

  Set the number of days when the cookie must expire!

• debug: false

  If your menu is not working, set debug on to look for known errors!

Example / Download