How to make a dropdown menu open by clicking on top and close when you hover the mouse over it

Question

How to make a dropdown menu open by clicking on top and close when you hover the mouse over it

Navigation

#1 by (2 votes)

1

I've been searching the internet for dropdown menu , I found some very interesting, but I do not find any that do what I mentioned in the title of the question.

All menus of the genre that I found, to open need to click on above, and to close need to click somewhere out!

Unfortunately I have no knowledge of JQUERY , so I do not know how to make this adaptation!

In the following link there is a menu the way I said it, it also has something else, it comes with the tooltip effect , but when clicking on the menu this effect does not disappear, it will continue to "activity", would then leave the tooltip effect, but when clicking the menu this effect would be "overridden", and when closing the menu that effect would return to "activity"?

JSFiddle Link

Being straight forward I would like to:



Change the dropdown menu script so that when the mouse is pulled from above, the menu closes

Change the tooltip effect script so that it "works" in communion with the dropdown menu script, where clicking the drop-down menu causes the tootip effect to be "aborted" , 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><aclass="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>

jquery dropdown tooltip

asked by anonymous 19.02.2015 / 18:54

1 answer

What is the best logic to implement sub-menu with mouse events send php email

score 2 · Accepted Answer

To close when you hover the mouse over the dropdown, you can use the mouseleave event. The main changes would be in the event click of 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();
    });
});

There is also no need for the handler for the event click in html since the dropdown is closed on the mouseleave.

Code:

$(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><aclass="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>