So I'm coding this website and I've made the navbar disappear as I scroll down and appear again as I scroll up, but I also want it to appear as the mouse pointer approaches. You can take Mark's Newson website as an example.
I know it has to do with mouseenter() and mouseleave() but I can't get it to work.
Post the code
This is the HTML of the menu
<ul id="menu" class="header" >
<li id="TUAMAMMA"><strong>TUA MAMMA</strong></li>
<li><a href="#sfondo"><strong>Home</strong></a></li>
<li><a href="#projects"><strong>Projects</strong></a>
<ul>
<li><a href="pages/product.html">Product</a></li>
<li><a href="pages/visual.html">Visual</a></li>
<li><a href="pages/web.html">Web</a></li>
</ul>
</li>
<li><a href="#aboutme"><strong>About</strong></a></li>
<li><a href="#contact"><strong>Contact</strong></a></li>
</ul>
CSS of the menu
#menu{
display:block;
padding:0 25px;
color:#fff;
text-align:right;
position:fixed;
z-index:6;
background-color:rgba(146,0,127,0.72);
height:100px;
width:100%;
font-family:"Gotham", Helvetica Neue, Helvetica, Arial, sans-serif;
min-width:1200px;
transition:all 0.5s ease;
the rest of the CSS for the menu
#menu a{
color:#fff;
padding:40px 60px;
display:block;
white-space:nowrap;
/*z-index:2;*/
}
#menu a:hover{
color:#000000;
font-size:16px;
text-align:center;
transition-duration:0.2s;
}
#menu ul{
padding:0;
margin:0;
}
#menu a:link, #menu a:visited{
transition:0.3 s;
}
#menu ul, #menu li{
position:relative;
display:inline-block;
}
#menu li{
display:inline-block;
vertical-align:top;
height:150%;
}
#menu li ul li a{
padding:10px 10px;
background-color:#000000;
color:#fff;
display:block;
transition-duration:0.3s;
}
#menu li ul li a:hover{
color:#be23c4;
display:block;
}
#menu li ul{
display:none;
position:absolute;
z-index:1;
top:100px;
left:0;
width:100%;
text-align:center;
white-space:nowrap;
}
#menu li:hover ul{
display:block;
/*position:absolute;*/
}
#menu li ul li{
display:block;
/*position:absolute; noooooooooooooooooooooooooooooon lo devo fare mai piĆ¹*/
text-align:center;
}
JS for the menu
function coordinates (){
var pagePosition = $("html,body").scrollTop();
$("#coordinates").html(pagePosition);
var pageH = $(window).height();
if (pagePosition <= pageH){
$("#menu").fadeIn(200);
} else {
$("#menu").fadeOut(200);
}
}
$(window).scroll(
{
previousTop: 0
},
function () {
var currentTop = $(window).scrollTop();
if (currentTop < this.previousTop) {
$(".sidebar em").text("Up"); /* optional for demo */
$(".header").show();
} else {
$(".sidebar em").text("Down");
$(".header").hide();
}
this.previousTop = currentTop;
});