I have a hidden menu that slides down when the ribbon is clicked but the ribbon itself remains in it's position. I would like it so the ribbon slides down with the rest of the menu and likewise when closing the menu for the ribbon to slide back up.

html code

<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 code

#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 code

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

Codepen sample https://codepen.io/anon/pen/wZEKBz

Current default behavior when page is loaded enter image description here

Current behavior when ribbon is clicked enter image description here

Expected behavior when ribbon is clicked

enter image description here

2 Answers

1
Udhay Titus On Best Solutions

use another div with position:relative it will works check this answer

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

check your updated codepen here

0
Shoyeb Sheikh On

Gave margin-top transitions to menu as follows,

$("#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>