2015-11-20 76 views
2

我需要level1菜單的固定標題,但子菜單需要在level1上單擊時向下推動頁面的其餘部分。滾動時固定標題,但子菜單需要將內容向下推

如果我明確固定標題位置,內容將不會被下壓,子菜單將重疊內容(以及菜單)。

人們通常如何解決這個問題?謝謝!

http://jsfiddle.net/L3xh3av1/

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; 
} 
+1

如果您還沒有排除第三方庫,引導是一種選擇。給你一個不錯的導航欄。 – alok

+0

看着你的例子,我會認爲你總是希望內容低於標題...我是對的嗎? –

+0

當你說「修復第1級菜單的標題」時,即使頁面內容滾動,或者說它的高度是固定的,你的意思是「固定且始終可見」嗎? – LGSon

回答

2

該版本具有固定的頭,其中所述子菜單推內容下來。

,使其正常工作,我改變了你的CSS一點在您.menu是固定的,你的.header有一個padding向下移動非固定的東西進入視野。

$(".menu").on("click",function(){ 
 
$(".submenu").slideToggle(); 
 
})
html, body { 
 
    margin: 0; 
 
} 
 
.header{ 
 
    background: red; 
 
    position: relative; 
 
    padding-top: 70px; 
 
} 
 
.menu{ 
 
    position:fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 70px; 
 
    width: 100%; 
 
    background:blue; 
 
} 
 
.submenu{ 
 
    height:70px; 
 
    background:yellow; 
 
    display:none; 
 
} 
 
.content{ 
 
    background: purple; 
 
    height:300px; 
 
    width:100%; 
 
} 
 
.content p{ 
 
    color:black; 
 
} 
 
.page{ 
 
    height:3000px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

+0

謝謝!就是這個 –

1

這個怎麼樣的解決方案http://jsfiddle.net/L3xh3av1/3/

HTML

<div class="page"> 
    <div class="header"> 
    <div class="menu">menu</div> 
    <div class="submenu">submenu</div> 
    <div class="header-red">Header</div> 
    </div> 
    <div class="content"> 
    <p>content needs to be pushed down</p> 
    </div> 
</div> 

CSS

.header{ 
    position:fixed; 
    width:100%; 
} 

.header-red { 
    background: red; 
    height: 70px; 
} 
.menu{ 
    height:70px; 
    background:blue; 
} 
.submenu{ 
    background:yellow; 
    height: 0; 
    opacity: 0; 
    transition: all 0.3s ease-in; 
} 

.show { 
    height: 70px; 
    opacity: 1; 
} 

.content{ 
    background: purple; 
    height:300px; 
    width:100%; 
} 
.content p{ 
    color:black; 
} 
.page{ 
    height:3000px; 
} 

JS

$(".menu").on("click",function(){ 
    $(".submenu").toggleClass('show'); 
}); 

編輯:

解決方案2 - 未固定報頭http://jsfiddle.net/L3xh3av1/5/

溶液3 - 頁眉變化http://jsfiddle.net/L3xh3av1/6/

+0

但是OP希望將頁面的其餘部分向下推送演示只更改標題高度 – CY5

+0

當您滾動並且您的標題或菜單固定在窗口頂部時,如何推送頁面內容。這沒有意義。 –

+0

通過設置邊距或填充內容 –