试图让这个响应式导航隐藏次要

Question

好的，我有这个响应式导航，这太棒了： http://media02.hongkiat.com/responsive-web-nav/demo/index.html

适用于任何东西，小到 Crackberry。出于本演示的目的，我只是在用户的视口小于 480 左右时启动它（换句话说，目前，如果您的视口大于该值，您将看不到导航）。

我正在写作是因为我正在开发一个带有辅助导航（基本上是 ul 中的 ul）的网站，但除非用户单击主导航，否则我们不会显示辅助导航。所有这些都是为了保持更短的页面以提高可用性。这是我正在处理的内容的骨架：

http://email.gerarddesign.com/nav/index.html

HTML：

<nav class="clearfix">
  <ul class="clearfix">
    <li><a href="#">services</a>
      <ul>
        <li><a href="#">branding</a></li>
        <li><a href="#">communications</a></li>
        <li><a href="#">interactive</a></li>
      </ul>
    </li>
    <li><a href="#">contact</a></li>
  </ul>
  <a href="#" id="pull">Menu</a> 
</nav>

CSS：

/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

/* Basic Styles */
body {
    background-color: #ece8e5;
}
nav {
height: 40px;
width: 100%;
background: #fff;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
position: relative;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}

nav li {
display: inline;
float: left;
}
nav a {
color: #FBA03A;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
/*  text-shadow: 1px 1px 0px #999; */
text-transform: uppercase;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #FBA03A;
color:white;
}
nav a#pull {
display: none;
}

nav ul li ul li {background: url("../images/arroworange.png") 33px center #F2F2F2 no-            repeat;
}
nav ul li ul li a {padding-left:25px;}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
nav { 
    height: auto;
}
nav ul {
    width: 100%;
    display: block;
    height: auto;
}
nav li {
    width: 100%;
    float: left;
    position: relative;
}

nav ul li ul li {
    width: 100%;
    float: left;
    position: relative;
    }

nav li a {
    border-bottom: 1px solid #576979;
    border-right: 1px solid #576979;
}
nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
nav {
    border-bottom: 0;
}
nav ul, nav ul ul {
    display: none;
    height: auto;
}

nav a#pull {
    display: block;
    background-color: #FBA03A;
    width: 100%;
    position: relative;
    color:#fff;
}
nav a#pull:after {
    content:"";
    background: url('nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
}



nav li {
    display: block;
    float: none;
    width: 100%;
}
nav li a {
    border-bottom: 1px solid #D4862F;
}
}

如果您能帮助我扩展这个惊人的导航使其更加强大，请告诉我，提前谢谢您！

Answer 1

您是在创建自己的框架还是只是创建一个网站？如果是后者，不要浪费时间解决现有框架已经很好地解决的问题。试试 Bootstrap（来自 Twitter），它在处理响应式设计（包括菜单和子菜单）方面做得非常出色。我发现 Bootstrap 非常易于使用，并且可以轻松添加到现有网站。

这是网址：http://twitter.github.com/bootstrap/。

Answer 2

我真的很喜欢这个导航的行为方式，它与twitter bootstrap 不同。你可以阅读 css 并看看他们做了什么。

它们很好，但我认为它们没有“双层”导航。就像你想做的那样。

我的建议是在另一个可折叠的内部构建一个可折叠的。

编辑： 我试着快速看了一下，他们称之为嵌套可折叠的方式，这里有一些例子

• jQuery experiments: Nested Accordion
• expand of child collapsible nested in parent.collapsible fires parent.collapsible.expand
• How can I collapse a nested list using jQuery?

让我们了解您的最新进展。

您可以开设一个 github 帐户并让 peolpe 为这个项目做出贡献:)。我有时间很乐意提供帮助