Want more features on Pastebin? Sign Up, it's FREE!
Guest

Bloq menu on left aside

By: schiavassa on Jul 2nd, 2014  |  syntax: CSS  |  size: 1.69 KB  |  views: 171  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. #page-header #left-aside-toggle {
  2.         display: block !important;
  3. }
  4.  
  5. @media screen and (min-width: 60em) {
  6.  
  7.         #page-header #logo {
  8.                 width: 100%;
  9.                 bottom: 10px;
  10.                 text-align: center;
  11.                 -webkit-transform-origin: center;
  12.                 -ms-transform-origin: center;
  13.                 transform-origin: center;
  14.         }
  15.        
  16.         #page-header #searchbox,
  17.         #page-header #main-navigation {
  18.                 display: none;
  19.         }
  20.        
  21.         .page-aside {
  22.                 display: block;
  23.                 width: 400px;
  24.         }
  25.  
  26.         #aside-left {
  27.                 left: -400px;
  28.         }
  29.  
  30.         #aside-right {
  31.                 right: -400px;
  32.         }
  33.  
  34.         #page.aside-left-open {
  35.                 left: 400px;
  36.         }
  37.  
  38.         #page.aside-right-open {
  39.                 right: 400px;
  40.         }
  41.  
  42.         .csstransforms3d.csstransitions #aside-left {
  43.                 left: 0;
  44.                 -webkit-transform: translate3d(-100%, 0, 0);
  45.                 -ms-transform: translate3d(-100%, 0, 0);
  46.                 transform: translate3d(-100%, 0, 0);
  47.         }
  48.  
  49.         .csstransforms3d.csstransitions #aside-right {
  50.                 right: 0;
  51.                 -webkit-transform: translate3d(100%, 0, 0);
  52.                 -ms-transform: translate3d(100%, 0, 0);
  53.                 transform: translate3d(100%, 0, 0);
  54.         }
  55.  
  56.         .csstransforms3d.csstransitions #page {
  57.                 left: 0 !important;
  58.                 -webkit-transform: translate3d(0, 0, 0);
  59.                 -ms-transform: translate3d(0, 0, 0);
  60.                 transform: translate3d(0, 0, 0);
  61.                 -webkit-transition: -webkit-transform 300ms ease;
  62.                 transition: transform 300ms ease;
  63.         }
  64.  
  65.         .csstransforms3d.csstransitions #page.aside-left-open {
  66.                 -webkit-transform: translate3d(400px, 0, 0);
  67.                 -ms-transform: translate3d(400px, 0, 0);
  68.                 transform: translate3d(400px, 0, 0);
  69.         }
  70.  
  71.         .csstransforms3d.csstransitions #page.aside-right-open {
  72.                 -webkit-transform: translate3d(-400px, 0, 0);
  73.                 -ms-transform: translate3d(-400px, 0, 0);
  74.                 transform: translate3d(-400px, 0, 0);
  75.         }
  76.  
  77.         .aside-content {
  78.                 padding: 40px;
  79.         }
  80. }
clone this paste RAW Paste Data