jQuery將活動水平菜單項滾動到中心

Question

我正在製作一個響應子菜單，該子菜單在小屏幕上將水平滾動而不是堆疊鏈接。我可以做這項工作。我想要做的是將當前頁面上的活動菜單項目居中。我正在用口頭禪，所以班上已經有了.current-menu-item。我一直試圖使用jQuery來計算中心，並在頁面加載時滾動菜單項，它在我的jsfiddle中工作，但不在活動網站上。我不能肯定我是用正確的做法，但這裏是我目前在做什麼：

<div id="ds-sub-menu"> 
    <ul id="menu-new-here" class="menu"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li class="current-menu-item"><a href="#">Link 3</a></li> 
    <li ><a href="#">Link 4</a></li> 
    <li><a href="#">Link 5</a></li> 
    <li><a href="#">Link 6</a></li> 
    </ul> 
</div> 

    jQuery(document).ready(function($) { 

    var totalWidth = $("#ds-sub-menu").outerWidth() 

    $('#ds-sub-menu ul').css('width', totalWidth); 

    var myScrollPos = $('#ds-sub-menu .current-menu-item').offset().left + $('#ds-sub-menu .current-menu-item').outerWidth(true)/2 + 
     $('#ds-sub-menu .menu').scrollLeft() - $('#ds-sub-menu .menu').width()/2; 

    $('#ds-sub-menu .menu').scrollLeft(myScrollPos); 
}); 

#ds-sub-menu { 
    width: 100%; 
    max-width: 300px; 
    background: #000; 
    overflow: hidden; 
} 

#ds-sub-menu ul { 
    overflow-y: hidden; 
    overflow-x: scroll; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
} 

#ds-sub-menu li { 
    display: inline-block; 
    padding: 10px 14px; 
    text-align: -webkit-match-parent; 
} 

#ds-sub-menu li a { 
    color: #ccc; 
} 

#ds-sub-menu li.active a { 
    color: #fff; 
} 

我的jsfiddle是a here

Answer 1

好了，對不起，浪費大家的時間。這是一個CSS問題。

在我的小提琴中，我爲主容器設置了300px的最大寬度，因此它會模仿一個小設備。我也在我的網站css中這樣做，它與jQuery .outerWidth()函數衝突，因爲它也返回爲300px。我只是從容器元素中刪除了最大寬度，現在它完美地工作。

如果任何人曾經希望做這樣的事情如此充滿網站代碼：

WordPress的菜單示例

<!--Mobile Version --> 
<div id="ds-mobile-sub-menu" class="ds-sub-menu"> 
    <ul id="menu-new-here" class="menu"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li class="current-menu-item"><a href="#">Link 3</a></li> 
    <li ><a href="#">Link 4</a></li> 
    <li><a href="#">Link 5</a></li> 
    <li><a href="#">Link 6</a></li> 
    </ul> 
</div> 

<!-- Desktop Version -->  
<div id="ds-desktop-sub-menu" class="ds-sub-menu"> 
    <ul id="menu-new-here" class="menu"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li class="current-menu-item"><a href="#">Link 3</a></li> 
    <li ><a href="#">Link 4</a></li> 
    <li><a href="#">Link 5</a></li> 
    <li><a href="#">Link 6</a></li> 
    </ul> 
</div> 

jQuery的

jQuery(document).ready(function ($) {  

    if($('#ds-mobile-sub-menu').length){ 
     // Dynamically set the width of #ds-sub-menu li by adding the widths of all the contained li's 
     var totalWidth = $("#ds-mobile-sub-menu").outerWidth() 

     $('#ds-mobile-sub-menu ul').css('width', totalWidth); 

     var myScrollPos = $('#ds-mobile-sub-menu .current-menu-item').offset().left + $('#ds-mobile-sub-menu .current-menu-item').outerWidth(true)/2 + $('#ds-mobile-sub-menu .menu').scrollLeft() - $('#ds-mobile-sub-menu .menu').width()/2; 

     $('#ds-mobile-sub-menu .menu').scrollLeft(myScrollPos); 

     $(window).on("orientationchange",function(){ 
      var totalWidth = $("#ds-mobile-sub-menu").outerWidth() 

      $('#ds-mobile-sub-menu ul').css('width', totalWidth); 

      var myScrollPos = $('#ds-mobile-sub-menu .current-menu-item').offset().left + $('#ds-mobile-sub-menu .current-menu-item').outerWidth(true)/2 + $('#ds-mobile-sub-menu .menu').scrollLeft() - $('#ds-mobile-sub-menu .menu').width()/2; 

      $('#ds-mobile-sub-menu .menu').scrollLeft(myScrollPos); 

     }); 
    } 

}); 

的CSS

#ds-mobile-sub-menu { 
    display: none; 
} 

.ds-sub-menu { 
    background: #000; 
    text-align: center; 
    width: 100%; 
} 

.ds-sub-menu ul { 
    text-align: center; 
    padding: 20px 0; 
    display: block; 
} 

.ds-sub-menu li { 
    display: inline-block; 
    padding: 0; 
    position: relative; 
} 

.ds-sub-menu li a { 
    color: #818181; 
    font-family: Montserrat; 
    font-weight: 400; 
    text-transform: uppercase; 
    padding: 18px 14px; 
} 

.ds-sub-menu li.current-menu-item a, .ds-sub-menu li a:hover { 
    color: #fff; 
} 

移動媒體查詢 這是CSS的一個單個樣本設置溢出滾動和隱藏滾動條。

@media only screen and (max-width : 320px) { 
    #ds-desktop-sub-menu { display: none; } 
    #ds-mobile-sub-menu { display: block; } 
    .ds-sub-menu ul { 
     overflow-y: hidden; 
     overflow-x: scroll; 
     white-space: nowrap; 
     -webkit-overflow-scrolling: touch; 
    } 
} 

其他注意事項 這不會以完全居中，但在球場。可能有更多的調整可以真正微調的東西。

UPDATE 我已經在CSS中做了一些額外的調整，以使中心完善。下面是變化：

刪除空白和邊距從列表項 添加填充到錨

更新＃2 在使用此功能多一點，我已經取得了一些額外的調整，以使它更好地處理不同設備的響應能力，並消除我遇到的錯誤。

第一：我在沒有子菜單的頁面上出現了jQuery錯誤。所以我添加了下面一行，只在子菜單存在時才運行該函數。 if($('#ds-mobile-sub-menu').length){}

第二：我注意到，如果我旋轉移動設備，該功能已經運行，所以計算寬度不再適用，菜單看起來不正確。所以我添加了一個桌面類和一個移動類。該函數實際上現在才觸發對移動類，然後我增加了以下功能重新校準屏幕上變化的東西： $(window).on("orientationchange",function(){});

現在，當你旋轉移動設備，或者改變你的桌面屏幕較小的格式，適當菜單將會顯示，功能將根據屏幕尺寸計算菜單的大小。

我已更新代碼以反映這些更改。

Answer 2

此行似乎是錯誤的：

var myScrollPos = $('li.active').offset().left + $('li.active').outerWidth(true)/2 + $('.menu').scrollLeft() - $('.menu').width()/2; 

有ISN任何li.active。應該然後.current-menu-item：

var myScrollPos = $('.current-menu-item').offset().left + $('.current-menu-item').outerWidth(true)/2 + $('.menu').scrollLeft() - $('.menu').width()/2; 

小提琴https://jsfiddle.net/k0q2rh97/2/