JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css">
<div style="height:100px"></div>
<button id="bmenu">Menu</button>
<ul class="ui-state-default ui-corner-all" id="button_submenu">
        <li><a id="show_site" href="#">Show Site Navigation</a></li>
        <li><a id="add_portlet" href="#">Add Boxes:</a></li>
        <li><a id="add_portlet" href="#">Add Boxes:</a></li>
        <li><a id="add_portlet" href="#">Add Boxes:</a></li>
        <li><a id="add_portlet" href="#">Odd Boxes:</a></li>
        <li><a id="add_portlet" href="#">Add Boxes:</a></li>
        <li><a id="add_portlet" href="#">Add Boxes:</a></li>    
</ul>
<div style="height:800px"></div>

CSS

/*making the button less space-hungry*/
.ui-button-icon-only { font-size:46%; }

/*menu*/
#button_submenu {
    display:none;
    position:absolute;
    list-style: none;
    margin:0;
    z-index:9999;
}
/*menu items have a border*/
#button_submenu li {
    border-top: 1px solid #CCC;}
#button_submenu li:hover { background-color:white; }
/*except the first one*/
#button_submenu li:first-child { border-top: none;}
/*style the actual items*/
#button_submenu li a {
    white-space:nowrap;
    text-align:left;
    padding: 4px;
}

JavaScript

$('#bmenu').button({
    icons: {
        primary: 'ui-icon-triangle-1-s'
    },
    text: false
});
$('#button_submenu').position({
     'my':'left top', 
     'at':'center bottom', 
     'of': '#bmenu',
     'collision':'none'
});

$('#bmenu').click(function(){
  $('#button_submenu').toggle();
});