SHARE
TWEET

Untitled

a guest Dec 6th, 2019 85 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. * {margin: 0; padding: 0; box-sizing: border-box;}
  2.  
  3. .wrapper {
  4.     font: 20px/200% Arial, Helvetica, sans-serif ;
  5.     overflow-x: hidden;
  6.     }
  7.  
  8. section {
  9.     position: fixed;
  10.     width: 100%;
  11.     overflow: auto;
  12.     height: 100%;
  13.     padding:100px;
  14.     margin-left:0;
  15.     background-image:url("http://5preview.com/pub/media/slideshows/R3.jpg");
  16.     background-size:cover;
  17.     /* add the animation*/
  18.     transition: margin .3s;
  19.     left:0;
  20.     }
  21.  
  22. ul {list-style: none;}
  23.  
  24. /* The menu */
  25. .menu {
  26.     width: 200px;
  27.     position: fixed;
  28.     top: 0;
  29.     height:100%;
  30.     margin-left: -200px;
  31.     background: #222;
  32.     padding: 15px;
  33.     /* add the animation*/
  34.     transition: margin .3s;
  35.     left:0;
  36.     }
  37.  
  38. /* Hide the checkbox */
  39. input[type=checkbox] {
  40.     position: fixed;
  41.     right: -9999px;
  42.     opacity: 0;
  43.     }
  44.  
  45. /* Toggle */
  46. .nav-toggle {
  47.     display: block;
  48.     position: fixed;
  49.     top: 10px;
  50.     left: 0px;
  51.     height: 32px;
  52.     width: 40px;
  53.     cursor: pointer;
  54.     z-index: 99;
  55.     margin-left:10px;
  56.     /* add the animation*/
  57.     transition: margin .3s;
  58.     }
  59.  
  60. .nav-toggle span {
  61.     position: relative;
  62.     display: block;
  63.     height: 2px;
  64.     width: 40px;
  65.     background: #000;
  66.     /* add the animation*/
  67.     transition: all .3s;
  68.     }
  69.  
  70. .nav-toggle span:nth-child(2) {top: 12px;}
  71. .nav-toggle span:nth-child(3) {top: 24px;}
  72.  
  73. /* Toggle moving */
  74.  
  75. input[type=checkbox]:checked ~ .nav-toggle {
  76.   margin-left: 200px;
  77. }
  78.  
  79. input[type=checkbox]:checked ~ .nav-toggle span:nth-child(1) {
  80.     top:  8px;
  81.     left:-7px;
  82.     height:4px;
  83.     transform: scale(0.5) rotate(-45deg);
  84. }
  85.  
  86. input[type=checkbox]:checked ~ .nav-toggle span:nth-child(2) {
  87.   /*display: none;*/
  88.   left:6px;
  89.   }
  90.  
  91. input[type=checkbox]:checked ~ .nav-toggle span:nth-child(3) {
  92.     top: 15px;
  93.     left:-7.5px;
  94.     height:4px;
  95.     transform: scale(0.5) rotate(45deg);
  96. }
  97.  
  98. input[type=checkbox]:checked ~ .menu {
  99.     margin-left: 0px;
  100. }
  101.  
  102. input[type=checkbox]:checked ~ section {
  103.     margin-left: 200px;
  104. }
  105.  
  106. a {
  107.   color:#fff;width: 100%;
  108.   display: block;
  109.   text-align: center;
  110.   text-decoration:none;
  111.   }
  112.  
  113. @media screen and (min-width:1800px) {
  114.   /* CSS Document */
  115.  
  116.   .nav-toggle {display:none;}
  117.  
  118. li a::after { content:  '+';transition: .2s;display: inline-block;margin-left:5px  }
  119. li a:hover::after {content:  ' +';transform: rotate(45deg);}
  120. li a:only-child::after { content: ''; }
  121.  
  122. section {
  123.   top:0;
  124.   background-color:#212121;
  125.   background-size:cover;
  126.     line-height: 32px;
  127.     color: #000;
  128.     word-wrap:break-word !important;
  129.   z-index:10;
  130.   }
  131.  
  132. p {
  133.     text-align: center;
  134.   }
  135.  
  136. h1 {
  137.     color: #FFF;
  138.   margin: 100px;
  139.     text-align:center;
  140.     font-size:60px;
  141.   }
  142.  
  143. nav {z-index:99;position: fixed; width:100%;text-align:center;}
  144.  
  145. nav ul {
  146.     padding: 0;
  147.   margin: 0;
  148.   position: relative;
  149.   list-style: none;
  150.     }
  151.    
  152. nav ul li {
  153.     display:inline-block;
  154.     background-color: rgba(0,0,0,0.4);
  155.   width:170px;
  156.   position: relative;
  157.   }
  158.  
  159. nav a {
  160.     display:block;
  161.     padding:0 10px;
  162.     color:#FFF;
  163.     font-size:20px;
  164.     line-height: 60px;
  165.     text-decoration:none;
  166. }
  167.  
  168. nav a:hover {
  169.     background-color: #000000;
  170. }
  171.  
  172. /* keeps the dropdown invisible and assign style to list*/
  173. nav ul ul {
  174.     display: none;
  175.     position: absolute;
  176.     top: 60px;
  177.   margin-left:-85px;
  178. }
  179.    
  180. /* show dropdown 1st 2nd 3rd level on hover */
  181. nav ul li:hover > ul {
  182.     display:inherit;
  183. }
  184.    
  185. /* 1st level */
  186. nav ul ul li {
  187.     display:list-item;/* no needed in this cases of the below*/
  188.   width:170px;
  189.     float:none;
  190.     position: relative;
  191. }
  192.  
  193. /* 2nd and 3rd level*/
  194. nav ul ul ul li {
  195.     position: relative;
  196.     top:0px;
  197.     left:85px;
  198. }
  199. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top