Menus plugin

Open menu item on click, hover, for touch and other

by Maksim Kachurin

HTML

<nav class="">
    <div class="item-container">
        <button class="open-submenu" id="p1">КЛИК1</button>
        <div class="submenu p1"> <span>Подменю1.1</span>

        </div>
        <div class="item-container">
            <button class="open-submenu" id="p2">КЛИК2</button>
            <div class="submenu p2"> <span>Подменю1.2</span>

            </div>
        </div>
        <div class="item-container">
            <button class="nav-button" id="p6">НАВЕДИ1</button>
            <div class="submenu p6"> <span>Подменю2.1</span>

            </div>
        </div>
        <div class="item-container">
            <button class="nav-button" id="p7">НАВЕДИ2</button>
            <div class="submenu p7"> <span>Подменю2.2</span>

            </div>
        </div>
</nav>
</div>

SCSS

body {
    background: #F3F5F6;
    font-family: sans-serif;
    font-size: 13px;
}
.submenu {
    display: none;
    opacity: 0;
    width: 300px;
    min-height: 50px;
    border: 1px solid #eee;
    background: #ffffff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 5px 5px #CCC;
    z-index:999;
}
.submenu.active {
    display: block;
    opacity: 1;
}
nav {
    width: 100%;
    heigth: 50px;
    background: #eaeaea;
    .item-container {
        display: inline-block;
        position: relative;
        button {
            width: 200px;
            height: 50px;
            border: none;
            border-right: 1px solid #bbb;
            background: none;
        }
        button.active {
            font-weight: bold;
        }
        .submenu {
            position: absolute;
            display: none;
            opacity: 0;
        }
        .submenu.active {
            display: block;
            opacity: 1;
        }
    }
}

JavaScript

(function ($) {
    jQuery.fn.submenus = function (options) {
        options = $.extend({
            hover: false,
            autohide: false,
            timeout: 500
        }, options);

        var touchSupported = 'ontouchstart' in window,
            mousedownEvent = 'mousedown' + (touchSupported ? ' touchstart' : ''),
            mousemoveEvent = 'mousemove' + (touchSupported ? ' touchmove' : ''),
            mouseupEvent = 'mouseup' + (touchSupported ? ' touchend' : ''),
            mouseenterEvent = 'mouseenter' + (touchSupported ? ' click' : ''),
            mouseleaveEvent = 'mouseleave';

        var self = this;

        var make = function () {
            var id = $(this).attr('id'),
                menu = $(this),
                submenu = $('.' + id),
                both = $(menu).add(submenu[0]);

            addToExclude(both);

            // Prevent hide on mousemove from button to submenus
            submenu.mouseenter(function (e) {
                clearTimeout(window.smstmt);
            });

            // ON MENU CLICK event
            menu.on('click', function (e) {
                clearTimeout(window.smstmt);

                // check open or not
                var isActive = submenu.hasClass('active');

                // close all opened
                closeMenu();

                // if it was not active - add active class
                if (!isActive) {
                    openMenu();
                }
            });

            // ON HOVER option
            if (options.hover) {
                // MOUSE ENTER: MENU 
                menu.on(mouseenterEvent, function (e) {
                    if (e.type == 'click') return;
                    clearTimeout(window.smstmt);
                    window.smstmt = setTimeout(function () {
                        // close all opened
                        closeMenu();
                        openMenu();
                    }, 200);
                });
            }
            //...