1

Andei procurando na internet sobre menu dropdown, achei alguns bem interessante, porém não achei nenhum que faça aquilo que me referi no titulo da pergunta.

Todos menus do gênero que achei, para abrir precisa clicar em cima, e para fechar precisa clicar em algum lugar fora!

Infelizmente não tenho nenhum conhecimento em JQUERY, portanto não sei fazer essa adaptação!

No link a seguir tem um menu do jeito que eu falei, ele também tem algo a mais, ele vem com o efeito tooltip, só que ao clicar em cima do menu esse efeito não some, ele continua em "atividade", teria como então deixar o efeito tooltip, só que ao clicar no menu esse efeito fosse "anulado", e ao fechar o menu esse efeito voltasse a "atividade"?

Link do JSFiddle

Sendo direto eu gostaria de:

  • Alterar o script do menu dropdown para que ao tirar o mouse de cima, o menu se feche
  • Alterar o script do efeito tooltip para ele "trabalhe" em comunhão com o script do menu dropdown, onde ao clicar no menu dropdown o efeito tootip seja "anulado", e ao fechar o menu dropdown o efeito tooltip volte a "atividade"

Código:

$(document).ready(function() {
    //Cache dos elementos em variáveis
	var botao = $('.botao');
	var dropDown = $('.dropDown');    
    //Clica no botão para abrir e fechar o dropDown
    botao.on('click', function(event){
        dropDown.stop(true,true).slideToggle();
        //Evita que o evento seja notificado aos outros elementos. 
        event.stopPropagation();
    });
     
    //Clicando no html vai fechar o dorpDown
    $('html').on('click', function(){
         dropDown.slideUp();
    });
});

//Efeito Tooltip
$(document).ready(function() {
// Tooltip only Text
$('.tp').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('fast');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 5; //Get X coordinates
        var mousey = e.pageY + 5; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});
});
*{
	margin:0;
	padding:0;
}
.botao{
	display: block;
	width: 160px;
	height: 30px;
	font-size: 14px;
    background: #e1e1e1;
    border-bottom: 2px solid #333;
    text-align: center;
    font-family: 'Arial';
    text-transform: uppercase;
    line-height: 30px;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}
.botao:hover{
	background: #999;
	color: #fff;
}
.dropDown{
    display: none;
    list-style: none;
	float: left;
	width: 160px;
	height: auto;
	background: #333;
}
.dropDown li{
	display: block;
	width: 100%;
	height: auto;
}
.dropDown li a{
	display: block;
	float: left;
	width: 90%;
	border-top: 1px solid #555;
	font-family: 'Arial';
    font-size: 12px;
	color: #ccc;
	text-decoration: none;
    padding: 4% 0 4% 10%;
    text-transform: uppercase;
}
.dropDown li a:hover{
	background: #000;
	color: #fff;
	
}

.tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#161616;
	border-radius:5px;
	padding:5px;
	color:#fff;
	font-size:12px Arial;
}
	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a class="botao tp" title="menu dropdown" href="javascript://">Clique aqui</a>
<ul class="dropDown">
    <li><a href="http://google.com.br/" target="_blank">DropDown! </a></li>
    <li><a href="https://github.com" target="_blank">Clique fora</a></li>
    <li><a href="http://www.youtube.com/" target="_blank">E veja o efeito</a></li>
    <li><a href="http://www.apple.com/" target="_blank">Lorem ipsum</a></li>
     
</ul>

1 Resposta 1

2

Para fechar ao tirar o mouse de cima do dropdown, você pode usar o evento mouseleave. As principais alterações ficariam no evento click de botao:

botao.on('click', function(event){
    dropDown.stop(true,true).slideToggle();

    // remove o tooltip ao clicar no dropdown
    $('.tooltip').remove();

    event.stopPropagation();

    // fecha o dropdown no evento "mouseleave"
    $('.dropDown').mouseleave(function(){
        dropDown.slideUp();
    });
});

Também não existe necessidade do handler para o evento click em html já que o dropdown é fechado no mouseleave.

Código:

$(document).ready(function() {
	var botao = $('.botao');
	var dropDown = $('.dropDown');    

    botao.on('click', function(event){
        dropDown.stop(true,true).slideToggle();
        
        // remove o tooltip ao clicar no dropdown
        $('.tooltip').remove();
        
        event.stopPropagation();
        
        // fecha o dropdown no evento "mouseleave" na ul "dropDown"
        $('.dropDown').mouseleave(function(){
            dropDown.slideUp();
        });
    });
});

//Efeito Tooltip
$(document).ready(function() {
// Tooltip only Text
$('.tp').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('fast');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 5; //Get X coordinates
        var mousey = e.pageY + 5; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});
});
*{
	margin:0;
	padding:0;
}
.botao{
	display: block;
	width: 160px;
	height: 30px;
	font-size: 14px;
    background: #e1e1e1;
    border-bottom: 2px solid #333;
    text-align: center;
    font-family: 'Arial';
    text-transform: uppercase;
    line-height: 30px;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}
.botao:hover{
	background: #999;
	color: #fff;
}
.dropDown{
    display: none;
    list-style: none;
	float: left;
	width: 160px;
	height: auto;
	background: #333;
}
.dropDown li{
	display: block;
	width: 100%;
	height: auto;
}
.dropDown li a{
	display: block;
	float: left;
	width: 90%;
	border-top: 1px solid #555;
	font-family: 'Arial';
    font-size: 12px;
	color: #ccc;
	text-decoration: none;
    padding: 4% 0 4% 10%;
    text-transform: uppercase;
}
.dropDown li a:hover{
	background: #000;
	color: #fff;
	
}

.tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#161616;
	border-radius:5px;
	padding:5px;
	color:#fff;
	font-size:12px Arial;
}
	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a class="botao tp" title="menu dropdown" href="javascript://">Clique aqui</a>
<ul class="dropDown">
    <li><a href="http://google.com.br/" target="_blank">DropDown! </a></li>
    <li><a href="https://github.com" target="_blank">Clique fora</a></li>
    <li><a href="http://www.youtube.com/" target="_blank">E veja o efeito</a></li>
    <li><a href="http://www.apple.com/" target="_blank">Lorem ipsum</a></li>
</ul>

1
  • Só mais uma coisa. Se eu coloco mais de um menu dropdown na mesma pagina, ambos entram em atividade ao mesmo tempo. Gostaria que entrasse em "atividade" apenas aquele que eu clicar! Como faz? Commented 19/02/2015 às 18:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .