Creating a jQuery Button as a Dropdown Menu

Question

Take a sample jQuery UI Button as a reference: http://jqueryui.com/demos/button/#splitbutton

Now, how would you implement this drop-down menu by clicking a small button? My caveat is mainly related to the conversion .button () does with the actual button, which will spoil the offset coordinates.

To express this, I need opinions on how to correctly implement the drop-down list when you click a jQuery button that integrates with the current theme.

Thanks! Alex

Answer 1

I finally did this and looked at the picture above.
I wrote about this here , and I also post all the code below.
Please refer to the blog post for a deeper explanation.

CSS

<style type="text/css"> .ItemActionButtons{} .ItemActionButtons .SaveExtraOptions { display: none; list-style-type: none; padding: 5px; margin: 0; border: 1px solid #DCDCDC; background-color: #fff; z-index: 999; position: absolute; } .ItemActionButtons .SaveExtraOptions li { padding: 5px 3px 5px 3px; margin: 0; width: 150px; border: 1px solid #fff; } .ItemActionButtons .SaveExtraOptions li:hover { cursor: pointer; background-color: #DCDCDC; } .ItemActionButtons .SaveExtraOptions li a { text-transform: none; } </style> 

HTML

 <div class="ItemActionButtons"> <div class="buttonset" style="float: right;"> <input id="btnDelete" type="button" value="Delete" class="button" onclick="ItemActionButtons.onDeleteClick.apply(this)" /> <input id="btnCancel" type="button" value="Cancel" class="button"onclick="ItemActionButtons.onCancelClick.apply(this)" /> </div> <div id="divSaveButton" class="buttonset" style="float: right;"> <input id="btnSave" type="button" value="Save" class="button" onclick="ItemActionButtons.onSaveClick.apply(this)" /> <input id="btnSaveExtra" type="button" class="button" value="+" onclick="ItemActionButtons.onSaveExtraClick.apply(this)" /> <ul class="SaveExtraOptions ui-corner-bottom" id="btnSaveExtraOptions"> <li onclick="$('#btnSaveExtraOptions').toggle(); ItemActionButtons.SaveAndNewClick.apply(this)">Save and New</li> <li onclick="$('#btnSaveExtraOptions').toggle(); ItemActionButtons.SaveAndCopyClick.apply(this)">Save and Copy</li> </ul> </div> </div> 

Javascript

 <script type="text/javascript"> $(document).delegate('#btnSaveExtra', 'mouseleave', function () { setTimeout(function(){ if (!ItemActionButtons.isHoverMenu) { $('#btnSaveExtraOptions').hide(); }}, 100, 1) }); $(document).delegate('#btnSaveExtraOptions', 'mouseenter', function () { ItemActionButtons.isHoverMenu = true; }); $(document).delegate('#btnSaveExtraOptions', 'mouseleave', function () { $('#btnSaveExtraOptions').hide(); ItemActionButtons.isHoverMenu = false; }); var $IsHoverExtraOptionsFlag = 0; $(document).ready(function () { $(".button").button(); $(".buttonset").buttonset(); $('#btnSaveExtra').button({ icons: { primary: "ui-icon-plusthick" } }); $('#btnSaveExtraOptions li').addClass('ui-corner-all ui-widget'); $('#btnSaveExtraOptions li').hover( function () { $(this).addClass('ui-state-default'); }, function () { $(this).removeClass('ui-state-default'); } ); $('#btnSaveExtraOptions li').mousedown(function () { $(this).addClass('ui-state-active'); }); $('#btnSaveExtraOptions li').mouseup(function () { $(this).removeClass('ui-state-active'); }); }); var ItemActionButtons = { isHoverMenu: false, AllowDelete: function (value) { value ? $("#btnDelete").show() : $("#btnDelete").hide() }, AllowCancel: function (value) { value ? $("#btnCancel").show() : $("#btnCancel").hide(); }, AllowSave: function (value) { value ? $("#btnSave").show() : $("#btnSave").hide() }, AllowSaveExtra: function (value) { value ? $("#btnSaveExtra").show() : $("#btnSaveExtra").hide() }, onDeleteClick: function () { }, onCancelClick: function () { }, onSaveClick: function () { }, onSaveExtraClick: function () { $('#btnSaveExtraOptions').toggle(); var btnLeft = $('#divSaveButton').offset().left; var btnTop = $('#divSaveButton').offset().top + $('#divSaveButton').outerHeight(); // +$('#divSaveButton').css('padding'); var btnWidth = $('#divSaveButton').outerWidth(); $('#btnSaveExtraOptions').css('left', btnLeft).css('top', btnTop); }, SaveAndNewClick: function () { }, SaveAndCopyClick: function () { } } </script> 

Answer 2

A pluggin is also available for this.

jQuery DropDown Button

Answer 3

IMHO, drowdowns should always be displayed "on top" of other content, and not click on it, so positioning is ideal for this. Basically add a wrapper div with position: relative around the button and drop down menu (which will have position:absolute; display:none ) and switch the visibility of the drop-down list when clicked. The absolute positioning of the drop-down menu should not depend on other child elements of the div shell, for example, buttons, so it will be displayed exactly where you specify it in CSS.

Answer 4

HTML:

 <div id="container"> <span class="arrow">&or;</span> <span class="default">Choose your option...</span> <input type="hidden" value="" class="mehidden"/> <ul class="selectBox"> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> 

CSS

 .arrow { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; font-size: 0.8em; font-weight: bold; height: 26px; left: 208px; line-height: 26px; position: absolute; text-align: center; vertical-align: middle; width: 26px; z-index: 100; } .selectBox { border: 1px solid #1F1F1F; list-style-type: none; margin: 0; padding: 3px; position: absolute; width: 200px; display:none; top: 25px; } #container { position:relative } .toggler { overflow:visible; } .default { border: 1px solid #1f1f1f; width:200px; height:20px; padding:3px; position:absolute } .selectBox li:hover { background:#ddd } 

Jquery:

 $('.arrow').click(function() { $('.selectBox').slideToggle(200).css('borderTop', 'none'); $('.selectBox li').click(function() { $('.mehidden').val($(this).text()); $('.default').text($(this).text()); $('.selectBox').slideUp(200); }); });