Fully Working Accessible Horizontal jQuery UI Menubar!

https://github.com/ainterpreting/jquery-menubar

by Marvin Herbold

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<link rel="stylesheet" href="https://rawgit.com/ainterpreting/jquery-menubar/master/jquery.menubar.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://rawgit.com/ainterpreting/jquery-menubar/master/jquery.menubar.js"></script>
<ul id="menubar">
  <li><a href="#" onClick="alert('Clicked on Home!')"><span class="ui-icon ui-icon-home"></span>Home</a></li>
  <li>Activity A
    <ul>
      <li>Option 1</li>
      <li><span class="ui-icon ui-icon-wrench"></span>Option 2</li>
      <li><a href="#">Option 3</a></li>
    </ul>
  </li>
  <li>Activity B
    <ul>
      <li>Option 4</li>
      <li>Open Test Page
        <ul>
          <li><a href="//jsfiddle.net/mherbold/xvaw8tn2/embedded/result/">In This Window</a></li>
          <li><a href="//jsfiddle.net/mherbold/xvaw8tn2/embedded/result/" target="_blank">Target = "_blank"</a></li>
          <li>-</li>
          <li>Option 9
            <ul>
              <li>Option 10</li>
              <li>Option 11</li>
              <li>Option 12</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Option 6</li>
    </ul>
  </li>
</ul>

JavaScript

$("#menubar").menubar();