0

我的响应式网站的 dropkick 菜单有问题。当站点输入 iphone 大小时，它使用 dropkick.js 更改为这个 dropkick 菜单，它是一个下拉菜单。

我的 HTML：

<div id="mobilemenu">
    <a href="#" id="pull">Menu</a>
</div>

仅当您以 320 像素宽度查看网站时，上述代码才可见。

我的Javascript：

<script type="text/javascript">
    $(function () {
        var pull1 = $('#pull');
        menu1 = $('ul.menuresponsive');
        menuHeight = menu1.height();
        $(pull1).on('click', function (e) {
            e.preventDefault();
            menu1.slideToggle();
        });

        $(window).resize(function () {
            var w = $(window).width();
            if (w > 320 && menu.is(':hidden')) {
                menu1.removeAttr('style');
            }
        });
    });
</script>

我对 Javascript 不太了解，这是从教程中获取的。

当网站处于 320 像素时，我的 CSS：

/* Menu */
#mobilemenu { display:block !important; margin-bottom:20px; }
#mobilemenu ul { margin:12px 0 0 0 !important; list-style:none; padding:0 10px 0 10px }
#mobilemenu ul li { float:none !important; font-size:16px; padding:5px 0 5px; font-weight:bold; border-bottom:1px solid #000; }
#mobilemenu ul li a { color:#333; text-decoration:none; }
/* Drop */
#mobilemenu ul li ul li { font-size:14px; font-weight:normal; border:none; color:#000; }

/* Pull */
#pull { display:block !important; text-align:center; color:#fff; text-decoration:none; padding:10px 0 10px 0; font-size:16px; font-weight:bold; }
#menu { display:none; }

现在看起来，菜单一直打开，如下所示，我非常希望它默认关闭，但我似乎找不到解决方案。

<ul>我的菜单<li>在<div id="mobilemenu">

响应式菜单 - 始终打开

4

1 回答 1

0

在本教程中，您链接到演示示例有两个媒体查询 - 一个用于 515 像素，一个用于 320 像素。

515px 的 CSS 将由 320px 继承，它包含我认为关闭菜单所需的代码。

尝试将此代码添加到您的媒体查询中：

nav {
    border-bottom: 0;
}
nav ul {
    display: none;
    height: auto;
}
nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
}
nav a#pull:after {
    content:"";
    background: url('nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
}
于 2012-11-22T10:08:17.297 回答