0

好的，我有这个响应式导航，这太棒了：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;
}
}

请让我知道您是否可以帮助我扩展这个惊人的导航使其更加强大，提前谢谢您！

4

2 回答 2

0

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

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

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

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

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

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

于 2013-02-19T03:22:28.443 回答
0

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

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

于 2013-02-19T03:08:08.547 回答