:::

4. 導覽列 Navigation

一般的導覽列

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

 

 


:::

搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D29%26tbdsn%3D836

書籍目錄

展開 | 闔起

線上使用者

71人線上 (16人在瀏覽線上書籍)

會員: 0

訪客: 71

更多…