作者 主題: 7、ECSHOP響應式網頁製作-header 中間導航欄  (閱讀 494 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
7、ECSHOP響應式網頁製作-header 中間導航欄
« 於: 七月 18, 2019, 10:39:38 上午 »
當你在後台設置了中間導航欄之後,在頁面中便能看到選單,並且自動根據瀏覽器寬度做出響應,下圖是PC和手機的差異:



中間導航欄的基本程式碼如下,這是 BootStrap 的組件,大部分情況下只需照樣複製貼上即可,然後將選單的程式碼放到 ul 裡面,類似這樣:
代碼: [選擇]
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <!-- 中間導航欄... -->
                <li><a href="連結網址">連結名稱</a></li>
            </ul>
        </div>
    </nav>

ECSHOP 的中間導航欄語法類似這樣,html部份可以針對個人需求調整,foreach 是一個 SMARTY 的循環標籤,active 是 BootStrap 的樣式,可以讓作用中的連結有不同的樣式,{if $nav.opennew eq 1} target="_blank"{/if} 判斷連結是否需要開新視窗
代碼: [選擇]
    <!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav} -->
    <li{if $nav.active eq 1} class="active"{/if}>
        <a href="{$nav.url}"{if $nav.opennew eq 1} target="_blank"{/if}>
            <i class="fa fa-mouse-pointer"></i>{$nav.name}
        </a>
    </li>
    <!-- {/foreach} -->

如果你想讓行導航欄常駐於頁面頂部,而不會隨著頁面捲動,請加上 navbar-fixed-top,例如:
代碼: [選擇]
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        ...
    </nav>

LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php