網頁設計, 網頁資源

Bootstrap導覽列擴充,電腦版滑入展開與第一層支援連結

2016/06/15
梅問題-Bootstrap教學-Bootstrap導覽列擴充,電腦版滑入展開,與第一層支援連結
  先前梅干曾分享過,將Bootstrap的導覽列透過CSS設定後,將click點擊開啟選單變成hover滑入展開,但這樣的第一層選單都無法有連結效果,必需在第二層才能連結,這對於有些朋友若把第一層設為大分類時,就無法展開,所以梅干最近就花了點時間,將Bootstrap的導覽列再作擴充,讓它在電腦版時,滑入選單可以展開子選單,當點擊第一層選單連結時,則會開啟連結, 若在手機版時,則會變成點選的方式,當點後方的三角形則是展開選單,點前方的選單名稱,則會開啟連結,如此一來就更符合大家的使用經驗,至於要怎麼來修改呢?有在使用Bootstrap的朋友,也一塊來看看囉!

Step1
加入CSS樣式,當在螢幕解晰小於480時,就套用此樣式,而此樣式是將原來的倒三角形,加入一些效果。
/*當視窗小於480時,套用此樣式*/
@media (max-width: 480px) {
    .caret::before{
        content: '▾';
        color: #fff;
        font-size: 24px;
        line-height: 28px;
    }
    .caret{
            display: inline-block;
            text-align: center;
            float: right;
            width: 50px;
            height: 30px;
            background: #111;
            border: 0;
            margin-right: -10px;
            border-radius: 30px;
            margin-top: -5px;
    }
    .dropdown-menu{
                position: relative;
                width: 100%;
                background: transparent;
    }
    .dropdown-menu>li>a{
         color: #9d9d9d;
    }
  }

Step2
加入javascript控制,在電腦版時,滑入時展開,同時第一層也支援可連結,當在手機版時,點選倒三角形展開選單,點選單名稱,則會開啟連結。
$(function(){
    $('ul.nav li.dropdown>a').click(function(){
        location.href = $(this).attr('href');
    });

    $('.caret').click(function(){
        $(this).parent().next('ul').slideToggle();
            $(this).parent().parent().addClass('dropdown');
  			$(this).parent().parent().toggleClass('open');      
        return false;
    });
	//當視窗大於480時,滑入展開選單
     if($(window).width() > 480){
           $('ul.nav li.dropdown').hover(function() {
              $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
           }, function() {
              $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
          });
      }
});

Step3
完成後,在電腦時,滑入選單時就會展開子選單,當點擊選單則會開啟連結。
梅問題-Bootstrap教學-Bootstrap導覽列擴充,電腦版滑入展開,與第一層支援連結
Step4
當在手機模式下時,點選後方的倒三角形則會開啟選單。
梅問題-Bootstrap教學-Bootstrap導覽列擴充,電腦版滑入展開,與第一層支援連結
Step5
點選單名稱時,則會開啟連結,這樣就更符合一般的操控習慣,有在使用bootstrap的朋友,也趕快試試囉!
梅問題-Bootstrap教學-Bootstrap導覽列擴充,電腦版滑入展開,與第一層支援連結
[範例下載] [範例預覽]