CSS垂直菜單與嵌套列表，需要在MouseOut jQuery延遲

我是新的jQuery，我試圖解決我的導航問題。我建立了一個包含許多嵌套列表的垂直菜單。這純粹是CSS，但我的客戶請求當前打開的子菜單在你不再徘徊時保持打開一秒鐘左右。CSS垂直菜單與嵌套列表，需要在MouseOut jQuery延遲

這裏是我工作的網站：http://dev.musgraveagencies.com/

這裏是他們目前擁有的網站，以及他們是如何想的菜單延遲：http://www.musgraveagencies.com/

我相信我可以使用jQuery實現這一目標，但我希望網站按原樣工作，如果Javascript未啓用。

編輯：感謝大家的幫忙！以下是最終的代碼。

我的HTML：

<body class="nojs"> 
     <div id="nav"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Development Projects</a> 
       <ul> 
        <li><a href="#">Design Build</a> 
         <ul> 
          <li><a href="#">Interior Design</a> 
           <ul> 
            <li><a href="#">Project Example</a></li> 
           </ul> 
          </li> 
          <li><a href="#">Project Example 1</a></li> 
          <li><a href="#">Project Example 2</a></li> 
          <li><a href="#">Project Example 3</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Industrial</a> 
         <ul> 
          <li><a href="#">Project Example 1</a></li> 
          <li><a href="#">Project Example 2</a></li> 
          <li><a href="#">Project Example 3</a></li> 
          <li><a href="#">Project Example 4</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Residential</a></li> 
        <li><a href="#">Neighbourhood</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
</body>

我的CSS：

#nav { 
    width: 156px; 
    font: 9pt 'TeXGyreScholaRegular', Arial, sans-serif; 
    text-align: left; 
} 

#nav ul a { 
    color: #fff; 
    display: block; 
    overflow: auto; 
    line-height: 19pt; 
    text-indent: 2px; 
} 

#nav ul a:hover { 
    color: #fff; 
    text-decoration: none; 
} 

#nav ul li:hover { 
    background: #484848; 
} 

#nav ul { 
    width: 156px; 
} 

#nav ul li { 
    list-style: none; 
    background: #000; 
    position: relative; 
    z-index: 100; 
} 

#nav ul li ul { 
    position: absolute; 
    width: 156px; 
    top: 0; 
    left: 156px; 
} 

body.nojs #nav ul li ul { 
    display: none; 
} 

body.nojs #nav ul li:hover > ul { 
    display: block; 
}

我的jQuery：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#nav ul li ul').hide(); 
     $('body').removeClass('nojs'); 

     var config = {  
      sensitivity: 2, 
      interval: 200,  
      timeout: 700, 
     }; 

     var animating = false; 

     $('#nav ul li').hoverIntent(
     function() { 
       animating = true; 
       $('> ul', this).fadeIn(100, function() { 
        animating = false; 
       }); 
     }, 

     function() { 
      animating = true; 
      $('> ul', this).delay(400).fadeOut(200, function() { 
       animating = false; 
      }); 
     }); 
    }); 
</script>

來源

2013-01-16 DERNERSERFT

有很多菜單插件...比重塑車輪更容易 – charlietfl

代碼的問題在於，您正在使用jQuery觸發轉換（淡入淡出），但立即使用CSS隱藏該元素。所以這是毫不拖延地發生的。

您可以使用transition-delay或animation-delay屬性與CSS3，但這些不支持在IE中。所有其他人都支持他們，但不支持大多數版本

transition-delay: 2s; 
-moz-transition-delay: 2s; /* Firefox 4 */ 
-webkit-transition-delay: 2s; /* Safari and Chrome */ 
-o-transition-delay: 2s; /* Opera */

所以，我認爲你應該遷移大部分的CSS（懸停僞類）的JavaScript/jQuery和隱藏/顯示用的setTimeout()方法或jQuery的delay()方法延遲。

UPDATE：

既然你是擔心，如果JavaScript是不是在用戶的瀏覽器開啓;沒有JavaScript和CSS延遲相關的屬性，我不認爲有可能推遲對HTML元素的外觀進行更改。

所以你可以做的是;

創建菜單的CSS版本（如果需要延遲，使用transition-delay和/或animation-delay CSS3屬性）。如果這些屬性在瀏覽器上不受支持，那麼只有在你不能得到「延遲」的情況下，你的菜單仍然有效。
創建一個JavaScript版本的菜單（使用setTimeout等延遲方法）。
對非JavaScript內容和純CSS菜單使用<noscript>標籤，並將它們放在裏面。

這樣你就會讓兩個用戶滿意。

來源

2013-01-16 21:49:58

我很擔心如果Javascript未啓用，導航功能將如何工作，所以我希望找到一種不使用隱藏和顯示在jQuery中的方法。感謝您向我展示轉換延遲！ – DERNERSERFT

@Dynerseft，你在你的問題中說：「我無法讓上面的jQuery工作」。所以我們正在回答這個問題。「如果瀏覽器中未啓用JavaScript，該怎麼辦」是另一個問題。如果你的目標是一般觀衆，JavaScript可能會開啓。大多數現代（客戶端）Web應用程序都依賴於JS。無論如何，沒有JS，你最好的選擇（延遲）在我的答案中解釋：CSS transition-delay –

@Dynerseft，我更新了你的第二個問題的答案。 –

使用jQuery HoverIntent plugin

你可以看到它使用@ thecl。 com，它也有幫助這是ie8/7中的一個問題，無法從父錨到子導航。

來源

2013-01-16 21:27:49

謝謝，整潔的小插件。 – DERNERSERFT

試試這個小提琴：http://jsfiddle.net/hamidlab/adadv/

我已刪除了所有頂級和分層次班，並用>目標直接孩子。

曾經做過的JS也有點變化（你不需要JS，如果你不關心淡入效果）

$('#nav ul li').hover(function(){ 
    $(' > ul', this).stop(true, true).fadeIn(); 
}, function(){ 
    $(' > ul', this).hide(0); 
});

一些變化CSS：http://jsfiddle.net/hamidlab/adadv/1/

注意：對於這個小東西，你不需要插件。我覺得最好不要使用插件，並儘可能保持簡單和乾淨。

來源

2013-01-16 21:35:59 HamidRaza

謝謝，這有幫助。 – DERNERSERFT

@Dynerseft歡迎 – HamidRaza

CSS垂直菜單與嵌套列表，需要在MouseOut jQuery延遲

回答

相關問題