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问题。

在我的小提琴中，我为主容器设置了最大宽度为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; 
    }
}

其他笔记 这并非完全集中，而是在球场。可能还有一些调整可以很好地调整事物。

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

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

2 个答案: