问响应下拉菜单定位
EN

Stack Overflow用户

提问于 2015-09-04 01:13:21

回答 1查看 809关注 0票数 0

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

不过我有个问题。当我给容器div #菜单一个位置时:静态；一切看起来都很顺利。但是，当我滚动并尝试打开页面中间的某个位置(当然是移动的)时，它会在页面顶部打开(而不是在内容之上)，所以我必须回滚到顶部才能看到它。

如果我给容器div #菜单一个位置:固定的；菜单确实加载了内容，但是我不能在菜单中滚动，所以我不能滚动到最后的菜单项。

谁能帮我？

编辑:我不能发布客户端的站点(它位于客户的开发区域，并且只清除IP的访问权限)，但是我在本网站上使用了几乎相同的代码。那个网站也有同样的问题，所以你可以在那里进行测试。

我希望这能帮你解决问题，我的当事人越来越不耐烦了.提前谢谢！

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");
});

});

jquery

css

drop-down-menu

回答 1

Stack Overflow用户

发布于 2015-10-09 00:37:05

试试这个：

 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);