How to create a vertical sliding list of links with jquery?

Question

Hello,

on the jQueryUI web site, at the following address, there is a sample of styling a button with a down arrow that can open a menu (maybe it's better to look at the url to be sure to understand... :O).

let's suppose to have the following markup:

<div id="buttonMenu" style="display: none;">
   <ul>
      <li><a href="#1">Menu Item 1</a></li>
      <li><a href="#2">Menu Item 2</a></li>
      <li><a href="#3">Menu Item 3</a></li>
      <li><a href="#4">Menu Item 4</a></li>
   </ul>
</div>

Can somebody tell me how can I show the div as a menu when the user click on that arrow?

Thanks in advance for your help!

Answer 1

The most generic solution would be to wrap the split button in a container with no padding or margin, set position: relative on the container and then use something like this to define where the menu will appear when you use .show():

position: absolute;
left: 0;
top: <height of the split button>;

However, a simpler solution would be to find a context menu plugin which allows manual triggering and set up a click handler which dynamically retrieves the position of the split button's bottom-left corner and triggers the context menu plugin there. That way, you don't have to re-invent things like having the menu re-hide if the user clicks anywhere outside it.