1
I’ve been looking on the Internet about dropdown menu, I found some very interesting, but I did not find any that do what I said in the title of the question.
All menus of the genre I found, to open need to click on top, and to close need to click somewhere outside!
Unfortunately I have no knowledge in JQUERY, so I don’t know how to make that adaptation!
In the following link has a menu the way I spoke, it also has something else, it comes with the tooltip effect, only that by clicking on the menu this effect does not disappear, it continues in "activity", it would have to leave the effect tooltip, only when clicking on the menu this effect was "nullified", and when closing the menu this effect returned to "activity"?
To be blunt, I’d like to:
- Change the script of dropdown menu so that when you take the mouse from above, the menu closes
- Change the script of tooltip effect for him to "work" in communion with the script of dropdown menu, where by clicking on the dropdown menu the tootip effect is "undone", and when closing the dropdown menu the tooltip effect returns to "activity"
Code:
$(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/" 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>
Just one more thing. If I put more than one dropdown menu on the same page, both go live at the same time. I would like you to enter "activity" only the one I click! How does?
– ivan veloso