Sidr Plugin

Adding cookie so last state can be remembered.

HTML

<link rel="stylesheet" href="http://james2013.batcave.net/stylesheets/jquery.sidr.dark.css">
<script src="http://james2013.batcave.net/jquery.sidr.min.js"></script>
<script src="http://james2013.batcave.net/jquery.cookie.js"></script>
<li><a href="#" id="simple-menu">Open Menu</a></li>

<section id="menu-container">
     <nav id="sidr" >
        <ul>
            <li><a href="#">Menu 1</a>
            	<ul class="sub-menu-sidr">
                	<li><a href="#">Item 1.1</a></li>
                    <li><a href="#">Item 1.2</a></li>
                    <li><a href="#">Item 1.3</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 2</a>
            	<ul class="sub-menu-sidr">
                	<li><a href="#">Item 1.1</a></li>
                    <li><a href="#">Item 1.2</a></li>
                    <li><a href="#">Item 1.3</a></li>
                </ul>
                <li><a href="#">Menu 3</a>
            	<ul class="sub-menu-sidr">
                	<li><a href="#">Item 1.1</a></li>
                    <li><a href="#">Item 1.2</a></li>
                    <li><a href="#">Item 1.3</a></li>
                </ul>
            </li>
            </li>
       </ul>
    </nav>   
  </section>

CSS

/*.sidr{top:70px;}*/ /*this solve the problem but its not correct*/

JavaScript

$(document).ready(function() {
      $('#simple-menu').sidr({
           name: 'sidr', 
          speed: 200, 
          side: 'left',
          source: null, 
          renaming: true, 
          body: 'body'

         });
    });

$(document).ready(function() {
    $('.sub-menu-sidr').hide();

    $("#sidr li:has(ul)").click(function(){

    $("ul",this).toggle('fast');
    });
});