Advertisement
Guest User

Untitled

a guest
Feb 7th, 2015
297
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.46 KB | None | 0 0
  1. body{background:#ededed;}
  2. .footer
  3. {
  4.    margin-top:280px;
  5.         height: 35px;
  6.         text-align:left;position:relative;
  7.  color:gray;
  8.  font-size:x-small;
  9.  
  10. }
  11. #nmenu, #nmenu ul {
  12.     margin: 0;
  13.     padding: 0;
  14.     list-style: none;
  15. }
  16. #nmenu {
  17.     width: 1000px
  18.     ;
  19.     margin: 60px auto;
  20.     border: 1px solid #222;
  21.     background-color: #111;
  22.     background-image: linear-gradient(#444, #111);
  23.     border-radius: 6px;
  24.     box-shadow: 0 1px 1px #777;
  25. }
  26. #nmenu:before,
  27. #nmenu:after {
  28.     content: "";
  29.     display: table;
  30. }
  31.  
  32. #nmenu:after {
  33.     clear: both;
  34. }
  35.  
  36. #nmenu {
  37.     zoom:1;
  38. }
  39. #nmenu li {
  40.     float: left;
  41.     border-right: 1px solid #222;
  42.     box-shadow: 1px 0 0 #444;
  43.     position: relative;
  44. }
  45.  
  46. #nmenu a {
  47.     float: left;
  48.     padding: 30px 50px;
  49.     color: #999;
  50.     text-transform: uppercase;
  51.     font: bold 12px Arial, Helvetica;
  52.     text-decoration: none;
  53.     text-shadow: 0 1px 0 #000;
  54. }
  55.  
  56. #nmenu li:hover > a {
  57.     color: #fafafa;
  58. }
  59.  
  60. *html #nmenu li a:hover { /* IE6 only */
  61.     color: #fafafa;
  62. }
  63. #nmenu ul {
  64.     margin: 20px 0 0 0;
  65.     /*IE6 only*/
  66.     opacity: 0;
  67.     visibility: hidden;
  68.     position: absolute;
  69.     top: 38px;
  70.     left: 0;
  71.     z-index: 1;    
  72.     background: #444;  
  73.     background: linear-gradient(#444, #111);
  74.     box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
  75.     border-radius: 3px;
  76.     transition: all .2s ease-in-out;
  77. }
  78.  
  79. #nmenu li:hover > ul {
  80.     opacity: 1;
  81.     visibility: visible;
  82.     margin: 0;
  83. }
  84.  
  85. #nmenu ul ul {
  86.     top: 0;
  87.     left: 150px;
  88.     margin: 0 0 0 20px;
  89.     _margin: 0; /*IE6 only*/
  90.     box-shadow: -1px 0 0 rgba(255,255,255,.3);      
  91. }
  92.  
  93. #nmenu ul li {
  94.     float: none;
  95.     display: block;
  96.     border: 0;
  97.     _line-height: 0; /*IE6 only*/
  98.     box-shadow: 0 1px 0 #111, 0 2px 0 #666;
  99. }
  100.  
  101. #nmenu ul li:last-child {  
  102.     box-shadow: none;    
  103. }
  104.  
  105. #nmenu ul a {    
  106.     padding: 10px;
  107.     width: 130px;
  108.     _height: 10px; /*IE6 only*/
  109.     display: block;
  110.     white-space: nowrap;
  111.     float: none;
  112.     text-transform: none;
  113. }
  114.  
  115. #nmenu ul a:hover {
  116.     background-color: #0186ba;
  117.     background-image: linear-gradient(#04acec, #0186ba);
  118. }
  119. #nmenu ul li:first-child > a {
  120.     border-radius: 3px 3px 0 0;
  121. }
  122.  
  123. #nmenu ul li:first-child > a:after {
  124.     content: '';
  125.     position: absolute;
  126.     left: 40px;
  127.     top: -6px;
  128.     border-left: 6px solid transparent;
  129.     border-right: 6px solid transparent;
  130.     border-bottom: 6px solid #444;
  131. }
  132.  
  133. #nmenu ul ul li:first-child a:after {
  134.     left: -6px;
  135.     top: 50%;
  136.     margin-top: -6px;
  137.     border-left: 0;
  138.     border-bottom: 6px solid transparent;
  139.     border-top: 6px solid transparent;
  140.     border-right: 6px solid #3b3b3b;
  141. }
  142.  
  143. #nmenu ul li:first-child a:hover:after {
  144.     border-bottom-color: #04acec;
  145. }
  146.  
  147. #nmenu ul ul li:first-child a:hover:after {
  148.     border-right-color: #0299d3;
  149.     border-bottom-color: transparent;  
  150. }
  151.  
  152. #nmenu ul li:last-child > a {
  153.     border-radius: 0 0 3px 3px;
  154. }
  155.  
  156. #nmenu-trigger { /* Hide it initially */
  157.     display: none;
  158. }
  159.  
  160. @media screen and (max-width: 600px) {
  161.  
  162.     #nmenu-wrap {
  163.         position: relative;
  164.     }
  165.  
  166.     #nmenu-wrap * {
  167.         box-sizing: border-box;
  168.     }
  169.  
  170.     #nmenu-trigger {
  171.         display: block; /* Show it now */
  172.         height: 40px;
  173.         line-height: 40px;
  174.         cursor: pointer;        
  175.         padding: 0 0 0 35px;
  176.         border: 1px solid #222;
  177.         color: #fafafa;
  178.         font-weight: bold;
  179.         background-color: #111;
  180.         /* Multiple backgrounds here, the first is base64 encoded */
  181.         background: url(data:image/png;base64,iVBOR...) no-repeat 10px center, linear-gradient(#444, #111);
  182.         border-radius: 6px;
  183.         box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
  184.     }
  185.  
  186.     #nmenu {
  187.         margin: 0; padding: 10px;
  188.         position: absolute;
  189.         top: 40px;
  190.         width: 100%;
  191.         z-index: 1;
  192.         display: none;
  193.         box-shadow: none;      
  194.     }
  195.  
  196.     #nmenu:after {
  197.         content: '';
  198.         position: absolute;
  199.         left: 25px;
  200.         top: -8px;
  201.         border-left: 8px solid transparent;
  202.         border-right: 8px solid transparent;
  203.         border-bottom: 8px solid #444;
  204.     }  
  205.  
  206.     #nmenu ul {
  207.         position: static;
  208.         visibility: visible;
  209.         opacity: 1;
  210.         margin: 0;
  211.         background: none;
  212.         box-shadow: none;              
  213.     }
  214.  
  215.     #nmenu ul ul {
  216.         margin: 0 0 0 20px !important;
  217.         box-shadow: none;      
  218.     }
  219.  
  220.     #nmenu li {
  221.         position: static;
  222.         display: block;
  223.         float: none;
  224.         border: 0;
  225.         margin: 5px;
  226.         box-shadow: none;          
  227.     }
  228.  
  229.     #nmenu ul li{
  230.         margin-left: 20px;
  231.         box-shadow: none;      
  232.     }
  233.  
  234.     #nmenu a{
  235.         display: block;
  236.         float: none;
  237.         padding: 0;
  238.         color: #999;
  239.     }
  240.  
  241.     #nmenu a:hover{
  242.         color: #fafafa;
  243.     }  
  244.  
  245.     #nmenu ul a{
  246.         padding: 0;
  247.         width: auto;        
  248.     }
  249.  
  250.     #nmenu ul a:hover{
  251.         background: none;  
  252.     }
  253.  
  254.     #nmenu ul li:first-child a:after,
  255.     #nmenu ul ul li:first-child a:after {
  256.         border: 0;
  257.     }      
  258.  
  259. }
  260.  
  261. @media screen and (min-width: 600px) {
  262.     #nmenu {
  263.         display: block !important;
  264.     }
  265. }  
  266.  
  267. /* iPad */
  268. .no-transition {
  269.     transition: none;
  270.     opacity: 1;
  271.     visibility: visible;
  272.     display: none;          
  273. }
  274.  
  275. #nmenu li:hover > .no-transition {
  276.     display: block;
  277. }
  278. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement