0

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

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

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

我可以让这个工作，但 .slideToggle() 并没有推动我需要它做的其余内容。如果我手动调整浏览器屏幕的大小，这三行也不会出现，但是如果我调整大小然后刷新页面，它会这样做，但如果我这样做，则不会显示较大屏幕尺寸的正常链接。我希望这是有道理的。

这是我在 jQuery(document).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">☰&lt;/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>
4

1 回答 1

1

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

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

于 2013-08-29T14:44:23.967 回答