Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Aug 6th, 2012  |  syntax: None  |  size: 2.53 KB  |  hits: 10  |  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. /**
  2.  * Design Shack Respnsive Menu
  3.  */
  4.  
  5.  
  6. * {
  7.         padding: 0;
  8.         margin: 0;
  9.        
  10.         -webkit-box-sizing: border-box;
  11.            -moz-box-sizing: border-box;
  12.                 box-sizing: border-box;
  13. }
  14.  
  15. nav {
  16.         width: 90%;
  17.         margin: 100px auto;
  18.         overflow: hidden;      
  19. }
  20.  
  21. nav ul {
  22.         list-style: none;
  23.         overflow: hidden;
  24. }
  25.  
  26. nav li a {
  27.         background: #414141;
  28.         border-right: 1px solid #fff;
  29.         color: #fff;
  30.         display: block;
  31.         float: left;
  32.         font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
  33.         padding: 10px;
  34.         text-align: center;
  35.         text-decoration: none;
  36.         text-transform: uppercase;
  37.         width: 12.5%;
  38.        
  39.         /*TRANSISTIONS*/
  40.         -webkit-transition: background 0.5s ease;
  41.            -moz-transition: background 0.5s ease;
  42.              -o-transition: background 0.5s ease;
  43.             -ms-transition: background 0.5s ease;
  44.                 transition: background 0.5s ease;
  45. }
  46.  
  47. /*HOVER*/
  48. nav li a:hover {
  49.         background: #222;
  50. }
  51.  
  52. /*SMALL*/
  53. nav small {
  54.         font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
  55.         text-transform: none;
  56.         color: #aaa;
  57. }
  58.  
  59. /*BORDER FIX*/
  60. nav li:last-child a {
  61.         border: none;
  62. }
  63.  
  64. /*BLUE MENU*/
  65. nav .blue {
  66.         margin-top: 50px;
  67. }
  68.  
  69. .blue li a {
  70.         background: #75b1de;
  71. }
  72.  
  73. .blue small {
  74.         color: white;
  75. }
  76.  
  77. .blue li a:hover {
  78.         background: #444;
  79. }
  80.  
  81. /*RED MENU*/
  82.  
  83. nav .red {
  84.         margin-top: 50px;
  85. }
  86.  
  87. .red li a {
  88.         background: #5C0002;
  89. }
  90.  
  91. .red small {
  92.         color: white;
  93. }
  94.  
  95. .red li a:hover {
  96.         background: #a60306;
  97. }
  98.  
  99. /* MEDIA QUERIES*/
  100. @media only screen and (max-width : 1220px),
  101. only screen and (max-device-width : 1220px){
  102.         nav li a {
  103.                 font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
  104.         }
  105.        
  106.         nav small {
  107.                 font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
  108.         }
  109. }
  110.  
  111. @media only screen and (max-width : 930px),
  112. only screen and (max-device-width : 930px){
  113.         nav li a {
  114.                 width: 25%;
  115.                 border-bottom: 1px solid #fff;
  116.                 font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
  117.         }
  118.        
  119.         nav li:last-child a, nav li:nth-child(4) a {
  120.                 border-right: none;
  121.         }
  122.        
  123.         nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
  124.                 border-bottom: none;
  125.         }
  126. }
  127.  
  128. @media only screen and (max-width : 580px),
  129. only screen and (max-device-width : 580px){
  130.         nav li a {
  131.                 width: 50%;
  132.                 font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
  133.                 padding-top: 12px;
  134.                 padding-bottom: 12px;
  135.         }
  136.        
  137.         nav li:nth-child(even) a {
  138.                 border-right: none;
  139.         }
  140.        
  141.         nav li:nth-child(5) a, nav li:nth-child(6) a {
  142.                 border-bottom: 1px solid #fff;
  143.         }
  144. }
  145.  
  146. @media only screen and (max-width : 320px),
  147. only screen and (max-device-width : 320px){
  148.         nav li a {
  149.                 font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
  150.         }
  151. }
create a new version of this paste RAW Paste Data