I'm making a website with p5.js and jquery. It has a menu right where I put the slide effect but it has a small bug.
What I qro eh q when the user hover the mouse in the div (hover) open the menu that in the case eh the div (div-menu), but the bug eh q when I remove my mouse from the div (hover) to click on some menu field jquery closes the menu back (not qro q that happens):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>codingtrain1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="hover"></div>
<div class="div-menu">
<ul>
<li class="div-menu-item">
<a id="pincel" href="#"><img src="imgs/pincel.png" width="30px" height="30px"></a>
</li>
<li class="div-menu-item">
<a id="hidrocor" href="#"><img src="imgs/hidrocor.png" width="30px" height="30px"></a>
</li>
<li class="div-menu-item">
<a id="lapis" href="#"><img src="imgs/lapis.png" width="30px" height="30px"></a>
</li>
<li class="div-menu-item">
<a id="bucket" href="#"><img src="imgs/bucket.png" width="30px" height="30px"></a>
</li>
</ul>
</div>
<script src="libraries/p5.js"></script>
<script src="jquery-js/sketch.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="jquery-js/cod-jquery.js"></script>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
overflow: hidden;
background-color: black;
}
canvas {
margin:auto;
}
.div-menu{
position: absolute;
right: 10px;
top: 35%;
border:1px solid aliceblue;
}
#hover{
position: absolute;
right: 0;
top: 25%;
height: 50%;
width: 1px;
background-color: aliceblue;
}
ul{
padding: 5px;
}
.div-menu-item{
margin: 13px auto;
padding: 10px 10px;
list-style-type: none;
border: 2px solid aliceblue;
border-radius: 50% !important;
}
.div-menu-item:hover{
background-color: #8b8d91;
border-radius: 5px;
}
JQuery:
var timeOut;
var close= false;
$(".div-menu").toggle("slide");
$( "#hover" ).hover(function() {
timeOut = setTimeout(function(){
$(".div-menu").toggle("slide");
$("#hover").animate({
width: '10px'
})
close = true;
}, 500);
},function(){
clearTimeout(timeOut);
$(".div-menu").hover(function(){
close = false;
console.log("entrei");
}, function(){
close = true;
console.log("sai");
});
if (close){
console.log("entrei2");
$(".div-menu").toggle("slide");
$("#hover").animate({
width: '1px'
});
}
});
I noticed that if (close) {..} is running before $ (". div-menu"). hover, but I do not understand the pq, somebody can help me, I think it should be very easy to solve