CSS 25
Mobile-nav.css Guest on 6th February 2021 10:08:24 AM
  1. @charset "UTF-8";
  2. @-ms-viewport {
  3.   width: device-width;
  4. }
  5.  
  6. @viewport {
  7.   width: device-width;
  8. }
  9.  
  10. /*
  11.  *
  12.  *  Copyright (c) David Bushell | http://dbushell.com/
  13.  *
  14.  */
  15. /* normalize.css v2.0.1 | MIT License | git.io/normalize */
  16. article,
  17. aside,
  18. details,
  19. figcaption,
  20. figure,
  21. footer,
  22. header,
  23. hgroup,
  24. nav,
  25. section,
  26. summary {
  27.   display: block;
  28. }
  29.  
  30. audio,
  31. canvas,
  32. video {
  33.   display: inline-block;
  34. }
  35.  
  36. audio:not([controls]) {
  37.   display: none;
  38.   height: 0;
  39. }
  40.  
  41. [hidden] {
  42.   display: none;
  43. }
  44.  
  45. html {
  46.   font-family: sans-serif;
  47.   -webkit-text-size-adjust: 100%;
  48.   -ms-text-size-adjust: 100%;
  49. }
  50.  
  51. body {
  52.   margin: 0;
  53. }
  54.  
  55. a:focus {
  56.   outline: thin dotted;
  57. }
  58.  
  59. a:active,
  60. a:hover {
  61.   outline: 0;
  62. }
  63.  
  64. h1 {
  65.   font-size: 2em;
  66. }
  67.  
  68. abbr[title] {
  69.   border-bottom: 1px dotted;
  70. }
  71.  
  72. b,
  73. strong {
  74.   font-weight: bold;
  75. }
  76.  
  77. dfn {
  78.   font-style: italic;
  79. }
  80.  
  81. mark {
  82.   background: #ff0;
  83.   color: #000;
  84. }
  85.  
  86. code,
  87. kbd,
  88. pre,
  89. samp {
  90.   font-family: monospace, serif;
  91.   font-size: 1em;
  92. }
  93.  
  94. pre {
  95.   white-space: pre;
  96.   white-space: pre-wrap;
  97.   word-wrap: break-word;
  98. }
  99.  
  100. q {
  101.   quotes: "\201C" "\201D" "\2018" "\2019";
  102. }
  103.  
  104. small {
  105.   font-size: 80%;
  106. }
  107.  
  108. sub,
  109. sup {
  110.   font-size: 75%;
  111.   line-height: 0;
  112.   position: relative;
  113.   vertical-align: baseline;
  114. }
  115.  
  116. sup {
  117.   top: -0.5em;
  118. }
  119.  
  120. sub {
  121.   bottom: -0.25em;
  122. }
  123.  
  124. img {
  125.   border: 0;
  126. }
  127.  
  128. svg:not(:root) {
  129.   overflow: hidden;
  130. }
  131.  
  132. figure {
  133.   margin: 0;
  134. }
  135.  
  136. fieldset {
  137.   border: 1px solid silver;
  138.   margin: 0 2px;
  139.   padding: 0.35em 0.625em 0.75em;
  140. }
  141.  
  142. legend {
  143.   border: 0;
  144.   padding: 0;
  145. }
  146.  
  147. button,
  148. input,
  149. select,
  150. textarea {
  151.   font-family: inherit;
  152.   font-size: 100%;
  153.   margin: 0;
  154. }
  155.  
  156. button,
  157. input {
  158.   line-height: normal;
  159. }
  160.  
  161. button,
  162. html input[type="button"],
  163. input[type="reset"],
  164. input[type="submit"] {
  165.   -webkit-appearance: button;
  166.   cursor: pointer;
  167. }
  168.  
  169. button[disabled],
  170. input[disabled] {
  171.   cursor: default;
  172. }
  173.  
  174. input[type="checkbox"],
  175. input[type="radio"] {
  176.   box-sizing: border-box;
  177.   padding: 0;
  178. }
  179.  
  180. input[type="search"] {
  181.   -webkit-appearance: textfield;
  182.   -moz-box-sizing: content-box;
  183.   -webkit-box-sizing: content-box;
  184.   box-sizing: content-box;
  185. }
  186.  
  187. input[type="search"]::-webkit-search-cancel-button,
  188. input[type="search"]::-webkit-search-decoration {
  189.   -webkit-appearance: none;
  190. }
  191.  
  192. button::-moz-focus-inner,
  193. input::-moz-focus-inner {
  194.   border: 0;
  195.   padding: 0;
  196. }
  197.  
  198. textarea {
  199.   overflow: auto;
  200.   vertical-align: top;
  201. }
  202.  
  203. table {
  204.   border-collapse: collapse;
  205.   border-spacing: 0;
  206. }
  207.  
  208. ul, ol {
  209.   padding: 0;
  210.   list-style: none;
  211. }
  212.  
  213. h1, h2, h3, h4, h5, h6, p, ul, ol {
  214.   margin: 0;
  215. }
  216.  
  217. a {
  218.   text-decoration: none;
  219. }
  220.  
  221. body {
  222.   color: #333;
  223.   position: relative;
  224.   width: 100%;
  225.   min-width: 20em;
  226. }
  227.  
  228. .highlight {
  229.   background: #fff699;
  230.   padding: 0 0.5em;
  231. }
  232.  
  233. .prose ul, .prose ol {
  234.   list-style: outside disc;
  235.   font-size: 1em;
  236.   line-height: 1.5em;
  237.   margin-bottom: 1.5em;
  238. }
  239. .prose p {
  240.   font-size: 1em;
  241.   line-height: 1.5em;
  242.   margin-bottom: 1.5em;
  243. }
  244. .prose p.small {
  245.   color: #666;
  246.   font-size: 0.8125em;
  247.   line-height: 1.84615em;
  248.   margin-bottom: 1.84615em;
  249. }
  250. .prose p.medium {
  251.   color: #666;
  252.   font-size: 0.875em;
  253.   line-height: 1.71429em;
  254.   margin-bottom: 1.71429em;
  255. }
  256. .prose p:last-child {
  257.   margin-bottom: 0;
  258. }
  259. .prose h1 {
  260.   font-size: 1.875em;
  261.   line-height: 1.2em;
  262.   margin-bottom: 0.4em;
  263. }
  264. .prose h2 {
  265.   font-size: 1.5em;
  266.   line-height: 1.25em;
  267.   margin-bottom: 0.5em;
  268. }
  269. .prose a {
  270.   color: #6d7173;
  271.   border-bottom: 1px solid #a1cfe5;
  272.   text-decoration: none;
  273.   outline: none;
  274. }
  275. .prose a:focus, .prose a:hover {
  276.   color: #4ab336;
  277.   border-bottom-color: #77b36b;
  278. }
  279.  
  280. .block {
  281.   position: relative;
  282.   margin: 0 auto;
  283.   padding: 1.5em 1.25em;
  284.   max-width: 60em;
  285. }
  286.  
  287. .close-btn {
  288.   display: block;
  289.   width: 39px;
  290.   height: 45px;
  291.   padding: 0;
  292.   border: 0;
  293.   outline: none;
  294.   background: #333333 url("../images/close-icon.png") left top no-repeat;
  295.   background-size: 39px 45px;
  296.   overflow: hidden;
  297.   white-space: nowrap;
  298.   text-indent: 100%;
  299.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  300.   opacity: 1;
  301.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  302. }
  303. .no-svg .close-btn {
  304.   background-image: url("../img/close-btn.png");
  305. }
  306. .close-btn:focus, .close-btn:hover {
  307.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  308.   opacity: 1;
  309. }
  310.  
  311. .nav-btn {
  312.   display: block;
  313.   /*width: 2.625em;
  314.   height: 2.25em;*/
  315.   padding: 0;
  316.   border: 0;
  317.   outline: none;
  318.   background: #333333 url("../images/menu-button.png") left center no-repeat;
  319.   background-size: 1.875em 1.5em;
  320.   overflow: hidden;
  321.   white-space: nowrap;
  322.   /*text-indent: 100%;*/
  323.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  324.   opacity: 1;
  325.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  326. }
  327. .no-svg .nav-btn {
  328.   background-image: url("../img/nav-icon.png");
  329. }
  330. .nav-btn:hover, .nav-btn:focus {
  331.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  332.   opacity: 1;
  333. }
  334.  
  335. #outer-wrap {
  336.   position: relative;
  337.   overflow: hidden;
  338.   width: 100%;
  339. }
  340.  
  341. #nav {
  342.   z-index: 200;
  343.   position: relative;
  344.   overflow: hidden;
  345.   width: 100%;
  346.   color: #fff;
  347. }
  348. #nav .close-btn {
  349.   display: none;
  350. }
  351. #nav .block-title {
  352.   border: 0;
  353.   clip: rect(0 0 0 0);
  354.   height: 1px;
  355.   margin: -1px;
  356.   overflow: hidden;
  357.   padding: 0;
  358.   position: absolute;
  359.   width: 1px;
  360. }
  361. #nav .block {
  362.   z-index: 2;
  363.   position: relative;
  364.   padding: 0.75em 1.25em;
  365. }
  366. #nav ul {
  367.   *zoom: 1;
  368.   display: block;
  369. }
  370. #nav ul:before, #nav ul:after {
  371.   content: "";
  372.   display: table;
  373. }
  374. #nav ul:after {
  375.   clear: both;
  376. }
  377. #nav li {
  378.   display: block;
  379. }
  380. #nav li a {
  381.   background-color: #EFEFEF;
  382.   display: block;
  383.   color: #363636;
  384.   font-family: "HelveticaNeueW01-57Cn", Helvetica, Verdana, Arial, sans-serif;
  385.   font-size: 18px;
  386.   line-height: 1.0em;
  387.   outline: none;
  388.   text-transform: uppercase;
  389. }
  390. #nav li.gray a {
  391.   background-color: #363636;
  392.   color: #FFF;
  393. }
  394. /*#nav li a:focus, #nav li a:hover {
  395.   color: #fff;
  396.   background: rgba(255, 255, 255, 0.1);
  397. }*/
  398. #nav li.is-active a {
  399.   color: #fff;
  400. }
  401.  
  402. #top {
  403.   z-index: 100;
  404.   position: relative;
  405.   color: #fff;
  406.   background: #333333;
  407. }
  408. #top .block-title {
  409.   margin: 0;
  410.   font-size: 1.875em;
  411.   line-height: 1.2em;
  412.   text-align: center;
  413.   white-space: nowrap;
  414. }
  415. #top .nav-btn {
  416.   position: absolute;
  417.   top: 1.5em;
  418.   left: 1.875em;
  419. }
  420.  
  421. #main {
  422.   background: #fff;
  423. }
  424. #main .block {
  425.   padding: 2.625em 1.875em;
  426. }
  427.  
  428. footer[role="contentinfo"] {
  429.   background: #ddd;
  430. }
  431.  
  432. @media screen and (min-width: 768px) {
  433.   #top .nav-btn {
  434.     border: 0;
  435.     clip: rect(0 0 0 0);
  436.     height: 1px;
  437.     margin: -1px;
  438.     overflow: hidden;
  439.     padding: 0;
  440.     position: absolute;
  441.     width: 1px;
  442.   }
  443.  
  444.   #nav .close-btn {
  445.     border: 0;
  446.     clip: rect(0 0 0 0);
  447.     height: 1px;
  448.     margin: -1px;
  449.     overflow: hidden;
  450.     padding: 0;
  451.     position: absolute;
  452.     width: 1px;
  453.   }
  454.   #nav .block-title {
  455.     border: 0;
  456.     clip: rect(0 0 0 0);
  457.     height: 1px;
  458.     margin: -1px;
  459.     overflow: hidden;
  460.     padding: 0;
  461.     position: absolute;
  462.     width: 1px;
  463.   }
  464.   #nav ul {
  465.     text-align: center;
  466.     white-space: nowrap;
  467.   }
  468.   #nav li {
  469.     display: inline-block;
  470.     border-right: 1px solid rgba(255, 255, 255, 0.1);
  471.   }
  472.   #nav li:last-child {
  473.     border-right: none;
  474.   }
  475.   #nav li a {
  476.     padding: 0.42857em 0.85714em;
  477.   }
  478. }
  479. @media only screen and (max-width: 767px) {
  480.  
  481. #inner-wrap {
  482.   position: relative;
  483.   width: 100%;
  484. }
  485.  
  486.   #nav {
  487.     display: block;
  488.     padding-top: 0;
  489.     position: absolute;
  490.     top: 0;
  491.     width: 100%;
  492.   }
  493.   #nav:not(:target) {
  494.     z-index: 1;
  495.     height: 0;
  496.   }
  497.   #nav:target .close-btn {
  498.     display: block;
  499.   }
  500.   #nav .close-btn {
  501.     position: absolute;
  502.     top: 0;
  503.     left: 0;
  504.   }
  505.   #nav .block {
  506.     position: relative;
  507.     padding: 45px 0 0 0;
  508.   }
  509.   #nav li {
  510.     position: relative;
  511.     border-top: 1px solid #D2D2D2;
  512.   }
  513.   #nav li:last-child {
  514.     border-bottom: 1px solid #D2D2D2;
  515.   }
  516.   #nav li.is-active:after {
  517.     z-index: 50;
  518.     display: block;
  519.     content: "";
  520.     position: absolute;
  521.     top: 50%;
  522.     right: -0.03125em;
  523.     margin-top: -0.625em;
  524.     border-top: 0.625em transparent solid;
  525.     border-bottom: 0.625em transparent solid;
  526.     border-right: 0.625em white solid;
  527.   }
  528.   #nav li a {
  529.     padding: 20px;
  530.   }
  531.   #nav li.arrow a {
  532.       background: #EFEFEF url('../images/mobile-nav-arrow-gray.png') no-repeat 215px 20px;
  533.       padding-right: 50px;
  534.   }
  535.   #nav li.gray.arrow a {
  536.      background: #363636 url('../images/mobile-nav-arrow.png') no-repeat 215px 20px;  
  537.   }
  538.    #nav li.arrow a.active {
  539.       background: #EFEFEF url('../images/mobile-nav-arrow-gray-down.png') no-repeat 215px 20px;
  540.       padding-right: 50px;
  541.   }
  542.   #nav li.gray.arrow a.active {
  543.      background: #363636 url('../images/mobile-nav-arrow-down.png') no-repeat 215px 20px;  
  544.   }
  545.  
  546.   .js-ready #nav {
  547.     height: 100%;
  548.     width: 78%;
  549.     background: #333333;
  550.     -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
  551.     -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
  552.     box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
  553.   }
  554.   .js-ready #nav .block {
  555.     background: #FFF;
  556.   }
  557.   .js-ready #nav .close-btn {
  558.     display: block;
  559.     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  560.     opacity: 1;
  561.     z-index: 300;
  562.   }
  563.   .js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover {
  564.     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  565.     opacity: 1;
  566.   }
  567.  
  568.   .js-ready #nav {
  569.     left: -78%;
  570.   }
  571.   .js-ready #inner-wrap {
  572.     left: 0;
  573.   }
  574.  
  575.   .js-nav #inner-wrap {
  576.     left: 78%;
  577.   }
  578.   /* darken the main body of the page when nav appears */
  579.   .csstransforms3d.csstransitions.js-ready header, .csstransforms3d.csstransitions.js-ready #body, .csstransforms3d.csstransitions.js-ready footer {
  580.       opacity: 1.0;
  581.     /*  -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
  582.     -webkit-transition-delay: ease, 0s;
  583.     -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
  584.     -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
  585.     transition: opacity 300ms 100ms ease, transform 500ms ease;*/
  586.      
  587.   }
  588.   .csstransforms3d.csstransitions.js-nav header, .csstransforms3d.csstransitions.js-nav #body, .csstransforms3d.csstransitions.js-nav footer {
  589.         opacity: 0.4;
  590.   }
  591.  
  592.   .csstransforms3d.csstransitions.js-ready #nav {
  593.     left: 0;
  594.     -webkit-transform: translate3d(-100%, 0, 0);
  595.     -moz-transform: translate3d(-100%, 0, 0);
  596.     -ms-transform: translate3d(-100%, 0, 0);
  597.     -o-transform: translate3d(-100%, 0, 0);
  598.     transform: translate3d(-100%, 0, 0);
  599.     -webkit-backface-visibility: hidden;
  600.     -moz-backface-visibility: hidden;
  601.     -ms-backface-visibility: hidden;
  602.     -o-backface-visibility: hidden;
  603.     backface-visibility: hidden;
  604.   }
  605.   .csstransforms3d.csstransitions.js-ready #inner-wrap {
  606.     left: 0 !important;
  607.     -webkit-transform: translate3d(0, 0, 0);
  608.     -moz-transform: translate3d(0, 0, 0);
  609.     -ms-transform: translate3d(0, 0, 0);
  610.     -o-transform: translate3d(0, 0, 0);
  611.     transform: translate3d(0, 0, 0);
  612.     -webkit-transition: -webkit-transform 500ms ease;
  613.     -moz-transition: -moz-transform 500ms ease;
  614.     -o-transition: -o-transform 500ms ease;
  615.     transition: transform 500ms ease;
  616.     -webkit-backface-visibility: hidden;
  617.     -moz-backface-visibility: hidden;
  618.     -ms-backface-visibility: hidden;
  619.     -o-backface-visibility: hidden;
  620.     backface-visibility: hidden;
  621.   }
  622.  
  623.   .csstransforms3d.csstransitions.js-nav #inner-wrap {
  624.     -webkit-transform: translate3d(78%, 0, 0) scale3d(1, 1, 1);
  625.     -moz-transform: translate3d(78%, 0, 0) scale3d(1, 1, 1);
  626.     -ms-transform: translate3d(78%, 0, 0) scale3d(1, 1, 1);
  627.     -o-transform: translate3d(78%, 0, 0) scale3d(1, 1, 1);
  628.     transform: translate3d(78%, 0, 0) scale3d(1, 1, 1);
  629.   }
  630.  
  631.   .csstransforms3d.csstransitions.js-ready #nav .block {
  632.     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  633.     opacity: 0.7;
  634.     -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
  635.     -webkit-transition-delay: ease, 0s;
  636.     -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
  637.     -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
  638.     transition: opacity 300ms 100ms ease, transform 500ms ease;
  639.     -webkit-transform: translate3d(78%, 0, 0) scale3d(0.9, 0.9, 0.9);
  640.     -moz-transform: translate3d(78%, 0, 0) scale3d(0.9, 0.9, 0.9);
  641.     -ms-transform: translate3d(78%, 0, 0) scale3d(0.9, 0.9, 0.9);
  642.     -o-transform: translate3d(78%, 0, 0) scale3d(0.9, 0.9, 0.9);
  643.     transform: translate3d(78%, 0, 0) scale3d(0.9, 0.9, 0.9);
  644.     -webkit-transform-origin: 50% 0%;
  645.     -moz-transform-origin: 50% 0%;
  646.     -ms-transform-origin: 50% 0%;
  647.     -o-transform-origin: 50% 0%;
  648.     transform-origin: 50% 0%;
  649.   }
  650.  
  651.   .csstransforms3d.csstransitions.js-nav #nav .block {
  652.     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  653.     opacity: 1;
  654.     -webkit-transform: translate3d(0, 0, 0);
  655.     -moz-transform: translate3d(0, 0, 0);
  656.     -ms-transform: translate3d(0, 0, 0);
  657.     -o-transform: translate3d(0, 0, 0);
  658.     transform: translate3d(0, 0, 0);
  659.   }
  660.  
  661.   /*SECOND LEVEL NAV*/
  662.   #nav ul li ul {
  663.       background-color: #FFF;
  664.       margin-top: 0;
  665.   }
  666.   #nav ul li.gray {
  667.     background-color: #666;
  668.   }
  669.   #nav ul li.gray ul {
  670.       background-color: #FFF;
  671.       margin: 0 auto;
  672.       width: 100%;
  673.   }
  674.  
  675.   #nav ul li.gray ul {
  676.       background-color: #666;
  677.       border-top:  1px solid #D2D2D2;
  678.   }
  679.   #nav ul li ul li {
  680.       width: 100%;
  681.       margin: 0 auto;
  682.   }
  683.   #nav ul li.gray ul li {
  684.       width: 80%;
  685.   }
  686.   #nav ul li ul li, #nav ul li ul li:last-child {
  687.       border: 0;
  688.   }
  689.  
  690.   #nav ul li ul li a {
  691.       background-color: #FFF;
  692.       border-top: #EFEFEF;
  693.       font-size: 16px;
  694.       padding: 8px 10px 8px 20px;
  695.       text-transform: uppercase;
  696.   }
  697.    #nav ul li.arrow ul li a, #nav ul li.gray.arrow ul li a {
  698.       background-image: none;
  699.    }
  700.    #nav ul li.arrow ul li a {
  701.       background-color: #FFF;
  702.       border-top: 1px solid #EFEFEF;
  703.    }
  704.    #nav ul li.gray.arrow ul li a {
  705.       background-color: #666;
  706.       border-top: 1px solid #EFEFEF;
  707.       padding: 20px 0;
  708.    }
  709.    #nav ul li.gray.arrow ul li:first-child a {
  710.        border-top: 0;
  711.    }
  712.  
  713. }

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

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