This is Sidr, a plugin that allows menu sidebars to appear on the sides of the page.
I tried to create a custom button that would toggle the opening and closing of the sidebar - namely a #hoverzone box which would open the bar when the cursor is hovering over it, and close when the cursor has moved out of the box.
But there's something wrong with it that I can't pinpoint exactly, it just doesn't work by hover and only works when I click the box for some reason.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="jquery.sidr.light.css">
<style>
#hoverzone {
border:2px solid black;
width:200px;
height:100px
}
</style>
</head>
<body>
<div id="hoverzone">
</div>
<div id="sidr">
</div>
<script src="jquery-1.11.1.js"></script>
<script src="jquery.sidr.min.js"></script>
<script>
$(document).ready(function() {
$('#hoverzone').hover(function() {
$.sidr('open', '#sidr');
},
function(){
$.sidr('close', '#sidr');
}
); preventDefaultEvents: false
});
</script>
</body>
</html>
Would appreciate it if someone could point out the problem with the code above ^ or offer an alternative solution.
try without '#'