簡單2塊手機導航

我正在嘗試做一個簡單的導航，它將在移動設備上提供，它是一個網格，如佈局。一行有兩個塊，並且會有三行。有5個鏈接，所以總數將是奇數。由於數字很奇怪，我試圖使當前頁面類佔據整個寬度，而不是連續有兩個鏈接。簡單2塊手機導航

像這樣的東西非常粗糙的圖畫： enter image description here

或者，如果鏈路3是當前頁面：

enter image description here

目前，我有一個基本的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; 
}

來源

2012-07-09 Nick

看到它在行動，你會怎樣想，如果，例如，鏈接2選擇它看起來。它應該佔據中間行，並且鏈接3向上移動？ – banzomaikaka 2012-07-10 00:10:55

真的很容易。我沒有想到這種情況。目前的班級更像是鐘聲和哨子，而不是結構的核心。如果你能告訴我如何構建，那就沒問題了。 – Nick 2012-07-10 00:20:35

將鏈接2移動到中間時，必須將鏈接3移動到鏈接2的基本位置。這對於單獨使用css來說是一個很大的改變（實際上使用css3的一些新功能可以輕鬆完成，但瀏覽器支持仍然不足）。是使用JavaScript/jQuery的一個選項？ – banzomaikaka 2012-07-10 00:35:27

忘記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/

來源

2012-07-10 00:09:12 banzomaikaka

這是完美的，謝謝你把它放在jsfiddle！ – Nick 2012-07-10 01:02:00

Noo problemo !!! – banzomaikaka 2012-07-10 01:10:03

簡單2塊手機導航

回答

相關問題