響應導航菜單CSS代替jQuery的也許

我試圖創建時，窗口大小縮小縮小是一個負責任的導航菜單。我已經得到了它在jQuery和CSS來工作，但它在移動設備上慢，我讀到最好是它唯一的CSS代碼，但我一直沒能找到解決的辦法。這是我現在有jQuery，HTML和CSS。任何幫助表示讚賞響應導航菜單CSS代替jQuery的也許

jQuery代碼：

$(function() { 
    var menu  = $('#top_menu'); 
     menu  = $('nav ul'); 
     menuHeight = menu.height(); 

    $(top_menu).click(function(e) { 
     e.preventDefault(); 
     menu.slideToggle(); 
    }); 

    $(window).resize(function(){ 
     var w = $(window).width(); 
     if(w > 720 && menu.is(':hidden')) { 
      menu.removeAttr('style'); 
     } 
    }); 
});

HTML代碼：

 <nav> 
      <ul> 
       <li><a href="<?php bloginfo('url'); ?>/forum">Forums</a></li> 
       <li><a href="<?php bloginfo('url'); ?>/aboutus">About Us</a></li> 
       <li><a href="<?php bloginfo('url'); ?>/Portfolio">Portfolio</a></li> 
      </ul> 
      <a href="#" id="top_menu">Menu</a> 
     </nav>

CSS代碼：

nav a#top_menu { 
    display: block; 
    background: url('../images/main_logo.png') no-repeat; 
    background-position: 20px 17px; 
    text-indent: -9999em; 
    position: relative; 
    width: 100%; 
    border-bottom: 1px solid transparent; 
} 

nav a#top_menu:hover { 
    border-bottom: 1px solid #305f6d; 
} 

nav a#top_menu:after { 
    content:""; 
    background: url('../images/mini.png') no-repeat; 
    width: 30px; 
    height: 30px; 
    display: inline-block; 
    position: absolute; 
    right: 15px; 
    top: 15px; 
}

來源

2013-04-24 Momololo

如果你想用純CSS來實現這一點，那麼你真的應該看看Navigataur（https://coderwall.com/p/sujd_w），這是一個純CSS的解決方案，而不是使用jQuery。

設置如下：

參考樣式插圖中的<head>標籤，像這樣：

<html> 
<head><link rel="stylesheet" type="text/css" href="navigataur.css"></head> 
<body> 
</body> 
</html>

編輯，如果你的任何CSS元素的您的名字下面的元素名稱已經用在你的css文件中

要開箱即用，你需要以下調整您的標記（類可以在樣式表改變，如果你使用一些不同）：

外<div>一類的header
輸入[類型=複選框]與toggle ID和標籤[用於=切換]與正上方的列表菜單的一類toggle。
列表菜單（UL或醇）一類的menu

更改

HTML代碼（簡單的例子可能）：

<input type='checkbox' id='toggle'/> <label for='toggle' 
class='toggle'></label> 
<ul class="menu"> 
    <li><a href="#">Google</a></li> 
    <li><a href="#">Facebook</a></li> 
    <li><a href="#">Youtube</a></li> 
    <li><a href="#">Twitter</a></li> 
</ul>

就是這樣，你就大功告成了！

這裏是Navigataur的動作演示：http://micjamking.github.com/Navigataur/

來源

2013-04-25 01:15:36 adaam

正是我一直在尋找，謝謝。 – Momololo 2013-04-25 02:13:47

@開越酷，請標記我的答案是正確的，然後請。 – adaam 2013-04-25 02:19:50

響應導航菜單CSS代替jQuery的也許

回答

相關問題