搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. [教學] Bootstrap 導覽列選單太長時，可左右滑動切換選單並支援子選單

[教學] 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導覽列選單太長時，可左右滑動切換選單(支援多層選單)


bootstrap導覽列選單, Bootstrap教學, bootstrap選單太長, navbar選單太長,