Slide menu is not sliding

Question

My code contains HTML, CSS and js file. Though I'm ok with CSS learning JS so I am getting stuck in it. The green color window in output seems to be slide but not happening so.

I am also using <script src="js/modernizr.custom.js"></script> to refer to the js page but it not happening so even if I have tried all these reloated stuff but i unable to refer from HTML even if it's not working on the same HTML page under TAG

$( "#toggle" ).click(function() {
  $(".menu").toggleClass("closed");
  $(this).toggleClass("closed");
  $(".content").toggleClass("closed");
  $("#wrapper").toggleClass("closed")
});

* { font-family:courier; box-sizing:border-box; }

html, body { margin:0; padding:0; height:100%; min-height:100%; background-color:floralwhite }

.menu { width:250px; height:100%; position:fixed; background-color:seagreen; transition:all 1s; left:0; z-index:50; overflow-y:auto; padding-bottom:100px; }

.menu.closed { left:-250px; }

#toggle { background-color:seagreen; height:100%; min-height:100%; width:50px; position:fixed; top:0; bottom:0; left:0px; z-index:25; &:hover { cursor:pointer; } &.closed { left:0px; top:0; bottom:0; right:0; width:100%; height:100%; opacity:.3; } transition:all .7s ease; }



.menu ul { list-style-type:none; padding:0; margin:85px 0 0 40px; padding-right:40px; }
.menu ul li { color:floralwhite; font-size:20px; margin:0 0 5px 0; display:block; height:40px; line-height:40px; &:hover { background-color:lighten(seagreen, 10%); cursor:pointer; } padding-left:10px; transition:all .3s; }

<div id="toggle">
</div>

<div class="menu closed">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Logo</a></li>
      <li>Stuff</li>
      <li>Cooking</li>
      <li>Games</li>
    </ul>
</div>

Answer 1

$("#toggle").click(function() {
  $(".menu").toggleClass("closed");
  $(this).toggleClass("closed");
  $(".content").toggleClass("closed");
  $("#wrapper").toggleClass("closed")
});

* {
  font-family: courier;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  background-color: floralwhite
}

.menu {
  width: 250px;
  height: 100%;
  position: fixed;
  background-color: seagreen;
  transition: all 1s;
  left: 0;
  z-index: 50;
  overflow-y: auto;
  padding-bottom: 100px;
}

.menu.closed {
  left: -250px;
}

#wrapper { margin-left: 50px;}

#wrapper.closed{ left: 250px;  margin-left: 0px; transition: all .3s;  position: relative;}
#toggle {
  background-color: seagreen;
  height: 100%;
  min-height: 100%;
  width: 50px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0px;
  z-index: 25;
  transition: all .7s ease;
}

#toggle:hover {
  cursor: pointer;
}

#toggle.closed {
  left: 0px;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: .3;
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 85px 0 0 40px;
  padding-right: 40px;
}
.menu ul li {
  color: floralwhite;
  font-size: 20px;
  margin: 0 0 5px 0;
  display: block;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  transition: all .3s;
}
.menu ul li:hover {
  background-color: lighten(seagreen, 10%);
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle"> menu 
</div>

<div class="menu closed">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Logo</a></li>
    <li>Stuff</li>
    <li>Cooking</li>
    <li>Games</li>
  </ul>
</div>

<div id="wrapper"> dwdlkqnbwkjdbjqkbwkbqkh  </div>

Answer 2

Your CSS contains SCSS elements, like

#toggle {
  ...
  #toggle:hover {
    cursor: pointer;
  }
  ...
}

There is no nesting in plain CSS. Convert these nested rules to normal CSS (and add jQuery to the snippet) to make it work.

In general, always make sure, that your markup, styles and javascript code doesn't have syntax errors. There are tons of tools for that.

$("#toggle").click(function() {
  $(".menu").toggleClass("closed");
  $(this).toggleClass("closed");
  $(".content").toggleClass("closed");
  $("#wrapper").toggleClass("closed")
});

* {
  font-family: courier;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  background-color: floralwhite
}

.menu {
  width: 250px;
  height: 100%;
  position: fixed;
  background-color: seagreen;
  transition: all 1s;
  left: 0;
  z-index: 50;
  overflow-y: auto;
  padding-bottom: 100px;
}

.menu.closed {
  left: -250px;
}

#toggle {
  background-color: seagreen;
  height: 100%;
  min-height: 100%;
  width: 50px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0px;
  z-index: 25;
  transition: all .7s ease;
}

#toggle:hover {
  cursor: pointer;
}

#toggle.closed {
  left: 0px;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: .3;
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 85px 0 0 40px;
  padding-right: 40px;
}
.menu ul li {
  color: floralwhite;
  font-size: 20px;
  margin: 0 0 5px 0;
  display: block;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  transition: all .3s;
}
.menu ul li:hover {
  background-color: lighten(seagreen, 10%);
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle">
</div>

<div class="menu closed">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Logo</a></li>
    <li>Stuff</li>
    <li>Cooking</li>
    <li>Games</li>
  </ul>
</div>