向下推.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內容（）

回答

相關問題