html - 简单的 2 block 移动导航

Question

我正在尝试制作一个简单的导航，它将在移动设备上提供类似网格的布局。一行有两个 block ，将有 3 行。有 5 个链接，因此总数为奇数。由于数字是奇数，我试图让当前页面类占据整个宽度，而不是让两个链接连续。

像这样非常粗略的绘图:

或者如果链接 3 是当前页面:

目前我有一个基本的 5 链接列表。这是 HTML:

            <nav id="primary_nav">
                <ul>
                    <li><a '. $this->getCurrentPage("contact") .' href="Contact">Contact</a></li>
                    <li><a '. $this->getCurrentPage("portfolio") .' href="Portfolio">Portfolio</a></li>
                    <li><a '. $this->getCurrentPage("resume") .' href="Resume">Resume</a></li>
                    <li><a '. $this->getCurrentPage("bio") .' href="Bio">Bio</a></li>
                    <li><a '. $this->getCurrentPage("index") .' href="Home">Home</a></li>
                </ul>

            </nav>

CSS:

#primary_nav ul {
    list-style: none;
    background: #1c1c1c;
    padding: 5px 0;
}

#primary_nav li a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    letter-spacing: 0.1em;
    line-height: 2em;
    height: 3em;
    border-bottom: 1px solid #383838;
}

#primary_nav li:last-child a {
    border-bottom: none;
}

#primary_nav li a:hover,
#primary_nav li a:focus {
    color: #1c1c1c;
    background: #ccc;
}

Answer 1

忘记 javascript，你可以单独使用 css(没有花哨的 css3)。

这是 Html...

<nav id="primary_nav">
  <ul>
      <li><a href="Contact">Contact</a></li>
      <li class="selected"><a href="Portfolio">Portfolio</a></li>
      <li><a href="Resume">Resume</a></li>
      <li><a href="Bio">Bio</a></li>
      <li><a href="Home">Home</a></li>
  </ul>
</nav>​

...这是 CSS...

#primary_nav {
    position: relative;
    text-align: center;
}

#primary_nav li {
    float: left;
    width: 50%;
}

#primary_nav li:nth-child(-n+3){
    margin-bottom: 40px; /*must match height set on "primary_nav a"*/
}

#primary_nav .selected {
    position: absolute;
    top: 40px; /*must match height set on "primary_nav a"*/
    width: 100%;
}

#primary_nav a {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px 10px 6px;
    border: 1px solid #aaa;
    height: 40px; 
}

您只需将 class="selected" 添加到引用当前所选页面的链接即可。

在 http://jsfiddle.net/joplomacedo/eYJG7/ 查看它的运行情况