Tad 教材網 - 線上書籍

:::

Groundwork CSS
==============

###  一般的導覽列

```
<pre class="brush:xml;">
<nav>
  <ul>
    <li><a href="#">連結1</a></li>
    <li><a href="#">連結2</a></li>
  </ul>
</nav>
```

###  水平導覽列（依據格線，會塞滿能用空間）

- 要加上<nav>
- <ul>要加上class="row"
- <li>要上每個選項要用掉幾分之幾
 
 ```
<pre class="brush:xml;">
<nav class="small-tablet">
  <ul class="row">
    <li class="one small-tablet fourth"><a href="#nowhere" title="連結 1 的提示">連結 1</a></li>
    <li class="menu one small-tablet fourth"><a href="#nowhere" title="連結 2 的提示">連結 2</a>
      <ul style="display: none;">
        <li><a href="#nowhere" title="子連結 1 的提示">子連結 1</a></li>
        <li><a href="#nowhere" title="子連結 2 的提示">子連結 2</a></li>
        <li><a href="#nowhere" title="子連結 3 的提示">子連結 3</a></li>
        <li><a href="#nowhere" title="子連結 4 的提示">子連結 4</a></li>
      </ul>
    </li>
    <li class="one small-tablet fourth"><a href="#nowhere" title="連結 3 的提示">連結 3</a></li>
    <li class="one small-tablet fourth"><a href="#nowhere" title="連結 4 的提示">連結 4</a></li>
  </ul>
</nav>
```

###  水平導覽列（行內，工具列多大就多大）

- 要加上<nav>並加上class="inline"
- <ul>不需要class="row"
- <li>不需要加class，除非有子選單才需要class="menu"
 
 ```
<pre class="brush:xml;">
<nav class="inline">
  <ul>
    <li><a href="#nowhere" title="連結 1 的提示">連結 1</a></li>
    <li<class="menu"><a href="#nowhere" title="連結 2 的提示">連結 2</a>
      <ul style="display: none;">
        <li><a href="#nowhere" title="子連結 1 的提示">子連結 1</a></li>
        <li><a href="#nowhere" title="子連結 2 的提示">子連結 2</a></li>
        <li><a href="#nowhere" title="子連結 3 的提示">子連結 3</a></li>
        <li><a href="#nowhere" title="子連結 4 的提示">子連結 4</a></li>
      </ul>
    </li>
    <li><a href="#nowhere" title="連結 3 的提示">連結 3</a></li>
    <li><a href="#nowhere" title="連結 4 的提示">連結 4</a></li>
  </ul>
</nav>
```

###  垂直導覽列

- 要加上<nav>
- <ul>要指定佔幾分之幾
- <li>不需要加class，除非有子選單才需要class="menu"
 
 ```
<pre class="brush:xml;">
<nav class="small-tablet">
  <ul class="one small-tablet fourth">
    <li><a href="#nowhere" title="連結 1 的提示">連結 1</a></li>
    <li class="menu"><a href="#nowhere" title="連結 2 的提示">連結 2</a>
      <ul style="display: none;">
        <li><a href="#nowhere" title="子連結 1 的提示">子連結 1</a></li>
        <li><a href="#nowhere" title="子連結 2 的提示">子連結 2</a></li>
        <li><a href="#nowhere" title="子連結 3 的提示">子連結 3</a></li>
        <li><a href="#nowhere" title="子連結 4 的提示">子連結 4</a></li>
      </ul>
    </li>
    <li><a href="#nowhere" title="連結 3 的提示">連結 3</a></li>
    <li><a href="#nowhere" title="連結 4 的提示">連結 4</a></li>
  </ul>
</nav>
```

###  分頁

- 要加上<nav>並加上class="pagination"
- <ul>不需要class="row"
- 每一個按鈕的結構都是用<li>包住<a>，所有頁的按鈕要一次全部列出
- 上一頁的按鈕：<li>加上 class="prev"
- 上一頁的按鈕：<li>加上 class="next"
- 第一頁的按鈕：<li>加上 class="first"
- 最後頁的按鈕：<li>加上 class="last"
- 要顯示的按鈕：<li>加上 style="display: inline-block;"
- 不顯示的按鈕：<li>加上 style="display: none;"
- 當前頁面按鈕：<li>加上 class="active"
 
 ```
<pre class="brush:xml;">
<nav class="pagination">
  <ul>
    <li class="prev">
      <a href="#">«</a>
    </li>
    <li style="display: none;" class="first">
      <a href="#">1</a>
    </li>
    <li style="display: none;">
      <a href="#">2</a>
    </li>
    <li style="display: none;">
      <a href="#">3</a>
    </li>
    <li style="display: none;">
      <a href="#">4</a>
    </li>
    <li style="display: none;">
      <a href="#">5</a>
    </li>
    <li style="display: none;">
      <a href="#">6</a>
    </li>
    <li style="display: none;">
      <a href="#">7</a>
    </li>
    <li style="display: none;">
      <a href="#">8</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">9</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">10</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">11</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">12</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">13</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">14</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">15</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">16</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">17</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">18</a>
    </li>
    <li class="active">
      <a href="#">19</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">20</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">21</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">22</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">23</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">24</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">25</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">26</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">27</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">28</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">29</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">30</a>
    </li>
    <li style="display: none;">
      <a href="#">31</a>
    </li>
    <li style="display: none;">
      <a href="#">32</a>
    </li>
    <li style="display: none;">
      <a href="#">33</a>
    </li>
    <li style="display: none;">
      <a href="#">34</a>
    </li>
    <li style="display: none;">
      <a href="#">35</a>
    </li>
    <li style="display: none;">
      <a href="#">36</a>
    </li>
    <li style="display: none;">
      <a href="#">37</a>
    </li>
    <li style="display: none;">
      <a href="#">38</a>
    </li>
    <li style="display: none;" class="last">
      <a href="#">39</a>
    </li>
    <li class="next">
      <a href="#">»</a>
    </li>
  </ul>
</nav>
```

:::