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并看看他们做了什么。

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

我的建议是在另一个可折叠的内部生成可折叠物。

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

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

你可以打开一个github帐户并让peolpe参与这个项目:)。我有时间会很乐意帮助

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

2 个答案: