JSFiddle - React, Tailwind, and code Playground

by heyjee

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css">
<div data-dojo-type="ActiveMenuBar" data-dojo-props="popupDelay:100">
    <div data-dojo-type="dijit.PopupMenuBarItem">
        <span>1</span>
        <div data-dojo-type="dijit.Menu">
            <div data-dojo-type="dijit.MenuItem">123</div>
            <div data-dojo-type="dijit.MenuItem">456</div>
        </div>
    </div>
    <div data-dojo-type="dijit.PopupMenuBarItem">
        <span>A</span>
        <div data-dojo-type="dijit.Menu">
            <div data-dojo-type="dijit.MenuItem">ABC</div>
            <div data-dojo-type="dijit.MenuItem">DEF</div>
            <div data-dojo-type="dijit.PopupMenuItem">
               <span>G</span>
               <div data-dojo-type="dijit.Menu">
                  <div data-dojo-type="dijit.MenuItem">HIJ</div>
                  <div data-dojo-type="dijit.MenuItem">KLM</div>
               </div>
            </div>
        </div>
    </div>
</div>

JavaScript

//See
//http://stackoverflow.com/questions/7850768/controlling-dijit-menubar-with-mouseover-events

dojo.require('dijit.MenuBar');
dojo.require('dijit.PopupMenuBarItem');
dojo.require('dijit.PopupMenuItem');
dojo.require('dijit.Menu');
dojo.require('dijit.MenuItem');

dojo.require('dojo.parser');

dojo.ready(function(){
    
    _ActivateOnMouseoverMixin = dojo.declare(null, {
        onItemHover: function(item){
            if(!this.isActive){
                this._markActive();
            }
            this.inherited(arguments);
        }
    });
    
    ActiveMenuBar = dojo.declare([dijit.MenuBar, _ActivateOnMouseoverMixin], {});
    
    //the following is JSFiddle-only boilerplate:
    dojo.addClass(dojo.body(), 'claro');
    dojo.parser.parse(dojo.body());
});