切换菜单时使菜单功能区上下滑动

Question

我有一个隐藏的菜单，当单击功能区时，该菜单会向下滑动，但功能区本身仍保持在原位。我希望它使功能区与菜单的其余部分一起向下滑动，同样，在关闭菜单时，功能区也可以向上滑动。

html代码

<div id="topbar">
    <div id="tophiddenbar" style="display: none;">
      <p>stuff goes here</p>
    </div>
    <div id="menu" class="ribbon">
      <p>Menu</p>
    </div>
</div>

CSS代码

#topbar {
  background: #0174C3;
  color: #fff;
  padding: 0 0 15px 0;
  font-size: 62.5%; 
  text-align: center;
  height: 10px;
  overflow: hidden;
  -webkit-transition: height 0.5s linear;
  -moz-transition: height 0.5s linear;
  transition: height 0.5s linear;
}

#topbar.active {
    height: 250px;
}

.ribbon {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 50px;
  height: 20px;
  background-color: #444;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

jQuery代码

$("#menu").click(function(){
    $("#topbar").toggleClass('active');
  $("#tophiddenbar").toggle();
});

Codepen样本 https://codepen.io/anon/pen/wZEKBz

页面加载时的当前默认行为

单击功能区时的当前行为

单击功能区时的预期行为

Answer 1

将另一个div与position:relative一起使用，将可以检查此答案

<div class="ribbon-parent">
  <div id="menu" class="ribbon">
      <p>Menu</p>
  </div>
  </div> 

$("#menu").click(function(){
	$("#topbar").toggleClass('active');
  $("#tophiddenbar").toggle();
});

#topbar {
  background: #0174C3;
  color: #fff;
  padding: 0 0 15px 0;
  font-size: 62.5%; 
  text-align: center;
  height: 10px;
  overflow: hidden;
  -webkit-transition: height 0.5s linear;
  -moz-transition: height 0.5s linear;
  transition: height 0.5s linear;
}

#topbar.active {
	height: 250px;
}
.ribbon-parent{
  position:relative;
}
.ribbon {
  position: absolute;
  color: #fff;  
  top: 0;
  left: 50%;
  width: 50px;
  height: 25px;
  background-color: #444;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
p{
font-size: 62.5%; 
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="topbar">
	<div id="tophiddenbar" style="display: none;">
			<p>stuff goes here</p>
	</div>  
</div>
<div class="ribbon-parent">
  <div id="menu" class="ribbon">
      <p>Menu</p>
  </div>
  </div>

检查更新的codepen here

Answer 2

按以下方式使页边距顶部过渡到菜单，

$("#menu").click(function() {
    $("#topbar").toggleClass('active');
    $(this).toggleClass('activemenu');
    $("#tophiddenbar").toggle();
});

#topbar {
        background: #0174C3;
        color: #fff;
        padding: 0 0 15px 0;
        font-size: 62.5%;
        text-align: center;
        height: 10px;
        overflow: hidden;
        -webkit-transition: height 0.5s linear;
        -moz-transition: height 0.5s linear;
        transition: height 0.5s linear;
    }

    #topbar.active {
        height: 250px;
    }

    .activemenu{
        margin-top: 250px;
    }

    .ribbon {
        position: absolute;
        top: 15px;
        left: 50%;
        width: 50px;
        height: 20px;
        background-color: #444;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        -webkit-transition: margin-top 0.5s linear;
        -moz-transition: margin-top 0.5s linear;
        transition: margin-top 0.5s linear;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="topbar">
    <div id="tophiddenbar" style="display: none;">
        <p>stuff goes here</p>
    </div>
    <div id="menu" class="ribbon">
        <p>Menu</p>
    </div>
</div>