Navbar 導覽列
呈現整個網站輪廓的地方，將網站的頁面進行分類與規劃，讓使用者可以更快找到想閱讀的資訊。
網頁導覽列類型
適用平台：官網PC、網銀PC
用左右排版，logo置左;選單與按鈕置右的對齊方式，左右邊界至少要留40px的padding，向下滑動時需置頂
若需加上平台名稱等資訊，請放置於Logo右方，如下樣式二示意圖
| 種類 | Enabled | Open |
|---|---|---|
|
純logo |
|
一般選單展開樣式 
選單如果要多一層分類，需要使用左側tab方式呈現 
|
|
||
|
logo+次標題 |
|
|
|
||
適用平台：行銷網頁
| 種類 | Enabled | Scroll |
|---|---|---|
|
e.Fingo版本 |
|
|
|
|
app導覽列類型
適用平台：官網M版
漢堡選放置左側，手機版僅保留一顆按鈕放置右側
| 種類 | Enabled | Open |
|---|---|---|
|
純logo |
|
|
|
|
|
|
logo+次標題 |
|
|
|
|
適用平台：行動銀行、網銀M
返回鍵與漢堡選單統一置左，標題水平置中，若有按鈕或icon等元件則放置在右邊
| 種類 | Enabled |
|---|---|
|
漢堡選單or返回鍵、icon |
|
|
漢堡選單or返回鍵、標題 |
|
|
漢堡選單or返回鍵、標題、按鈕 |
|
|
側邊欄展開 |
|
適用平台：行銷網頁
漢堡選放置右側
| Enabled | Open |
|---|---|
|
|
|
|
網頁導覽列
Download
2022-HeaderFooter 2022-HeaderFooter_eFingo
SAMPLE
HTML
//引入headerFooter css與js檔案，載點在上方
<link rel="stylesheet" href="headerFooter.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="headerFooter.js"> </script>
<header id="header">
<div class="container clearfix">
<a href="#menu" id="toggle"><span></span></a>
<div class="head_logo">
<a class="ef_tracking esunlogo" href="https://www.esunbank.com.tw/bank/personal" target="_blank"><img
src="img/HeaderFooter/logo_esun.svg" class="img-responsive" alt="玉山銀行"></a>
<img src="img/HeaderFooter/logo_line.svg" class="img-responsive logo_line" alt="">
<a class="ef_tracking efingologo" href="https://www.esunbank.com.tw/efingo/index.html"
target="_blank"><img src="img/HeaderFooter/logo_efingo.svg" class="img-responsive" alt="玉山銀行"></a>
</div>
<nav class="main-nav" role="navigation">
<ul class="anchor">
<li><a class="ef_tracking" href="https://esn.pse.is/vcre5">選單一</a></li>
<li><a class="ef_tracking" href="https://esn.pse.is/vkzeq">選單二</a></li>
<li><a class="ef_tracking" href="https://esn.pse.is/w5uph">選單三</a></li>
<li><a class="ef_tracking" href="https://esn.pse.is/vsdcv">選單四</a></li>
</ul>
</nav>
</div>
</header>
複製