|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <body>
| |
| − | </script>
| |
| − | <!-- jQuery js -->
| |
| − | <script>
| |
| − | $(document).ready(function(){
| |
| − | $('#sidebar-btn').click(function(){
| |
| − | $('#sidebar').toggleClass('visible');
| |
| − | $('#overlay').toggleClass('active');
| |
| − | $('#container').toggleClass('inactive');
| |
| − | $('#sidebar-btn').toggleClass('inactive');
| |
| − | });
| |
| − | $('#overlay').click(function(){
| |
| − | $('#sidebar').toggleClass('visible');
| |
| − | $('#overlay').toggleClass('active');
| |
| − | $('#container').toggleClass('inactive');
| |
| − | $('#sidebar-btn').toggleClass('inactive');
| |
| − | });
| |
| − |
| |
| − | $('#sidebar ul ul.sub').click(function(){
| |
| − | $(this).children().toggleClass('active');
| |
| − | });
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − | <!-- hammer js --->
| |
| − | <script>
| |
| − | var myContainer = document.getElementById('container');
| |
| − | var myOverlay = document.getElementById('overlay');
| |
| | | | |
| − | // create a simple instance
| |
| − | // by default, it only adds horizontal recognizers
| |
| − | var mC = new Hammer(myContainer);
| |
| − | var mO = new Hammer(myOverlay);
| |
| − |
| |
| − | // listen to events...
| |
| − | mC.on("panright", function(ev) {
| |
| − | $('#sidebar').addClass('visible');
| |
| − | $('#overlay').addClass('active');
| |
| − | $('#container').addClass('inactive');
| |
| − | $('#sidebar-btn').addClass('inactive');
| |
| − | });
| |
| − |
| |
| − | mO.on("panleft", function(ev) {
| |
| − | $('#sidebar').removeClass('visible');
| |
| − | $('#overlay').removeClass('active');
| |
| − | $('#container').removeClass('inactive');
| |
| − | $('#sidebar-btn').removeClass('inactive');
| |
| − | });
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
