Sidr+Jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Numbers</title>
<link rel="stylesheet" href="jquery.sidr.light.css" />

</head>

<body>

<header id="demoheader">
  <h1>Numbers</h1>
</header>
<div id="demo-content">

 <ul id="listy">
    <li><a href="#">1</a> </li>

    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
     <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li><li><a href="#">10</a></li><li><a href="#">11</a></li>

  </ul>
</div>

<a id="existing-content-menu" href="#existing-content-menu">Toggle Sidr</a>
<script src="jquery.min.js"></script>
<script src="jquery.sidr.min.js"></script>
<script>
$(document).ready(function() {
    $('#existing-content-menu').sidr({
      name: 'sidr-existing-content',
      source: '#demoheader, #demo-content'
    });});
</script>
<script type="text/javascript">
 $('#listy li').click(function(){alert('You have clicked: ' + $(this).text())});


</script>


</body>
</html>