响应导航菜单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的也许

回答

相关问题