自动滚动页面+关闭侧边栏菜单项目选择+链接菜单项目与部分ID(Wordpress - Jquery)

问题描述 投票:0回答:1

我正在尝试创建一个自定义侧边栏菜单...我有一个页面网站上有部分...每个侧边栏菜单链接应该连接到特定部分。我创建了菜单但有两个问题:

1)我想在jquery的帮助下将菜单项与section id链接起来。 2)当用户点击侧边栏中的菜单项时,它应自动关闭并将页面滚动到该部分。

我是Jquery和wordpress的新手。请帮我解决这个问题。

边栏Html:

<ul id="primary-menu" class="main-nav" role="menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom">
        <a href="#quote" data-level="1">
            <span class="menu-item-text">
                <span class="menu-text">Instant Quote</span>
                <i class="underline"></i>
            </span>
        </a>
    </li> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom">
        <a href="#ethos" data-level="1">
            <span class="menu-item-text">
                <span class="menu-text">Ethos</span>
                <i class="underline"></i>
            </span>
        </a>
    </li>             
</ul>

这是我的补充工具栏:

enter image description here

javascript jquery html css wordpress
1个回答
1
投票

你必须给你的部分特定的id像<section id="quote">

然后在你的main.js写一些东西

$('.menu-item').find('a').click(function(){
        var $href = $(this).attr('href');
        var $anchor = $($href).offset();
        $('body, html').animate({ scrollTop: $anchor.top} ,1500);
        return false;
    });

关闭侧边栏这取决于您如何制作此侧边栏。

© www.soinside.com 2019 - 2024. All rights reserved.