working sidemenu iphone style

node/src/files/javascript/semantic.js

@@ -26,7 +26,7 @@ semantic.ready = function() {
 
   // selector cache
   var
-    $contents     = $('#menu'),
+    $content      = $('#content'),
     $ui           = $('.ui').not('.hover, .down'),
     $swap         = $('.theme.menu .item'),
     $menu         = $('.sidebar'),
@@ -419,14 +419,26 @@ semantic.ready = function() {
     })
   ;
 
+ 
+
+
   sideMenu = new Snap({
     element: document.getElementById('content'),
     tapToClose: false,
     disable: 'right',
     maxPosition: 275,
     minPosition: -275,
+    addBodyClasses: false
   });
-
+  $content
+    .on('mousedown touchstart', function() {
+      $(this).addClass('drag');
+    })
+    .on('mouseup touchend', function() {
+      $(this).removeClass('drag');
+    })
+  ;
+  
   $menu
     .filter('.button')
       .on('click', handler.movePeek)

node/src/files/stylesheets/library/snap.css

@@ -20,20 +20,26 @@ body > .content  {
   -webkit-overflow-scrolling: touch;
 
   -webkit-transition:
-    all 0.3s ease
+    all 0.2s ease
   ;
   -moz-transition:
-    all 0.3s ease
+    all 0.2s ease
   ;
   -o-transition:
-    all 0.3s ease
+    all 0.2s ease
   ;
   -ms-transition:
-    all 0.3s ease
+    all 0.2s ease
   ;
   transition:
-    all 0.3s ease
+    all 0.2s ease
   ;
+
+  backface-visibility:hidden;
+  -webkit-backface-visibility:hidden; /* Chrome and Safari */
+  -moz-backface-visibility:hidden; /* Firefox */
+  -ms-backface-visibility:hidden; /* Internet Explorer 10+ */
+
   -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
@@ -44,9 +50,17 @@ body > .content > .page {
   overflow: auto;
 }
 
+body > .content.drag {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+}
+
 .drawers {
   position: absolute;
-  background-color: #333333;
+  background-color: #2D2D2D;
   top: 0;
   right: 0;
   bottom: 0;
@@ -65,7 +79,8 @@ body > .content > .page {
   width: 275px;
   height: auto;
   overflow: auto;
-
+  
+  -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;

node/src/files/stylesheets/semantic.css

@@ -235,9 +235,11 @@ a:hover {
 
   border-radius: 0px;
   font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif;
-/*   -webkit-box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2);
--moz-box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2);
-box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
+
+  -webkit-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2); 
+
   border-right: none;
 }
 #example #menu .item {