Mouseout not working for Menu

JavaScript
1

I have a simple menu that I would like the user to not see when they mouseout()

Here is my code:

                    <div id="mySidenavR" class="sidenavR">
                        <a href="javascript:void(0)" class="closebtn" onclick="closeNavR()">×</a>
                        <a href="#portfolio">portfolio</a>
                        <a href="#about">about</a>
                        <a href="#contact">contact</a>
                        <a href="https://www.youtube.com/watch?v=_NNYI8VbFyY" target="_blank" style="font-size: 80%">dont touch this!</a>
                    </div>
                    <div class="pull-right">
                        <span style="font-size:50px;cursor:pointer" onclick="openNavR()">☰</span>
                    </div>
                </div>

                <!--close menu on mouseout-->
                <script>
                $(function() {
                    $('#mySidenavR').mouseout(function() {
                        this.hide();
                    });
                });
                </script>

This is my js for the menu:

/*Menu*/

function openNavR() {
    document.getElementById("mySidenavR").style.width = "250px";
}

function closeNavR() {
    document.getElementById("mySidenavR").style.width = "0";
}
2

I know next to nil of Javascript, but if I may ask; isn’t .hide a jQuery function?

If so, could style.display = "none" or maybe style.visibility = "hidden" be an option for vanilla Javascript?

Mind I’m just beginning to learn this. :slight_smile:

1 Like
3

JS isn’t my area either but as you are using jquery it would be:

$(this).hide();

Not:

this.hide();

However I don’t quite follow the logic? You are opening the menu on click and closing it on click but now you also want it to close when you hover away? That doesn’t make any sense and would confuse the user and indeed if you hide it then you can’t get it back again as it won’t be there (unless you are clicking something else to show it again). If you just wanted a hover menu then you can do that in CSS anyway.

You may need to define your logic a little more depth and then I’m sure one of the JS experts here can help you :slight_smile:

2 Likes
4

Basically I want it to auto close when either the user clicks on a link or moves the mouse away from the menu so that the whole page can be seen.

5

That will not provide a very nice experience as users will not know to keep their mouse within the target area .

Anyway, here’s a working example so you can test for yourself.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>

.sidenavR {
	position:absolute;
	left:-99em;
	top:-999em;
	transition:opacity .5s ease;
	opacity:0;
	max-width:250px;
	background:#ccc;
}
.sidenavR.open{
	position:relative;
	left:0;
	top:0;
	opacity:1;
}
.sidenavR a{
	display:block;
	padding:5px;10px;
	color:#000;
	text-decoration:none;
}
.pull-right{float:right;}
.open-menu,.closebtn{
	font-size:50px;
	cursor:pointer
}
</style>
</head>

<body>
<div class="pull-right"> <span class="open-menu">☰</span> </div>
</div>
<div id="mySidenavR" class="sidenavR"> 
	<a href="javascript:void(0)" class="closebtn">×</a> 
    <a href="#portfolio">portfolio</a> 
    <a href="#about">about</a> 
    <a href="#contact">contact</a> 
    <a href="https://www.youtube.com/watch?v=_NNYI8VbFyY" target="_blank" style="font-size: 80%">dont touch this!</a> </div>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!--close menu on mouseout--> 
<script>
/*Menu*/
$(function() {
    $(document).on("click", ".open-menu", function() {
	    $("#mySidenavR").toggleClass('open');
    });

    $("#mySidenavR").on("click", ".closebtn", function() {
        $("#mySidenavR").removeClass('open');
    });
    $('#mySidenavR').mouseleave(function() {
        $(this).removeClass('open');
    });
});
</script>
</body>
</html>

Your menu should be in a list structure rather than bare anchors (or at least a nav tag).

Also as you are using jquery you may as well use it for the other routines as shown in my code. Keep the onclick handlers out of the html and back in the js where they belong.

Don’t try and change css with js (most of the time). Just add and remove classes so the whole lot can be controlled through css.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.