I have footer slide up menu with items, here is menu title with up arrow icon I need when slide up the menu icon position is up side and when slide down the menu arrow icon should be down reverse position and click on title slide menu should be hold when someone click for down, thanks in advance.

.menu-mobile {
  font-weight: 100;
  background: #ffc20e;
  width: 100%;
  height: 135px;
  padding-top: 0px;
  position: fixed;
  z-index: 100;
  -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  bottom: -90px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  color: #222;
  display:block!important;
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
}
.menu-mobile:hover, .menu-mobile:focus {
  transform: translate(0px, -120px);
  animation-timing-function: 1s ease-in;
}
.menu-mobile .title {
  position: absolute;
  left: 52%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 15px;
  font-weight: 800;
  font-size: 15px;
  color:#003D3F;
}
.menu-mobile .nav {
  position: absolute;
  left: 50%;
  top: 45px;
  width: 100%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  font-weight: 100;
  display: block;
}
.menu-mobile .nav li {
  list-style-type: none;
  background-color:#EFEFEF;
}
.arrow{
    width: 15px;
    margin-right: 7px;
}

<div class="menu-mobile">
    <div class="title"><img src="https://cdn.icon-icons.com/icons2/1883/PNG/512/caretsymbol_120671.png" class="arrow">MENU</div>
    <ul class="nav">
      <li><a href="#"><i class="ti-dashboard menu-icon mr-2 fa-lg menu-icon-color active-nav db-iconmd"></i>Menu 1</a></li>
      </ul>
      </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Just add below class:

.menu-mobile:hover .arrow, .menu-mobile:focus .arrow {
    transform: rotate(180deg)
 }

.menu-mobile {
  font-weight: 100;
  background: #ffc20e;
  width: 100%;
  height: 135px;
  padding-top: 0px;
  position: fixed;
  z-index: 100;
  -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  bottom: -90px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  color: #222;
  display: block!important;
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
}

.menu-mobile:hover,
.menu-mobile:focus {
  transform: translate(0px, -120px);
  animation-timing-function: 1s ease-in;
}

.menu-mobile .title {
  position: absolute;
  left: 52%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 15px;
  font-weight: 800;
  font-size: 15px;
  color: #003D3F;
}

.menu-mobile .nav {
  position: absolute;
  left: 50%;
  top: 45px;
  width: 100%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  font-weight: 100;
  display: block;
}

.menu-mobile .nav li {
  list-style-type: none;
  background-color: #EFEFEF;
}

.arrow {
  width: 15px;
  margin-right: 7px;
}

.menu-mobile:hover .arrow,
.menu-mobile:focus .arrow {
  transform: rotate(180deg)
}

<div class="menu-mobile">
  <div class="title"><img src="https://cdn.icon-icons.com/icons2/1883/PNG/512/caretsymbol_120671.png" class="arrow">MENU</div>
  <ul class="nav">
    <li><a href="#"><i class="ti-dashboard menu-icon mr-2 fa-lg menu-icon-color active-nav db-iconmd"></i>Menu 1</a></li>
  </ul>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>