Advertisement
schiavassa

Bloq menu on left aside

Jul 2nd, 2014
237
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.69 KB | None | 0 0
  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. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement