向下推.slideToggle内容（）

设计响应布局时，如下所示，我遇到了一些麻烦：向下推.slideToggle内容（）

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

基本上我试图创建一个响应菜单，所以在768px和以上的浏览器中，你会看到一个正常的水平导航。然后，对于481px以下的任何内容，您将看到“三行”菜单，其中一个按下的.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">☰</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>

来源

2013-08-29 jakobjames

最有可能的元素正在下滑是不正常的文档流。我们需要看到CSS和HTML。 –

@KevinB - 我认为看看网站会比较容易，而不是显示它，这就是为什么我没有包含它。我可以发布它，但如果这将有所帮助？ – jakobjames

@EnigmaRM - 在英国，学生被评为A - E，A * - C和A * - C（包括数学和英语），学校/第六种形式，然后工作这个到他们的数据！ – jakobjames

的问题是，你的header元素具有50像素的固定高度。所以当菜单展开时，标题保持相同的高度。

卸下高度或min-height替换它解决您的问题

来源

2013-08-29 14:44:23 Thomas

谢谢！我已经用最小高度替换它，并且工作。任何想法，为什么我失去了菜单或菜单图标不显示调整浏览器窗口？ – jakobjames

因为'＃menu'元素是用javascript添加的，并且只在页面加载时添加。（脚本。js：34）为什么你不总是在你的HTML中添加菜单项，只是用媒体查询隐藏它？ – Thomas

向下推.slideToggle内容（）

回答

相关问题