訪問者がマウスを動かす前にメインメニューが隠されている

Question

私はこれをしたい：

私はビデオ背景を持つウェブサイトを持っている。そして、訪問者がマウスを動かすまで、メインメニューを隠しておきたい。。 マウスを移動すると、それは永遠にのままです。

メニューが区切りファイルである：それは例を取得するために素晴らしいことと思いますが「header.inc.php」

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#Uvod"><img src="img/logo.jpg" width="100%"></a> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 

    <div class="collapse navbar-collapse" id="myNavbar" > 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#o-nas">O SPOLEČNOSTI</a></li> 
     <li><a href="#sluzby">SLUŽBY</a></li> 
     <li><a href="#reference">REFERENCE</a></li> 
     <li><a href="#kontakt">KONTAKT</a></li></ul> 
    </div> </div></nav> 

Link to jsfiddle

Answer 1

、私はあなたのために一緒に迅速JSFiddleを入れていますhttps://jsfiddle.net/tmaLjsvu/1/

jQueryを使用するとマウスの動きを検出するのが簡単で、$(document).mousemoveを使用すると、ページ全体のマウスの動きを検出できます。

この例では、メニューにクラスを追加するだけで、display:noneからdisplay:blockに変更されます。

Answer 2

これはあなたが必要とするすべてである：ペンに

$(window).one("mousemove", function() { 
$('#hidr, #showr').fadeIn(1000); 
}); 

はリンク：

http://codepen.io/damianocel/pen/YWaWJE

ターゲット2つのメニューボタン、あなたのコードにそれを適応させます。あなたは、あなたが他のコントートのfadeInジャンプを防ぐために、負荷時にmenues不透明度を0に設定することができます。