html - 简单的 2 块移动导航

Question

我正在尝试制作一个简单的导航，它将在移动设备上提供，它是一个类似网格的布局。一排有两个街区，将有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/上查看它的实际应用