CSS   20

root-menu.css

Guest on 31st May 2021 10:29:50 PM

  1. *,
  2. *:after,
  3. *::before {
  4.     -moz-box-sizing: border-box;
  5.     box-sizing: border-box;
  6. }
  7.  
  8. html,
  9. body,
  10. .root-container,
  11. .root-content,
  12. .root-content {
  13.     height: 100%;
  14. }
  15.  
  16. .root-content {
  17.     overflow-y: scroll;
  18. }
  19.  
  20. .root-content,
  21. .root-content-inner {
  22.     position: relative;
  23. }
  24.  
  25. .root-container {
  26.     position: relative;
  27.     overflow: hidden;
  28. }
  29.  
  30. .root-content {
  31.     position: relative;
  32.     left: 0;
  33.     z-index: 99;
  34.     height: 100%;
  35.     -webkit-transition: -webkit-transform 0.5s;
  36.     transition: transform 0.5s;
  37. }
  38.  
  39. .root-content::after {
  40.     position: absolute;
  41.     top: 0;
  42.     right: 0;
  43.     width: 0;
  44.     height: 0;
  45.     background: rgba(0,0,0,0.2);
  46.     content: '';
  47.     opacity: 0;
  48.     -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  49.     transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  50. }
  51.  
  52. .root-menu-open .root-content::after {
  53.     width: 100%;
  54.     height: 100%;
  55.     opacity: 1;
  56.     -webkit-transition: opacity 0.5s;
  57.     transition: opacity 0.5s;
  58. }
  59.  
  60. .root-menu {
  61.     position: absolute;
  62.     top: 0;
  63.     left: 0;
  64.     z-index: 100;
  65.     visibility: hidden;
  66.     width: 300px;
  67.     height: 100%;
  68.     background: #48a770;
  69.     -webkit-transition: all 0.5s;
  70.     transition: all 0.5s;
  71. }
  72.  
  73. .root-menu::after {
  74.     position: absolute;
  75.     top: 0;
  76.     right: 0;
  77.     width: 100%;
  78.     height: 100%;
  79.     background: rgba(0,0,0,0.2);
  80.     content: '';
  81.     opacity: 1;
  82.     -webkit-transition: opacity 0.5s;
  83.     transition: opacity 0.5s;
  84. }
  85.  
  86. .root-menu-open .root-menu::after {
  87.     width: 0;
  88.     height: 0;
  89.     opacity: 0;
  90.     -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  91.     transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  92. }
  93.  
  94. /* content style */
  95.  
  96. .root-menu ul {
  97.     margin: 0;
  98.     padding: 0;
  99.     list-style: none;
  100. }
  101.  
  102. .root-menu h2 {
  103.     margin: 0;
  104.     padding: 1em;
  105.     color: rgba(0,0,0,0.4);
  106.     text-shadow: 0 0 1px rgba(0,0,0,0.1);
  107.     font-weight: 300;
  108.     font-size: 2em;
  109. }
  110. .root-menu h2 .close {
  111.     cursor: pointer;
  112. }
  113.  
  114. .root-menu ul li a {
  115.     display: block;
  116.     padding: 1em 1em 1em 1.2em;
  117.     outline: none;
  118.     box-shadow: inset 0 -1px rgba(0,0,0,0.2);
  119.     color: #f3efe0;
  120.     text-transform: uppercase;
  121.     text-shadow: 0 0 1px rgba(255,255,255,0.1);
  122.     letter-spacing: 1px;
  123.     font-weight: 400;
  124.     -webkit-transition: background 0.3s, box-shadow 0.3s;
  125.     transition: background 0.3s, box-shadow 0.3s;
  126. }
  127.  
  128. .root-menu ul li:first-child a {
  129.     box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
  130. }
  131.  
  132. .root-menu ul li a:hover {
  133.     background: rgba(0,0,0,0.2);
  134.     box-shadow: inset 0 -1px rgba(0,0,0,0);
  135.     color: #fff;
  136. }
  137.  
  138. .root-menu {
  139.     visibility: visible;
  140.     -webkit-transform: translate3d(-100%, 0, 0);
  141.     transform: translate3d(-100%, 0, 0);
  142. }
  143.  
  144. .root-menu-open .root-menu {
  145.     visibility: visible;
  146.     -webkit-transform: translate3d(0, 0, 0);
  147.     transform: translate3d(0, 0, 0);
  148. }
  149.  
  150. .root-menu::after {
  151.     display: none;
  152. }
  153.  
  154. /* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
  155. .no-csstransforms3d .root-content,
  156. .no-js .root-content {
  157.     padding-left: 300px;
  158. }

Raw Paste


Login or Register to edit or fork this paste. It's free.