我需要level1菜單的固定標題,但子菜單需要在level1上單擊時向下推動頁面的其餘部分。滾動時固定標題,但子菜單需要將內容向下推
如果我明確固定標題位置,內容將不會被下壓,子菜單將重疊內容(以及菜單)。
人們通常如何解決這個問題?謝謝!
JS:
$(".menu").on("click",function(){
$(".submenu").slideToggle();
})
HTML:
<div class="page">
<div class="header">
<div class="menu">menu</div>
<div class="submenu">submenu</div>
</div>
<div class="content">
<p>content needs to be pushed down</p>
</div>
</div>
CSS:
.header{
height:200px;
background:red;
position:fixed;
width:100%;
}
.menu{
height:70px;
background:blue;
}
.submenu{
height:70px;
background:yellow;
display:none;
}
.content{
background: purple;
height:300px;
width:100%;
}
.content p{
color:black;
}
.page{
height:3000px;
}
如果您還沒有排除第三方庫,引導是一種選擇。給你一個不錯的導航欄。 – alok
看着你的例子,我會認爲你總是希望內容低於標題...我是對的嗎? –
當你說「修復第1級菜單的標題」時,即使頁面內容滾動,或者說它的高度是固定的,你的意思是「固定且始終可見」嗎? – LGSon