slideToggle();が反映されません。

slideToggle();が反映されません。
Toggleだと反映されますが、スライドのように綺麗に為しません。
slideToggleを反映させるには、どのようにコードを変えるべきでしょうか？

html

<section class="header-sns">
  <img src="./images/icon_twitter2.png">
  <img class="sns-second" src="./images/icon_twitter.png">
</section>

<nav class="nav-top">
  <ul>
    <li>NEWS</li>
    <li>LIVE</li>
    <li>MOVIE</li>
    <li>DISCOGRAPHY</li>
    <li>BIOGRAPHY</li>
    <li>WORKS</li>
    <li>GOODS</li>
    <li>INFO</li>
  </ul>
</nav>

</header>

css
/*header始まり*/
header{
  background-color:white;
  position:fixed;
  width:100%;
  z-index:1000;
  border-bottom:4px solid gray;
}
header img{
  width:100px;
  margin:8px 0;
  float:left;
  margin-left:20px;
}
nav li{
  list-style:none;
  display:block;
  text-align:center;
  font-size:13px;
  color:white;
  margin-bottom:0;
  padding-bottom:20px;
}
nav ul{
  margin-bottom:0;
  display:inline;
}
.nav-top{
  clear:both;
  padding-top:20px;
  width:100%;
  background-color:#babab5;
  z-index:1000;
  display:none;
  height:50vh;
  transition-duration:1s;
}
.nav-menu,
.nav-menu li{
  display:inline;
  transition:all .4s;
  box-sizing:border-box;
}
.nav-menu{
  position:relative;
  width:25px;
  height:16px;
  float:right;
  margin-top:10px;
  margin-right:20px;
}
.nav-menu span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: gray;
  border-radius: 4px;
}

.nav-menu span:nth-of-type(1) {
  top: 0;
}
.nav-menu span:nth-of-type(2) {
  top:7px;
}
.nav-menu span:nth-of-type(3) {
  bottom: 0;
}
.header-sns{
  display:none;
}
.header-sns img{
  width:43px;
  height:43px;
}
.sns-second{
  margin-right:30px;
}
@media (min-width: 768px){
  .nav-menu{
    display:none;
  }
  .nav-top{
    background-color:white;
    display:block;
    clear:none;
    height:0;
  }
  nav li{
    display:inline-block;
    color:#939393;
    font-size:20px;
    padding-left:30px;
  }
  header img{
    width:163px;
    height:37px;
    margin:8px 0;
    float:left;
    margin-left:20px;
    margin-bottom:0;
  }
  .header-sns{
    display:block;
    float:right;
  }
}

,,,,,

Javascript
$(document).ready(function(){
  $(".nav-menu").click(function(){
    $(".nav-top").slideToggle**ボールドテキスト**();
  });
});