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"?
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>