Menu in lower tab form

Asked

Viewed 99 times

4

I wonder how to create a menu like this in a table row?

Or what the name is for me to look up...

inserir a descrição da imagem aqui

javascript

  • You mean the 3 buttons?

  • Sim Papa Charlie

  • I will be very grateful

  • I updated JS and jsfiddle, take a look

  • I tried to make a better title for Google, I’m not sure if "tab" is the best word, maybe yes (?) What do you think? @Papacharlie / Rod

  • "Overlay elements", "floating buttons", "mouse and button activation"... I’m not very creative today :) Some served?

Show 1 more comment

2 answers

9


JS and jsfiddle updated

I did an online example on jsfiddle. I assume you intend to take actions, and that’s a record listing, so I referenced the ID of the DIV with the registration ID. With it you pass to the JS to perform the actions.

HTML

<div class="group">
    <div class="elemento" id="1">Rod</div>
</div>

<div class="group">
    <div class="elemento" id="2">Papa Charlie</div>
</div>

JS

$(document).ready(function()
{
    $('.group').bind('mouseenter', function() {
        var html = '<div id="botoes"><b>Botão 1</b>, <b>Botão 2</b>, <b>Botão 3</b></div>';
        $(this).closest('div').append(html).css( "background", "#FFFFCC" )
        $('#botoes').show();
    });

    $('.group').bind('mouseleave', function() {
        $(this).css( "background", "#ffffff" )
        $('#botoes').remove();
    });

});

CSS

*{font-family:"Tahoma", "Arial", sans-serif; font-size:12px}
.elemento{border:#f3f3f3 solid 1px; padding:5px; margin:2px}
#botoes{background:#FFFFCC; border:#f3f3f3 solid 1px; padding:5px; margin:2px 2px 2px 100px; width:170px; margin-top:-4px; border-top:none; display:none; position:absolute; text-align:center}

  • Very good guy.

  • I’m trying to adjust some details

  • 1

    Thanks Papa Charlie, I think I understand the basis, now I try to manage myself, it was of great help friend :)

  • Great, I’ll give you an update anyway :)

  • In this case as the table will be automatically generated the best would be to do with hidden div’s and give a . show() when that.

  • @Kazzkiq approached the example very well. They are 2 different ways to do.

Show 1 more comment

2

You can make this button functionality directly in CSS:

/* Div dentro da sua <td>, contendo os botões */
.embrulho{
    position:relative;
    overflow:hidden;
}    
tr:hover .embrulho{
    overflow:visible;
}

/* div que vai aparecer com os botões dentro da .embrulho */
.botoes{
    position:absolute;
}

Example of the operation: FIDDLE

To be able to trigger events on buttons you can create an attribute (as in @Papacharlie’s reply) on each of the buttons and then pull them with Javascript:

// pode ser usado com onclick="retornaId(this)", ou com um listener, etc.
function retornaId(el){
    return el.getAttribute('data-id');
}

Full example: FIDDLE

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.