Question

我正在尝试滑动导航菜单。我正在使用sliiide.min.js。当我停留在页面顶部时，以下设置有效，但当我向下滚动并单击滑动菜单时，它会在实际菜单的位置给出一个空白部分，我无法弄清楚如何整理。如果您之前遇到类似问题，请分享。我正在给出完整的代码。

HTML菜单

<div id="tablet-mobile-menu" class="sidr left" style="visibility: hidden; display: block; left: 0px;">
    <div class="utility-nav">
        <div class="main-menu">
            <ul id="burger-menu" class="links clearfix">
                <li class="menu-15461 first">
                    <a href="" id="hamburger-subscribe" class="burger" style="color: #fc0; text-transform: uppercase;">Follow Us On</a>
                </li>
                <div class="utility-menu">
                    <ul id="hamburger-utility-menu" class="links clearfix">
                        <li class="menu-7731 first">
                            <a href="" id="facebook" class="facebook burger">Facebook</a>
                        </li>
                            <a href="" id="pinterest" class="pinterest burger">Pinterest</a>
                        </li>
                    </ul>
                </div>
                <li class="menu-15461 first" style="">
                    <a href="" id="hamburger-subscribe" class="burger" style="color: #fc0; text-transform: uppercase;">Sections</a>
                </li>
            </ul>
        </div>
            <p>Men's Health, The Brand Men Live By</p>
            <p>Copyright © 2016 Rodale Inc. No reproduction, transmission or display is permitted without the written permissions of Rodale Inc.</p>
            <p>
                <a href="">Privacy Policy.</a>&nbsp;&nbsp;&nbsp;

                <a href="">About Us.</a>
            </p>
        </div>
    </div>

这是JS配置：

<?php $this->script()->captureStart(); ?>

                                    var settings = {
                                    toggle: "#menu-btn-toggle", // the selector for the menu toggle, whatever clickable element you want to activate or deactivate the menu. A click listener will be added to this element.
                                    exit_selector: ".is-active", // the selector for an exit button in the div if needed, when the exit element is clicked the menu will deactivate, suitable for an exit element inside the nav menu or the side bar
                                    animation_duration: "0.1s", //how long it takes to slide the menu
                                    place: "left", //where is the menu sliding from, possible options are (left | right | top | bottom)
                                    animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)", //animation curve for the sliding animation
                                    body_slide: true, //set it to true if you want to use the effect where the entire page slides and not just the div
                                    no_scroll: true, //set to true if you want the scrolling disabled while the menu is active
                                    };

                                    $('#tablet-mobile-menu').sliiide(settings); //initialize sliiide



<?php $this->script()->captureEnd(); ?>

这里是点击或切换按钮所在的HTML：

<div id="menu-btn">
    <a href="/" title="Menu" id="menu-btn-toggle" class="clickable">
       <!--<i class="fa fa-bars fa-2x" aria-hidden="true"></i>-->
       <!--<i class="fa fa-times fa-2x" aria-hidden="true"></i>-->
        <span></span>  
    </a>
</div>

Answer 1

也许滑块只是它坐在页面的顶部，所以你看到的是菜单的底部。

您是否尝试在导航顶部添加CSS样式，以便即使在滚动时它也会粘在页面顶部。

font

滑动导航菜单（sliiide.js）部分工作

1 个答案: