Question

我正在为客户创建一个网站，它包含一个响应式下拉菜单，该菜单通过jquery脚本加载。代码如下。

我有一个问题。当我给容器div #menu一个位置：static;一切似乎进展顺利。但是，当我滚动并尝试在页面中间某处打开菜单时（当然是在移动设备上），它会在页面顶部打开（在内容上方而不是内容上方），所以我必须滚动回去顶部看到它。

如果我给容器div #menu一个位置：fixed;菜单会加载内容，但我无法在菜单中滚动，因此无法滚动到最后一个菜单项。

谁能帮助我？

编辑：我无法发布客户的网站（它位于客户端的开发区域，只清除了IP的访问权限）但我几乎使用了this website上的相同代码。该网站存在同样的问题，因此您可以在那里进行测试。

我希望这有助于解决问题，我的客户会变得不耐烦......提前谢谢！

HTML：

<div id="menu">
<div class="menu-top-menu-container">
    <ul id="menu-top-menu" class="menu">
        <li><a href="#">menu item 1</a>
        </li>
        <li><a href="#">menu item 2</a>
        </li>
        <li><a href="#">menu item 3</a>
        </li>
    </ul>
</div>

CSS

/* Responsive menu */
#menu {
position: static;
float: left;
width: 98%;
height: auto!important;
margin: 110px 0 10px 0;
padding: 0px 1% 0px 1%;
line-height: 25px;
background-color: #efefef;
z-index: 99;
}
#menu li {
display: list-item;
list-style-type: none;
}
/* Menu items */
ul#menu-top-menu {
float: left;
top: 0px;
left: 0px;
width: 100%;
max-width: 1000px;
}
/* Lijst menu items */
#menu #menu-icon {
float: right;
position: fixed;
top: 53px;
right: 22px;
display: block;
background: url(http://www.bobdewebbouwer.nl/2014bybob/wp-content/themes/2014bybob/foto/menu.png);
background-repeat: no-repeat;
height: 30px;
width: 30px;
margin: 0 0px 5px 5px;
z-index: 999;
}
/* Menu icon tonen */
#menu #menu-top-menu {
display: none;
clear: both;
}
/* Menu verbergen tot er geklikt wordt op menu icon */
ul#menu-top-menu li {
padding: 10px 0 10px 0;
display: block;
clear: both;
text-align: left;
width: 95%;
}
/* Menu items wat hoger maken */
ul#menu-top-menu li a {
width: 100%;
}
ul#menu-top-menu li:hover ul {
margin-top: 10px;
}

的jQuery

jQuery(document).ready(function ($) {

/* prepend menu icon */
$('#menu').prepend('<div id="menu-icon"></div>');

/* toggle nav */
$("#menu-icon").on("click", function () {
    $("#menu-top-menu").slideToggle();
    $(this).toggleClass("active");
});

});

Answer 1

试试这个：

 var _responsiveDropDown = function (selectors) {

            $(document).on('click', selectors.dropDownSelector, function (e) {
                var _menuHeight = $(selectors.menuSelector).height(),
                    _openTopLimit = _menuHeight;

                if (selectors.isOpenTopSmallLimit) {
                    _openTopLimit = _openTopLimit / 2;
                }
                var _distance = $(selectors.lowerlimitSelector).offset().top - $(this).offset().top - _openTopLimit;

                if (_distance < _menuHeight) {
                    $(selectors.openedMenuSelector).css('top', -(_menuHeight + selectors.dropdownTopMargin) + 'px');
                } else {
                    $(selectors.menuSelector).css('top', '');
                }
            });
        }

用法：

var dropDownSelectors = {
                            menuSelector: 'ul#menu-top-menu',
                            openedMenuSelector: '.open > #menu-top-menu',
                            dropdownTopMargin: 19,
                            isOpenTopSmallLimit: false
                        }


responsiveDropDown(dropDownSelectors);

响应式下拉菜单定位

1 个答案: