訪客移動鼠標前隱藏的主菜單

我有網站的視頻背景。我想要隱藏的主菜單，直到訪問者移動鼠標。一旦鼠標移動，它將永遠保持可見。

菜單是分隔的文件：「的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

來源

2016-07-24 Jiří Robenek

你是指在網站的任何地方鼠標移動顯示菜單？ –

歡迎來到計算器！請分享你的代碼並創建一個[fiddle]（https://jsfiddle.net/）來顯示你被困的地方。 – caramba

我們需要一個在線示例來測試它。使用你不能發佈它，請張貼[jsfiddle]（https://jsfiddle.net）。 – saiful

雖然它會是巨大的，得到一個例子，我已經把一個快速的jsfiddle一起爲你其中演示了一種簡單的方法：使用jQuery檢測鼠標移動相當容易，您可以使用$(document).mousemove來檢測整個頁面上的任何鼠標移動。

該示例只是在您的菜單中添加了一個類，該類將其從display:none更改爲display:block。

來源

2016-07-24 08:27:12 murraybunton

太棒了！非常感謝。 –

這就是你需要：

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

鏈接到筆：

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

目標2個菜單按鈕，使其適應你的代碼。您可以在裝載時將菜單不透明度設置爲0，以防止他淡入另一個區域，直到您。

來源

2016-07-24 08:32:43

訪客移動鼠標前隱藏的主菜單

回答

相關問題