Question

我正在使用多级推送菜单并尝试添加按钮以使其关闭。

基本HTML：

    <div class="container">
        <!-- Push Wrapper -->
        <div class="mp-pusher" id="mp-pusher">
        <!-- mp-menu -->
            <nav id="mp-menu" class="mp-menu">
                <div class="mp-level">
                <a class="icon icon-star" href="#" onclick="closeMe();" id="linkk">Exit</a>
    </div>
            </nav>
                <div class="scroller"><!-- this is for emulating position fixed of the nav -->
                <div class="scroller-inner">
                    <!-- Top Navigation -->
<div><a href="#" id="trigger" class="">Button</a></div>
</div><!-- /scroller-inner -->
            </div><!-- /scroller -->
        </div><!-- /pusher -->
</div><!-- /container -->

JS：

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );

 function closeMe(){
 var container = document.getElementById( 'mp-pusher'; );
 classie.remove( container, 'mp-pushed'; );
 scrollToAnchor('#link');
 };

这是一个工作小提琴： http://jsfiddle.net/xs1j8kq5/3/

当然，我正在使用外部资源。上面的退出按钮代码无法正常运行。

如何关闭侧边栏菜单，如果可能，滚动到网站某处的锚点？

Answer 1

首先按我在评论中提到的修复代码。有几个语法错误。在你打电话之前定义closeMe。现在scrollToAnchor不起作用，在closeMe之前定义它。

现在，当你点击Exit它没有动画，但我认为，现在你可以弄清楚如何处理动画。 http://jsfiddle.net/xs1j8kq5/22/

<script type="text/javascript">
    function closeMe() {
        var container = document.getElementById('mp-pusher');
        classie.remove(container, 'mp-pushed');
        classie.remove(container, 'mp-pusher');
        container.style.transform = "translate3d(+300px, 0px, 0px)";
        //scrollToAnchor('#services');
    }
    ;
</script>
<div class="container">
    <!-- Push Wrapper -->
    <div class="mp-pusher" id="mp-pusher">
        <!-- mp-menu -->
        <nav id="mp-menu" class="mp-menu">
            <div class="mp-level">
                <a class="icon icon-star" href="#" onclick="closeMe();" id="linkk">Exit</a>
            </div>
        </nav>
        <div class="scroller"><!-- this is for emulating position fixed of the nav -->
            <div class="scroller-inner">
                <!-- Top Navigation -->
                <div><a href="#" id="trigger" class="">Button</a></div>
            </div><!-- /scroller-inner -->
        </div><!-- /scroller -->
    </div><!-- /pusher -->
</div><!-- /container -->

对于滚动，您需要定义要滚动的<a name="services"></a>标记。

编辑：工作小提琴： http://jsfiddle.net/xs1j8kq5/24/

Answer 2

正如您在标记中提到的jQuery，这里是一个比您的代码更短的jQuery（不需要基于属性的事件处理程序）：

new mlPushMenu($('#mp-menu')[0], $('#trigger')[0]);
$(function () {
    $('#linkk').click(function(e) {
        e.preventDefault();   // Stop any scrolling to the bookmark link
        classie.remove($('#mp-pusher'));
        classie.remove($('#mp-pushed'));
        scrollToAnchor('#services');
    });
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/xs1j8kq5/23/

Answer 3

当您实例化'mlPushMenu'时，您必须定义'触发器' 所以，请说明：

new mlPushMenu( document.getElementById( 'mp-menu' ),
document.getElementById( 'trigger' ) )

更换按钮的ID。

在这种特殊情况下，请使用“ linkk ”：

new mlPushMenu( document.getElementById( 'mp-menu' ),
document.getElementById( 'linkk' ) )

您可以使用类，并根据需要影响“ a ”：

new mlPushMenu(document.getElementById('mp-menu'),
document.getElementsByClassName('menu-trigger'));

如何添加关闭按钮脚本

3 个答案: