jQuery将活动的水平菜单项滚动到中心

Question

我正在开发一个响应式子菜单，它可以在小屏幕上水平滚动，而不是堆叠链接。我可以做到这一点。我想做的是将当前页面上的活动菜单项居中。我正在使用 wordress，所以课程已经存在.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 问题。

在我的小提琴中，我为主容器设置了 300 像素的最大宽度，这样它就可以模拟一个小型设备。我也在我的网站 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; 
    }
}

其他说明 这并不完全居中，但在球场上。可能还有更多的调整可以真正微调。

更新 我在 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;

没有任何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/