Question

我在设计响应式布局时遇到了一些问题，如下所示：

如果您浏览到http://www.wickersleysixthform.net，您可以看到这一点。

基本上我正在尝试创建一个响应式菜单，因此在768px及以上的浏览器中，您将看到正常的水平导航。然后对于481px以下的任何东西，你会看到带有.slideToggle（）效果的“三行”菜单，一旦按下就会下拉菜单。

我可以解决这个问题，但.slideToggle（）并没有将其他内容推送到我需要它做的事情。如果我手动调整我的浏览器屏幕大小，也不会出现这三行，但是如果我调整大小然后刷新它将会执行的页面，但如果我这样做，则不会显示更大屏幕尺寸的普通链接。我希望这是有道理的。

这是我用于jQuery（文档）.ready（function（$）{}）中的切换的jQuery;

/* getting viewport width */
var responsive_viewport = $(window).width();

/* if is below 481px */
if (responsive_viewport < 481) {

    $(".top-nav").before('<div id="menu">&#9776;</div>');
    $("#menu").click(function(){
        $(".top-nav").slideToggle();
    });

}

/* if is above or equal to 768px */
if (responsive_viewport >= 768) {

    $(".top-nav").show();
}

有人可以帮忙吗？毫无疑问，这很简单，但它让我疯狂。可能是基于CSS而不是jQuery？

我正在使用的CSS如下（在我的基础/移动样式表中）。

.header {
background-color:@blue;
padding-top:10px;
height:50px;
}

#menu {
display:block;
font-size:1.75em;
position: absolute;
right: 10px;
top: 2px;
}

.top-nav {
display:none;
}

.top-nav.open {
display:block;
background:@blue;
}

在我的768及以上样式表中：

.header {
padding-top:0;
height:70px;
position:fixed;
width:100%;
z-index:10;
}

#menu {
display:none;
}

.top-nav {
display:block;
}

我的HTML结构：

<header class="header" role="banner">
<div id="inner-header" class="wrap clearfix">
<a rel="nofollow" href="http://www.wickersleysixthform.net">
<img id="logo" width="50px" height="36px" src="http://www.wickersleysixthform.net/wp-content/themes/sixthform/library/images/white.png">
</a>
<nav role="navigation">
<div id="menu">☰</div>
<ul id="menu-main-menu" class="nav top-nav clearfix">
<li><a href="http://www.wickersleysixthform.net/">About</a></li>
<li>
<a href="http://www.wickersleysixthform.net/current/">Current Students</a>
<ul class="sub-menu"></ul>
</li>
<li><a href="http://www.wickersleysixthform.net/courses/">Courses</a></li>
<li><a href="http://www.wickersleysixthform.net/student-life/">Student Life</a></li>
<li><a href="#">Prospectus</a></li>
<li><a href="http://www.wickersleysixthform.net/apply/">Apply</a></li>
<li><a href="http://www.wickersleysixthform.net/contact/">Contact</a></li>
</ul>
</nav>
</div>
</header>

Answer 1

问题是您的header元素的固定高度为50px。因此，当菜单展开时，标题保持相同的高度。

移除高度或用min-height替换它可以解决您的问题

推送.slideToggle（）上的内容

1 个答案: