когда меню переключается, лента меню скользит вниз и вверх

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

Код запроса

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

Образец кодепа 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>

проверьте обновленный код здесь

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>