Плавное выезжающее меню

var trigger = $('.mobilem'); 
 
menu = $('header .bottom__header .nav'); 
trigger.on('click', function() { 
  $(this).toggleClass('open'); 
  $('header .bottom__header').toggleClass('open'); 
  menu.toggleClass('open'); 
});

header .wrap { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 10; 
} 
 
header .top__header { 
  padding: 10px 0; 
  background-color: #fff; 
} 
 
header .top__header .container { 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: justify; 
  -webkit-justify-content: space-between; 
  -ms-flex-pack: justify; 
  justify-content: space-between; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
  -ms-flex-align: center; 
  align-items: center; 
  -webkit-align-content: center; 
  -ms-flex-line-pack: center; 
  align-content: center; 
  -webkit-box-flex: 0; 
  -webkit-flex: 0 1 100%; 
  -ms-flex: 0 1 100%; 
  flex: 0 1 100%; 
} 
 
header .top__header .box-info { 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-align-content: center; 
  -ms-flex-line-pack: center; 
  align-content: center; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
  -ms-flex-align: center; 
  align-items: center; 
} 
 
header .top__header .btn-bgreen { 
  font-size: 24px; 
} 
 
header .bottom__header { 
  background-color: #e8e8e8; 
  padding: 5px 0; 
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.4); 
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.4); 
} 
 
.mobilem { 
  position: relative; 
  top: 0px; 
  left: 0px; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  height: 40px; 
  width: 30px; 
  margin-right: 15px; 
  z-index: 8; 
  cursor: pointer; 
} 
 
.mobilem:after { 
  content: attr(data-label); 
  font-size: 20px; 
  line-height: 38px; 
  margin-left: 5px; 
  font-family: Lato; 
  font-weight: 300; 
} 
 
.mobilem.open:after { 
  content: attr(data-label-close); 
  font-size: 20px; 
  line-height: 38px; 
  margin-left: 5px; 
  font-family: Lato; 
  font-weight: 300; 
} 
 
.mobilem ._line { 
  position: absolute; 
  width: 24px; 
  height: 1px; 
  -webkit-border-radius: 2px; 
  -moz-border-radius: 2px; 
  border-radius: 2px; 
  background: #222; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  margin-top: auto; 
  margin-right: auto; 
  margin-bottom: auto; 
  margin-left: auto; 
  transition: all 0.3s; 
} 
 
.mobilem ._line.__1 { 
  bottom: 16px; 
} 
 
.mobilem ._line.__2 { 
  top: 16px; 
} 
 
.mobilem.open ._line.__1 { 
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  -o-transform: rotate(45deg); 
  transform: rotate(45deg); 
  bottom: 0; 
} 
 
.mobilem.open ._line.__2 { 
  opacity: 0; 
} 
 
.mobilem.open ._line.__3 { 
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  -o-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
  top: 0; 
} 
 
header .bottom__header .nav { 
  height: auto; 
  padding: 0; 
  z-index: 10200; 
  position: relative; 
  overflow: hidden; 
  max-height: 0; 
  width: 300px; 
  top: 0; 
  visibility: hidden; 
  right: auto; 
  flex-wrap: wrap; 
  align-content: flex-start; 
  background-color: #fff; 
  transition: 2s all; 
} 
 
header .bottom__header .nav li { 
  display: block; 
  width: 100%; 
  padding-left: 0; 
  &:before { 
    width: 0; 
    height: 0; 
    background-color: transparent; 
  } 
} 
 
header .group__header .nav__header .nav a { 
  font-size: 20px; 
} 
 
header .bottom__header .nav a { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 15px 10px; 
  color: #000; 
  border-top: 1px solid #f6f8fd; 
} 
 
header .bottom__header .nav li .sub { 
  padding: 0; 
  li { 
    a { 
      padding-left: 30px; 
      font-size: 14px; 
    } 
  } 
} 
 
header .bottom__header .nav a.active {} 
 
header .bottom__header .nav.open { 
  max-height: 900px; 
  visibility: visible; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<header> 
  <div class="wrap"> 
    <div class="top__header"> 
      <div class="container"> 
        <div class="box-info"> 
          <div class="mobilem" id="mobilem"> 
            <span class="_line __1"></span> 
            <span class="_line __2"></span> 
            <span class="_line __3"></span> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="bottom__header"> 
      <div class="container"> 
        <ul class="nav"> 
          <li><a href="">Услуги</a></li> 
          <li><a href="">Прайс</a></li> 
          <li><a href="">О компании</a></li> 
          <li><a href="">Проекты</a></li> 
          <li><a href="">Доставка и оплата</a></li> 
          <li><a href="">Контакты</a></li> 
          <li><a href="">Отзывы</a></li> 
        </ul> 
      </div> 
    </div> 
  </div> 
</header>