[jQuery Advanced] Submenu Plugin Slight Submenu

Plugin Features:

        Very easy to use, only a few KB in size, full control over every aspect

        almost no CSS

        Multiple levels of nested submenus, each nested by itself (full control, again)

        The inline CSS option allows css to be inlined

        Custom scenes, deeply nested (loose, structured and even bumpy, no pun intended)

        Compatible with all browsers (remember, jQuery 2* and above is not supported < IE9, if you are using, for those older browsers are not supported)

 

Plugin options and usage:

To use the plugin you need >= 1.8 jQuery and the plugin itself:

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="js/jquery.slight-submenu.min.js"></script>

If you don't use inline CSS (plugin option), there are some mandatory CSS you might want to include or copy from:

<link rel="stylesheet" href="css/slight-submenu.css" />

After that, you can simply apply the plugin element

$('selector').slightSubmenu(options);

 

Options:

You can modify each option

$('#master-menu').slightSubmenu({
    buttonActivateEvents: 'click mouseenter',   // Space separated events string (just as you would use in a plain jQuery .on('events-string', ...) ) that activate the expand/collapse buttons
    buttonCloseNotSubmenuEvents: 'mouseenter',  // the events that should collapse a submenu are the same as the ones that open it - this option lets you specify those that should not be able to close it
    multipleSubmenusOpenedAllowed: true,    // pretty straighforward - if set to false, only a single submenu at a time can stay expanded
    prependButtons: false,  // this is where to put the buttons inside the parent LI - in the beginning (true) or just before the submenu UL (false)
    applyInlineCss: false,  // more control with javascript
    topUlClass: 'slight-submenu-master-ul', // class for the top most ul, holding the LIs with submenu ULs
    topLiClass: '', // class for the top UL LIs
    topLiWithUlClass: 'li-with-ul', // class for the LIs that hold an UL
    buttonClass: 'slight-submenu-button',   // class for the expand/collapse buttons
    buttonSubmenuOpenedClass: 'opened', // class for the button when its corresponding submenu is visible
    submenuUlClass: 'slight-submenu-ul',    // class for the
    directLiInlineCss: $.fn.slightSubmenu.defDirectLiInlineCss, // *InlineCss options hold js objects with css definitions (those options correspond to the elements we can attach classes to)
    submenuUlInlineCss: $.fn.slightSubmenu.defSubmenuUlInlineCss,
    topContainerInlineCss: $.fn.slightSubmenu.defTopContainerInlineCss,
    buttonInlineCss: $.fn.slightSubmenu.defButtonInlineCss,
    buttonActiveInlineCss: $.fn.slightSubmenu.defButtonActiveInlineCss,
    // callbacks that control the way the currently processed submenu is managed
    handlerButtonIn: $.fn.slightSubmenu.handlerButtonIn,    // receives a jQuery object (the $submenuUl) as an argument; makes the menu visible
    handlerForceClose: $.fn.slightSubmenu.handlerForceClose // receives a jQuery object (the $submenuUl) as an argument; hides the menu
    handlerGenerateButtonMarkup: $.fn.slightSubmenu.handlerGenerateButtonMarkup // allows for custom submenu button markup
});

A reference to $.fn.slightSubmenu.* objects/functions looks like this:

$.fn.slightSubmenu.handlerButtonIn = function($submenuUl) {
    $submenuUl.show(1000);
};
$.fn.slightSubmenu.handlerForceClose = function($submenuUl) {
    $submenuUl.hide(1000);
};
// the passed argument, by default is settings.buttonClass
$.fn.slightSubmenu.handlerGenerateButtonMarkup = function(buttonClass) {
    return '<span class="' + buttonClass + '"></span>';
};
$.fn.slightSubmenu.defTopContainerInlineCss = { position: 'relative' };
$.fn.slightSubmenu.defDirectLiInlineCss = {};
$.fn.slightSubmenu.defSubmenuUlInlineCss = {};
$.fn.slightSubmenu.defButtonActiveInlineCss = {};
$.fn.slightSubmenu.defButtonInlineCss = {
    background: '#ccc',
    display: 'inline',
    marginLeft: '8px',
    width: '10px',
    height: '18px',
    position: 'absolute',
    cursor: 'pointer'   // this might be the difference
                        // between the 'click' working on iOS and not
};

 

There is no test, please test and use!