JSFiddle - React, Tailwind, and code Playground

by chunkymonkey

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css">
<body> 
 
<p id="menuLog">You chose: <span id="menuSelection"></span></p> 
 
<a tabindex="0" href="#news-items-2" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchybreadcrumb"><span class="ui-icon ui-icon-triangle-1-s"></span>ipod-style menu w/ breadcrumb</a> 
<div id="news-items-2" class="hidden"> 
<ul>
    <li><a href="#">Alternative Rock</a>
        <ul>
            <li><a href="#">New Releases</a></li>    
            <li><a href="#">General</a></li>
            <li><a href="#">Compilations</a></li>
            <li><a href="#">Live Albums</a></li>
            <li><a href="#">Vinyl Records</a></li>
            <li><a href="#">Alternative Styles</a></li>
            <li><a href="#">American Alternative</a></li>
            <li><a href="#">British Alternative</a></li>
            <li><a href="#">Goth &amp; Industrial</a></li>
            <li><a href="#">Hardcore &amp; Punk</a></li>
            <li><a href="#">Indie &amp; Lo-Fi</a></li>
            <li><a href="#">New Wave &amp; Post-Punk</a></li>
            <li><a href="#">Singer-Songwriters</a></li>
            <li><a href="#">Ska</a></li>
        </ul>
    </li>
    
    <li><a href="#">Blues</a>
        <ul>
            <li><a href="#">New Releases</a></li>    
            <li><a href="#">General</a></li>
            <li><a href="#">Compilations</a></li>
            <li><a href="#">Live Albums</a></li>
            <li><a href="#">Acoustic Blues</a></li>
            <li><a href="#">Chicago Blues</a></li>
            <li><a href="#">Classic Female Vocal Blues</a></li>
            <li><a href="#">Contemporary Blues</a></li>
            <li><a href="#">Delta Blues</a></li>
            <li><a href="#">Electric Blues Guitar</a></li>
            <li><a href="#">Harmonica Blues</a></li>
            <li><a href="#">Jump Blues</a></li>
            <li><a...

CSS

body { font-size:62.5%; }
    #menuLog { font-size:1.4em; margin:10px 20px 20px; }
    .hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
    
    .fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
    .fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
    a.fg-button { float:left;  }
    button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */
    
    .fg-button-icon-left { padding-left: 2.1em; }
    .fg-button-icon-right { padding-right: 2.1em; }
    .fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
    .fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
    .fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }     /* solo icon buttons must have block properties for the text-indent to work */    
    

.fg-menu-container { position: absolute; top:0; left:-999px; padding: .4em;  overflow: hidden; }
.fg-menu-container.fg-menu-flyout { overflow: visible; }

.fg-menu, .fg-menu ul { list-style-type:none; padding: 0; margin:0; }

.fg-menu { position:relative; }
.fg-menu-flyout .fg-menu { position:static; }

.fg-menu ul { position:absolute; top:0; }
.fg-menu ul ul { top:-1px; }

.fg-menu-container.fg-menu-ipod .fg-menu-content, 
.fg-menu-container.fg-menu-ipod .fg-menu-content ul { background: none !important; }

.fg-menu.fg-menu-scroll,
.fg-menu ul.fg-menu-scroll { overflow: scroll;  overflow-x: hidden; }

.fg-menu li { clear:both; float:left; width:100%; margin: 0; padding:0; border: 0; }    
.fg-menu li li { font-size:1em; } /* inner li font size must be reset so that they don't blow up */

.fg-menu-flyout ul ul { padding: .4em; }
.fg-menu-flyout li { position:relative; }

.fg-menu-scroll { overflow: scroll; overflow-x: hidden; }

.fg-menu-breadcrumb { margin:...

JavaScript

var allUIMenus = [];

$.fn.drilldown = function(options){
    var caller = this;
    var options = options;
    var m = new Menu(caller, options);    
    allUIMenus.push(m);
    
    $(this)
    .mousedown(function(){
        if (!m.menuOpen) { m.showLoading(); };
    })    
    .click(function(){
        if (m.menuOpen == false) { m.showMenu(); }
        else { m.kill(); };
        return false;
    });    
};

function Menu(caller, options){
    var menu = this;
    var caller = $(caller);
    var container = $('<div class="fg-menu-container ui-widget ui-widget-content ui-corner-all">'+options.content+'</div>');
    
    this.menuOpen = false;
    this.menuExists = false;
    
    var options = jQuery.extend({
        content: null,
        width: 180, // width of menu container, must be set or passed in to calculate widths of child menus
        maxHeight: 180, // max height of menu (if a drilldown: height does not include breadcrumb)
        positionOpts: {
            posX: 'left', 
            posY: 'bottom',
            offsetX: 0,
            offsetY: 0,
            directionH: 'right',
            directionV: 'down', 
            detectH: true, // do horizontal collision detection  
            detectV: true, // do vertical collision detection
            linkToFront: false
        },
        showSpeed: 200, // show/hide speed in milliseconds
        callerOnState: 'ui-state-active', // class to change the appearance of the link/button when the menu is showing
        loadingState: 'ui-state-loading', // class added to the link/button while the menu is created
        linkHover: 'ui-state-hover', // class for menu option hover state
        linkHoverSecondary: 'li-hover', // alternate class, may be used for multi-level menus        
    // ----- multi-level menu defaults -----
        crossSpeed: 200, // cross-fade speed for multi-level menus
        crumbDefaultText: 'Choose an option:',
        backLink: true, // in the ipod-style menu: instead of...