slideToggle();が反映されません。
Toggleだと反映されますが、スライドのように綺麗に為しません。
slideToggleを反映させるには、どのようにコードを変えるべきでしょうか?
html
<header> <img src="./images/logo.png"> <section class="nav-menu"> <span></span> <span></span> <span></span> </section></header><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>
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**ボールドテキスト**(); }); });