網頁設計, 網頁資源

[教學] 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");

$('#nav-menu .scroll>ul>li>ul').hide();
var total = $(this).parent().next().height();

if($('#nav-menu .scroll').height()==50){
$(this).parent().next().show();
$('#nav-menu .scroll').css('height',total+80);
}else{
$('#nav-menu .scroll').css('height','auto');
}
if(visible == true){
$(this).parent().next().show();
$('#nav-menu .scroll').css('height',total+80);
}
});
});
梅問題-[教學]Bootstrap Navbar導覽列選單太長時,可左右滑動切換選單(支援多層選單)
Step4
當有子選單時,點選後也會自動展開,因此當你網站選單也超長的朋友,不妨可試試看囉!如有任何問題,也歡迎回報。
梅問題-[教學]Bootstrap Navbar導覽列選單太長時,可左右滑動切換選單(支援多層選單)