Question

我需要一个针对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;
}

Answer 1

此版本有一个固定的标题，子菜单会将内容向下推。

为了使其正常工作，我将{c}修改了.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>

Answer 2

对于解决方案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/

SOlution 3 - 标题更改http://jsfiddle.net/L3xh3av1/6/

固定标题滚动但子菜单需要按下内容

2 个答案: