網頁開發 網頁設計

[教學] Bootstrap 導覽列選單太長時,可左右滑動切換選單並支援子選單

梅干 2018/07/25

梅問題-[教學]Bootstrap Navbar導覽列選單太長時,可左右滑動切換選單

  Bootstrap內建許多功能與特效,而在眾多的功能中,最常被使用到的就是它的導覽列選單,除了會自動判斷螢幕尺寸,調整選單的型式,讓選單可以符合各裝置使用,甚至也支援子選單,同時完全無需寫到任何的CSS與JS,所有的選單結構都由HTML來設定,相當的方便。

但唯一讓梅干感到困擾的是,當選單過長時,就會出現折行,或是當太長時,就自動隱藏變成手機的漢堡選單,讓梅干感覺在操控上有些不便,因此那一天看到許多新聞網的選單,也是落落長但卻是透過左右滑動,來解決選單過長的問題,因此梅干就花了點時間,研究了一下並將Bootstrap的導藏列選單,過長時也可左右滑動,並且還支援多層選單,因此當你選單也太長的朋友,現在也一塊來看看囉!


Step1
首先,先產生Bootstrap導覽列選單,並加入選單,當超出選單範圍時,就會出現折行。
梅問題-[教學]Bootstrap Navbar導覽列選單太長時,可左右滑動切換選單(支援多層選單)
Step2
這時再加入,以下的CSS,強制選單不換行,以及讓overflow-x設為auto,這樣當選單超出範圍時,就可左右滾動,完全無需透過js,則是運用溢位這屬性來完成。
overflow-x: auto;
white-space: nowrap;
webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;

梅問題-[教學]Bootstrap Navbar導覽列選單太長時,可左右滑動切換選單(支援多層選單)


Step3
由於梅干支援次選單,因此這部分,就得透過JS來作控製,因此再將下方的JS放到jquery下方,就可實現當選單超出時,可左右滾動,當有次選單時,點選又可展開。
$(function(){
    $('.navbar').after('<div id="nav-menu" class="container"></div>');
    $('#nav-menu').append('<div class="collapse navbar-collapse"></div>');
    $('.navbar-collapse').append('<div class="scroll"></div>');
    $('.scroll').append($('.navbar-nav').clone(true));
    $('#nav-menu .scroll>ul>li>ul').hide();
    $('.navbar>div>.navbar-collapse').remove();
    $('.caret').click(function(){
        var visible = $(this).parent().next().is(":hidden");

    <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&#39;#nav-menu .scroll&gt;ul&gt;li&gt;ul&#39;</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">hide</span><span style="color: #000000; font-weight: bold">();</span>
    <span style="color: #204a87; font-weight: bold">var</span> <span style="color: #000000">total</span> <span style="color: #ce5c00; font-weight: bold">=</span> <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #204a87; font-weight: bold">this</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">parent</span><span style="color: #000000; font-weight: bold">().</span><span style="color: #000000">next</span><span style="color: #000000; font-weight: bold">().</span><span style="color: #000000">height</span><span style="color: #000000; font-weight: bold">();</span>

    <span style="color: #204a87; font-weight: bold">if</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&#39;#nav-menu .scroll&#39;</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">height</span><span style="color: #000000; font-weight: bold">()</span><span style="color: #ce5c00; font-weight: bold">==</span><span style="color: #0000cf; font-weight: bold">50</span><span style="color: #000000; font-weight: bold">){</span>
        <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #204a87; font-weight: bold">this</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">parent</span><span style="color: #000000; font-weight: bold">().</span><span style="color: #000000">next</span><span style="color: #000000; font-weight: bold">().</span><span style="color: #000000">show</span><span style="color: #000000; font-weight: bold">();</span>
        <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&#39;#nav-menu .scroll&#39;</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">css</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&#39;height&#39;</span><span style="color: #000000; font-weight: bold">,</span><span style="color: #000000">total</span><span style="color: #ce5c00; font-weight: bold">+</span><span style="color: #0000cf; font-weight: bold">80</span><span style="color: #000000; font-weight: bold">);</span>
    <span style="color: #000000; font-weight: bold">}</span><span style="color: #204a87; font-weight: bold">else</span><span style="color: #000000; font-weight: bold">{</span> 
        <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&#39;#nav-menu .scroll&#39;</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">css</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&#39;height&#39;</span><span style="color: #000000; font-weight: bold">,</span><span style="color: #4e9a06">&#39;auto&#39;</span><span style="color: #000000; font-weight: bold">);</span>
    <span style="color: #000000; font-weight: bold">}</span>
    <span style="color: #204a87; font-weight: bold">if</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">visible</span> <span style="color: #ce5c00; font-weight: bold">==</span> <span style="color: #204a87; font-weight: bold">true</span><span style="color: #000000; font-weight: bold">){</span>
        <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #204a87; font-weight: bold">this</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">parent</span><span style="color: #000000; font-weight: bold">().</span><span style="color: #000000">next</span><span style="color: #000000; font-weight: bold">().</span><span style="color: #000000">show</span><span style="color: #000000; font-weight: bold">();</span>
        <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&#39;#nav-menu .scroll&#39;</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">css</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&#39;height&#39;</span><span style="color: #000000; font-weight: bold">,</span><span style="color: #000000">total</span><span style="color: #ce5c00; font-weight: bold">+</span><span style="color: #0000cf; font-weight: bold">80</span><span style="color: #000000; font-weight: bold">);</span>
    <span style="color: #000000; font-weight: bold">}</span>
<span style="color: #000000; font-weight: bold">});</span>

});

梅問題-[教學]Bootstrap Navbar導覽列選單太長時,可左右滑動切換選單(支援多層選單)


Step4
當有子選單時,點選後也會自動展開,因此當你網站選單也超長的朋友,不妨可試試看囉!如有任何問題,也歡迎回報。
梅問題-[教學]Bootstrap Navbar導覽列選單太長時,可左右滑動切換選單(支援多層選單)