ช่วยเขียน jquery ที่ใโหลดมาหน่อยครับ

[kunnarakkup]

เขียนโค้ดตามล้้งนี้อะครับแต่ไม่รู้ว่าใส่อะไรผิด http://www.jqueryscript.net/menu/CSS3-jQuery-Based-Off-canvas-Navigation-with-Fullscreen-Overlay.html
ลองเขียนแล้วได้แบบในรูปแต่กดตรงแทบสีเขียวแล้วไม่สไลด์ออกมา



<style>
.menu {
 width: 250px;
 height: 100%;
 position: fixed;
 background-color: seagreen;
 -webkit-transition: all 1s;
 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;
 -webkit-transition: all .7s ease;
 transition: all .7s ease;
}

#toggle:hover { cursor: pointer; }

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

.content {
 width: 100%;
 height: 100%;
 margin-left: 0px;
 -webkit-transition: all .4s;
 transition: all .4s;
}

.content.closed .text {
 -webkit-transform: translateX(80px);
 -ms-transform: translateX(80px);
 transform: translateX(80px);
}

.text {
 width: 60%;
 margin: auto;
 -webkit-transition: all .4s ease;
 transition: all .4s ease;
 margin-top: 80px;
 margin-bottom: 80px;
}

.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;
 -webkit-transition: all .3s;
 transition: all .3s;
}

.menu ul li:hover {
 background-color: #3bb16f;
 cursor: pointer;
}

#wrapper {
 height: 100%;
 min-height: 100%;
 position: fixed;
 overflow-y: auto;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}

#wrapper.closed { position: fixed; }

*::-moz-selection {
background-color: #1b5233;
color: floralwhite;
}

*::selection {
 background-color: #1b5233;
 color: floralwhite;
}
</style>
---------------------------------------------
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
-----------------------------------------------


<div id="toggle">

<div class="menu closed">
 <ul>
   <li>Home</li>
   <li>About</li>
   <li>Contact</li>
   <li>Blog</li>
   <li>Share</li>
 </ul>
</div>
<div id="wrapper">
 <div class="content">
   <div class="text">
     Your content goes here
   </div>
 </div>
</div>
</div>

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

[wasantec]

โค้ด เลือก ขยาย

<div id="toggle">

<div class="menu closed">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    <li>Blog</li>
    <li>Share</li>
  </ul>
</div>
<div id="wrapper">
  <div class="content">
    <div class="text">
      Your content goes here
    </div>
  </div>
</div>
</div>

จากตัวอย่าง <div id="toggle"> มันจะอยู่นอกครับ ลอง Code ข้างล่างดูครับ

โค้ด เลือก ขยาย



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

<div class="menu closed">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    <li>Blog</li>
    <li>Share</li>
  </ul>
</div>
<div id="wrapper">
  <div class="content">
    <div class="text">
      Your content goes here
    </div>
  </div>
</div>