Menu rozwijane po kliknięciu w przycisk

Sumulacja menu rozwijanego zawierającego przyciski.

Wymaga jQuery UI (button)

JS:

onEventShowMenu = function(event) {
    var menuId = event.data ? event.data.id : null;
    var elBtn = jQuery(this);
    var elMenu = menuId ? jQuery('#' + menuId) : elBtn.next('ul');
 
    if (elMenu.is(':visible')) {
        elMenu.hide();
        return false;
    }
 
    if(!elMenu.data('inited')){
        elMenu.css('min-width', elBtn.width())
        elMenu.data('inited', true);
    }
 
    elMenu.show().position({
        my: "left top",  at: "left bottom", of: elBtn
    });
 
    jQuery(document).one("click", function() {
        elMenu.hide();
    });
    return false;
}
 
jQuery(function() {
    jQuery( ".action.close" )
    .button({
        icons: {
                primary: "ui-icon-power",
                secondary: "ui-icon-triangle-1-s"
        }
    })
    .click(onEventShowMenu)
    ;
});

Html:

<button class="action close" style="">Zamknij</button>
<ul class="button-menu" style="display:none;">
    <li><button class="action-trash">Do kosza</button></li>
    <li><button class="action sZweryfikowany">Zweryfikowano pozytywnie</button></li>
    <li><button class="action sDuplikat">Duplikat</button></li>
    <li><button class="action sOdrzucony">Odrzucono z przyczyn formalnych</button></li>
    <li><button class="action sRezygnacja">Rezygnacja Użytkownika</button></li>
</ul>

Css:

.button-menu {position:absolute; padding:0; list-style-type:none; background-color:white; border:1px solid #f0f0f0; padding:0 1px;}
.button-menu button {width:100%; text-align:left; margin:0}
.button-menu li {padding:1px 0; margin:0;}

Dodaj komentarz Anuluj pisanie odpowiedzi