Demo - Menu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">
  <h1>Hierarchical Menus</h1>
</div>

<div class="menubar">
  <div class="container">
    <div id="menu-file"></div>
    <div id="menu-edit"></div>
    <div id="menu-format"></div>
  </div>
</div>

<div class="container">

  <p id="menu-target">
    Wijmo Menus are great!
  </p>
  <p>
    Wijmo's hierarchical menus support all the options supported
    by flat menus, including <b>openOnHover</b>, <b>isAnimated</b>,
    and right-to-left layouts.</p>
  <div class="container">
    <label>
      openOnHover
      <input id="openOnHover" type="checkbox" checked="checked">
    </label>
    <label>
      isAnimated
      <input id="isAnimated" type="checkbox" checked="checked">
    </label>
    <label>
      Right-to-Left
      <input id="rtl" type="checkbox">
    </label>
  </div>
  <p>
    The menu bar above contains three Menu controls. Each one is bound to
    a hierarchical list of commands which is an array of objects where items
    may contain child items. For example, the File menu has a New option with
    three sub-items: Project, Site, and
    File.</p>
  <p>
    The first two menus respond to the menu's <b>itemClicked</b> event, which
    is raised when the user clicks an item that does not contain child items.</p>
  <p>
    This is how the File menu was created:</p>
  <pre>
// create File menu (uses itemClicked event)
var menuFile = new wijmo.input.Menu('#menu-file', {
    header: 'File',
    displayMemberPath: 'header',
    subItemsPath: 'items',
    itemsSource: getFileMenuItems(),
    itemClicked: function (s, e) {
        target.innerHTML = 'Thank you for...

CSS

.container>label {
  margin-bottom: 15px;
  margin-right: 25px;
}

/* element affected by the menu commands */

#menu-target {
  font-size: 18pt;
  text-align: center;
  padding: 16px;
  margin: 6px 0;
  background: #00c1d5;
  color: black;
  border: 1px solid rgba(0, 0, 0, .25);
}

/* bar containing the menus */

.menubar {
  position: sticky;
  display: flex;
  background: #fddfa7;
  padding: 12px;
  top: 0;
}

/* customize wijmo default styles */

.wj-state-selected {
  color: black;
  background: orange;
}

.wj-menu {
  padding: 6px 14px;
  border: none;
  background: transparent;
}

.wj-menu:hover,
.wj-menu.wj-state-focused {
  background: rgba(0, 0, 0, .05);
}

.wj-menu .wj-input-group .wj-input-group-btn {
  display: none;
  /* hide the menu's drop-down buttons */
}

.wj-listbox.wj-menu-items {
  min-width: 8em;
  border: none;
  background: #fddfa7;
}

.wj-listbox.wj-menu-items .wj-listbox-item:not(.wj-separator) {
  padding: 6px 12px;
}

JavaScript

onload = function() {

  // element used to show menu commands
  var target = document.getElementById('menu-target'),
    targetStyle = target.style,
    computedStyle = getComputedStyle(target);

  // create File menu (uses itemClicked event)
  var menuFile = new wijmo.input.Menu('#menu-file', {
    header: 'File',
    displayMemberPath: 'header',
    subItemsPath: 'items',
    openOnHover: true,
    isAnimated: true,
    itemsSource: getFileMenuItems(),
    itemClicked: function(s, e) {
      target.innerHTML = 'Thank you for clicking <b><i>' + s.text + '</i></b>!';
    }
  });

  // create Edit menu (uses itemClicked event)
  var menuEdit = new wijmo.input.Menu('#menu-edit', {
    header: 'Edit',
    displayMemberPath: 'header',
    subItemsPath: 'items',
    openOnHover: true,
    isAnimated: true,
    itemsSource: getEditMenuItems(),
    itemClicked: function(s, e) {
      target.innerHTML = 'Thank you for clicking <b><i>' + s.text + '</i></b>!';
    }
  });

  // create Format menu (uses command property)
  var menuFormat = new wijmo.input.Menu('#menu-format', {
    header: 'Format',
    displayMemberPath: 'header',
    subItemsPath: 'items',
    openOnHover: true,
    isAnimated: true,
    itemsSource: getFormatMenuItems(),
    command: getFormatMenuCommand()
  });

  // toggle animations
  document.getElementById('isAnimated').addEventListener('click', function(e) {
    [menuFile, menuEdit, menuFormat].forEach(function(menu) {
      menu.isAnimated = e.target.checked;
    })
  });

  // toggle open on hover
  document.getElementById('openOnHover').addEventListener('click', function(e) {
    [menuFile, menuEdit, menuFormat].forEach(function(menu) {
      menu.openOnHover = e.target.checked;
    })
  });

  // show right-to-left menus
  document.getElementById('rtl').addEventListener('click', function(e) {
    var menubar = document.querySelector('.menubar');
    menubar.setAttribute('dir', e.target.checked ? 'rtl' : 'ltr');
   ...