frankenMenu

Getting started

Step 1: Setup your HTML

<body>

    <div id="mobile-header">
        <div class="container">
            <button type="button" id="mobile-menu-button">Toggle menu</button>
        </div>
    </div>

    <div id="wrap">

        <nav id="frankenmenu"> ... </nav>

        // The rest of your document goes inside this wrap

    </div>

</body>

Step 2: Build the navigation

<nav id="frankenmenu">

    <div class="container">

        <ul id="frankenmenu-list">
            <li class="menu-item menu-item-depth1"><a href="#">Home</a></li>
            <li class="menu-item menu-item-depth1 menu-item-has-children">
                <a href="#">About us</a>
            <ul class="sub-menu sub-menu-depth1">
                <li class="menu-item menu-item-depth2"><a href="#">Your mum</a></li>
                <li class="menu-item menu-item-depth2"><a href="#">My mum</a></li>
                <li class="menu-item menu-item-depth2"><a href="#">Your mum's mum</a></li>
            </ul>
            </li>
            <li class="menu-item menu-item-depth1 menu-item-has-children">
                <a href="#">Products</a>
            <ul class="sub-menu sub-menu-depth1">
                <li class="menu-item menu-item-depth2"><a href="#">Sandwiches</a></li>
                <li class="menu-item menu-item-depth2"><a href="#">Hotdogs</a></li>
            </ul>
            </li>
            <li class="menu-item menu-item-depth1"><a href="#">Services</a></li>
            <li class="menu-item menu-item-depth1"><a href="#">Contact us</a></li>
        </ul>

    </div>

</nav>

Step 3: Include files

Download FrankenMenu and include the files in your document. Don't forget to include a copy of jQuery 1.9.1+.

<link rel="stylesheet" href="frankenmenu.css">

<script src="frankenmenu.js">

Step 4: Initialise

Initialise FrankenMenu on document ready

$(document).ready(function() {
    $("#frankenmenu").frankenMenu();
});

Options

You can customise FrankenMenu by using options. For example:

$("#frankenmenu").frankenMenu({
    menuBreakpoint: 450,
    megaMenu: true,
    mobileMenuText: true,
    mobileMenuPosition: "left",
});

Option	Description	Type	Default	Values
menuBreakpoint	The max-width in px that the mobile menu will be active	Number	600	Any number
devMode	Enables developer mode. With a submenu or megamenu open, you can press the "h" key to hold it's active state. The "r" key releases it again. Useful for inspecting or debugging	Boolean	false	true/false
Desktop menu options
megaMenu	Activate megamenu functionality	Boolean	false	true/false
desktopHoverDelay	The delay in ms before a submenu or megamenu dropdown will close after focus leaves a menu item	Number	800	Any number
desktopAnimationIn	An object equivalent to first parameter of jQuery’s .animate() method. Used to animate in submenu or megamenu dropdowns	Object	{opacity:'show'}	jQuery animation object
desktopAnimationOut	An object equivalent to first parameter of jQuery’s .animate() method. Used to animate out submenu or megamenu dropdowns	Object	{opacity:'hide'}	jQuery animation object
desktopTransitionSpeedIn	The transition speed in ms that a submenu or megamenu dropdown will transition in	Number	300	Any number
desktopTransitionSpeedOut	The transition speed in ms that a submenu or megamenu dropdown will transition out	Number	200	Any number
Mobile menu options
mobileMenuText	Show a "Menu" label next to the mobile menu toggle button	Boolean	false	true/false
mobileMenuPosition	Position the mobile menu on the left or right of the screen	String	"right"	"left" or "right"
mobileTransitionSpeedIn	The transition speed in ms that mobile submenus will slide down	Number	300	Any number
mobileTransitionSpeedIn	The transition speed in ms that mobile submenus will slide up	Number	300	Any number

On desktop menus, you can display top-level menu items in a separate sub-navigation list by adding the class menu-item-subnav.

For example:

<li class="menu-item menu-item-depth1 menu-item-subnav"> ... </li>

On desktop, these menu items will be cloned into an element with an id of frankenmenu-subnav in the same order they appear in the menu. Semantically this element should be a <nav> unless you are placing the sub-navigation inside the current <nav>. You need to place this element in the DOM yourself if you would like to use this feature.

For example:

<nav id="frankenmenu-subnav"></nav>
// or
<div id="frankenmenu-subnav"></div>

You can place this container element anywhere you want the sub-navigation to appear.

On mobile menu, these menu items will not be affected.

Submenu and megamenu dropdowns on these items are not supported so it's best to not give sub-navigation items any children.

You can add your own elements into the mobile menu bar if they are mobile-specific.

Another option would be to clone existing elements inside of it by adding the class frankenmove.

A good use-case for this could be a logo. For example:

<div id="logo" class="frankenmove">
    <a href="/"><img src="images/your-logo.svg" alt="A logo"></a>
</div>

The logo will be cloned into the mobile-header div, with the class frankenmoved.

Elements with the class frankenmove are hidden on mobile menu view, and elements with the added class frankenmoved are hidden on desktop menu view.