線上書籍

一般的導覽列 <nav> <ul> <li><a href="#">連結1</a></li> <li><a href="#">連結2</a></li> </ul> </nav> 水平導覽列（依據格線，會塞滿能用空間）

• 要加上<nav>
• <ul>要加上class="row"
• <li>要上每個選項要用掉幾分之幾

<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"

<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"

<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"

<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>