導覽列 Navigation

4. 導覽列 Navigation

一般的導覽列

1<nav>
2  <ul>
3    <li><a href="#">連結1</a></li>
4    <li><a href="#">連結2</a></li>
5  </ul>
6</nav>

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

要加上<nav>

<ul>要加上class="row"

<li>要上每個選項要用掉幾分之幾

01<nav class="small-tablet">
02  <ul class="row">
03    <li class="one small-tablet fourth"><a href="#nowhere" title="連結 1 的提示">連結 1</a></li>
04    <li class="menu one small-tablet fourth"><a href="#nowhere" title="連結 2 的提示">連結 2</a>
05      <ul style="display: none;">
06        <li><a href="#nowhere" title="子連結 1 的提示">子連結 1</a></li>
07        <li><a href="#nowhere" title="子連結 2 的提示">子連結 2</a></li>
08        <li><a href="#nowhere" title="子連結 3 的提示">子連結 3</a></li>
09        <li><a href="#nowhere" title="子連結 4 的提示">子連結 4</a></li>
10      </ul>
11    </li>
12    <li class="one small-tablet fourth"><a href="#nowhere" title="連結 3 的提示">連結 3</a></li>
13    <li class="one small-tablet fourth"><a href="#nowhere" title="連結 4 的提示">連結 4</a></li>
14  </ul>
15</nav>

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

要加上<nav>並加上class="inline"

<ul>不需要class="row"

<li>不需要加class，除非有子選單才需要class="menu"

01<nav class="inline">
02  <ul>
03    <li><a href="#nowhere" title="連結 1 的提示">連結 1</a></li>
04    <li<class="menu"><a href="#nowhere" title="連結 2 的提示">連結 2</a>
05      <ul style="display: none;">
06        <li><a href="#nowhere" title="子連結 1 的提示">子連結 1</a></li>
07        <li><a href="#nowhere" title="子連結 2 的提示">子連結 2</a></li>
08        <li><a href="#nowhere" title="子連結 3 的提示">子連結 3</a></li>
09        <li><a href="#nowhere" title="子連結 4 的提示">子連結 4</a></li>
10      </ul>
11    </li>
12    <li><a href="#nowhere" title="連結 3 的提示">連結 3</a></li>
13    <li><a href="#nowhere" title="連結 4 的提示">連結 4</a></li>
14  </ul>
15</nav>

垂直導覽列

要加上<nav>

<ul>要指定佔幾分之幾

<li>不需要加class，除非有子選單才需要class="menu"

01<nav class="small-tablet">
02  <ul class="one small-tablet fourth">
03    <li><a href="#nowhere" title="連結 1 的提示">連結 1</a></li>
04    <li class="menu"><a href="#nowhere" title="連結 2 的提示">連結 2</a>
05      <ul style="display: none;">
06        <li><a href="#nowhere" title="子連結 1 的提示">子連結 1</a></li>
07        <li><a href="#nowhere" title="子連結 2 的提示">子連結 2</a></li>
08        <li><a href="#nowhere" title="子連結 3 的提示">子連結 3</a></li>
09        <li><a href="#nowhere" title="子連結 4 的提示">子連結 4</a></li>
10      </ul>
11    </li>
12    <li><a href="#nowhere" title="連結 3 的提示">連結 3</a></li>
13    <li><a href="#nowhere" title="連結 4 的提示">連結 4</a></li>
14  </ul>
15</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"

001<nav class="pagination">
002  <ul>
003    <li class="prev">
004      <a href="#">«</a>
005    </li>
006    <li style="display: none;" class="first">
007      <a href="#">1</a>
008    </li>
009    <li style="display: none;">
010      <a href="#">2</a>
011    </li>
012    <li style="display: none;">
013      <a href="#">3</a>
014    </li>
015    <li style="display: none;">
016      <a href="#">4</a>
017    </li>
018    <li style="display: none;">
019      <a href="#">5</a>
020    </li>
021    <li style="display: none;">
022      <a href="#">6</a>
023    </li>
024    <li style="display: none;">
025      <a href="#">7</a>
026    </li>
027    <li style="display: none;">
028      <a href="#">8</a>
029    </li>
030    <li style="display: inline-block;">
031      <a href="#">9</a>
032    </li>
033    <li style="display: inline-block;">
034      <a href="#">10</a>
035    </li>
036    <li style="display: inline-block;">
037      <a href="#">11</a>
038    </li>
039    <li style="display: inline-block;">
040      <a href="#">12</a>
041    </li>
042    <li style="display: inline-block;">
043      <a href="#">13</a>
044    </li>
045    <li style="display: inline-block;">
046      <a href="#">14</a>
047    </li>
048    <li style="display: inline-block;">
049      <a href="#">15</a>
050    </li>
051    <li style="display: inline-block;">
052      <a href="#">16</a>
053    </li>
054    <li style="display: inline-block;">
055      <a href="#">17</a>
056    </li>
057    <li style="display: inline-block;">
058      <a href="#">18</a>
059    </li>
060    <li class="active">
061      <a href="#">19</a>
062    </li>
063    <li style="display: inline-block;">
064      <a href="#">20</a>
065    </li>
066    <li style="display: inline-block;">
067      <a href="#">21</a>
068    </li>
069    <li style="display: inline-block;">
070      <a href="#">22</a>
071    </li>
072    <li style="display: inline-block;">
073      <a href="#">23</a>
074    </li>
075    <li style="display: inline-block;">
076      <a href="#">24</a>
077    </li>
078    <li style="display: inline-block;">
079      <a href="#">25</a>
080    </li>
081    <li style="display: inline-block;">
082      <a href="#">26</a>
083    </li>
084    <li style="display: inline-block;">
085      <a href="#">27</a>
086    </li>
087    <li style="display: inline-block;">
088      <a href="#">28</a>
089    </li>
090    <li style="display: inline-block;">
091      <a href="#">29</a>
092    </li>
093    <li style="display: inline-block;">
094      <a href="#">30</a>
095    </li>
096    <li style="display: none;">
097      <a href="#">31</a>
098    </li>
099    <li style="display: none;">
100      <a href="#">32</a>
101    </li>
102    <li style="display: none;">
103      <a href="#">33</a>
104    </li>
105    <li style="display: none;">
106      <a href="#">34</a>
107    </li>
108    <li style="display: none;">
109      <a href="#">35</a>
110    </li>
111    <li style="display: none;">
112      <a href="#">36</a>
113    </li>
114    <li style="display: none;">
115      <a href="#">37</a>
116    </li>
117    <li style="display: none;">
118      <a href="#">38</a>
119    </li>
120    <li style="display: none;" class="last">
121      <a href="#">39</a>
122    </li>
123    <li class="next">
124      <a href="#">»</a>
125    </li>
126  </ul>
127</nav>