html - シンプルな 2 ブロック モバイル ナビゲーション

Question

レイアウトのようなグリッドであるモバイル デバイスで提供される単純なナビゲーションを作成しようとしています。1 列に 2 つのブロックがあり、3 列になります。リンクは5つなので総数は奇数になります。数が奇数なので、2 つのリンクを連続して配置するのではなく、現在のページ クラスが幅全体を占めるようにしようとしています。

この非常に大雑把な図のようなもの:

または、リンク 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/で実際の動作を確認してください。