사이드메뉴 관련 제이쿼리 질문입니다.. 채택완료

</p>

<p><span class="spanclick"  onclick="openNav()" style="float:right">☰ open</span></p>

<p><style>

@media screen and (max-width: 600px) {

 .sidenav{

  width: 100%;

  height: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: #111;

  overflow-y: hidden;

  transition: 0.5s;

}</p>

<p>.sidenav a {

  padding: 8px 8px 8px 32px;

  text-decoration: none;

  font-size: 25px;

  color: #818181;

  display: block;

}</p>

<p>.sidenav a:hover {

  color: #f1f1f1;

}</p>

<p>.sidenav .closebtn {

  position: absolute;

  top: 0;

  right: 25px;

  font-size: 36px;

  margin-left: 50px;

}</p>

<p>}

@media screen and (min-width: 601px) {

  .sidenav{

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: #111;

  overflow-x: hidden;

  transition: 0.5s;

  padding-top: 60px;

}</p>

<p>.sidenav a {

  padding: 8px 8px 8px 32px;

  text-decoration: none;

  font-size: 25px;

  color: #818181;

  display: block;

}</p>

<p>.sidenav a:hover {

  color: #f1f1f1;

}</p>

<p>.sidenav .closebtn {

  position: absolute;

  top: 0;

  right: 25px;

  font-size: 36px;

  margin-left: 50px;

}

}

</style>

<div id="mySidenav" class="sidenav">

  <a href="#">About</a>

  <a href="#">Services</a>

  <a href="#">Clients</a>

  <a href="#">Contact</a>

</div></p>

<p>

<script>

function openNav() {

        $('.spanclick').click(function(){

            $(window).resize(function() { 

                if($(window).width() >=601) {

                      $(".sidenav").css("width","250px");

                      $(".sidenav").css("z-index","2000");

                      $(".sidenav").css("float","left");

                  }

                  else{

                      $(".sidenav").css("height","800px");

                      $(".sidenav").css("z-index","2000");

                      $(".sidenav").css("float","left");

                  }

              });

                  $(".spanclick").attr("class","spanclick_close");

                  $(".sidenav").attr("class","sidenav close");

              });

             

          $('.spanclick_close').click(function(){

              $(window).resize(function() { 

                if($(window).width() >=601) {

                      $(".sidenav").css("width","0px");

                  }

                  else{

                      $(".sidenav").css("height","0px");

                  }

              });

              $(".spanclick_close").attr("class","spanclick");

              $(".sidenav close").attr("class","sidenav");

          });

}

function closeNav() {

    $(window).resize(function() { 

        if($(window).width() >=601) {

              $("#mySidenav").style.width = "0";

          }

          else{

              $("#mySidenav").style.height = "0";

          }

 });

 

}

</script>