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

Untitled

By: a guest on Aug 11th, 2012  |  syntax: None  |  size: 13.56 KB  |  hits: 6  |  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. Remove gap between two rectangles in CSS
  2. *{
  3.     margin:0;
  4.     padding:0;
  5. }
  6. body{
  7.     background:#000;
  8.     font-family:"Trebuchet MS", Helvetica, sans-serif;
  9.     font-size:15px;
  10.     color: #fff;
  11.     text-transform:uppercase;
  12.     overflow-x:hidden;
  13. }
  14. .oe_overlay{
  15.     background:#000;
  16.     opacity:0;
  17.     position:fixed;
  18.     top:0px;
  19.     left:0px;
  20.     width:100%;
  21.     height:100%;
  22. }
  23. ul.oe_menu{
  24.     list-style:none;
  25.     position:relative;
  26.     margin:60px 0px 0px 40px;
  27.     width:967px;
  28.     float:left;
  29.     clear:both;
  30. }
  31. ul.oe_menu > li{
  32.     width:112px;
  33.     height:50px;
  34.     padding-bottom:2px;
  35.     float:left;
  36.     position:relative;
  37. }
  38. ul.oe_menu > li > a{
  39.     display:block;
  40.     background-color:#101010;
  41.     color:#aaa;
  42.     text-decoration:none;
  43.     font-weight:bold;
  44.     font-size:12px;
  45.     width:138px;
  46.     height:30px;
  47.     padding:10px;
  48.     margin:1px;
  49.     text-shadow:0px 0px 1px #000;
  50.     opacity:0.8;
  51. }
  52. ul.oe_menu > li > a:hover,
  53. ul.oe_menu > li.selected > a{
  54.     background:#fff;
  55.     color:#101010;
  56.     opacity:1.0;
  57.  
  58. }
  59. .oe_wrapper ul.hovered > li > a{
  60.     background:#fff;
  61.     text-shadow:0px 0px 1px #FFF;
  62. }
  63. ul.oe_menu div{
  64.     position:absolute;
  65.     top:50px;
  66.     left:1px;
  67.     background:#fff;
  68.     width:967px;
  69.     height:180px;
  70.     padding:30px;
  71.     display:none;
  72. }
  73. ul.oe_menu div ul li a{
  74.     text-decoration:none;
  75.     color:#222;
  76.     padding:2px 2px 2px 4px;
  77.     margin:2px;
  78.     display:block;
  79.     font-size:12px;
  80. }
  81. ul.oe_menu div ul.oe_full{
  82.     width:100%;
  83. }
  84. ul.oe_menu div ul li a:hover{
  85.     background:#000;
  86.     color:#fff;
  87. }
  88. ul.oe_menu li ul{
  89.     list-style:none;
  90.     float:left;
  91.     width: 150px;
  92.     margin-right:10px;
  93. }
  94. li.oe_heading{
  95.     color:#aaa;
  96.     font-size:16px;
  97.     margin-bottom:10px;
  98.     padding-bottom:6px;
  99.     border-bottom:1px solid #ddd;
  100. }
  101.        
  102. <head>
  103.         <title></title>
  104.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  105.         <meta name="description" content="" />
  106.         <meta name="keywords" content=""/>
  107.         <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
  108.         <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
  109.         <script src="js/cufon-yui.js" type="text/javascript"></script>
  110.         <script src="js/Aller.font.js" type="text/javascript"></script>
  111.         <script type="text/javascript">
  112.             Cufon.replace('ul.oe_menu div a',{hover: true});
  113.             Cufon.replace('h1,h2,.oe_heading');
  114.         </script>
  115.         <style type="text/css">
  116.             span.reference{
  117.                 position:fixed;
  118.                 left:0px;
  119.                 bottom:0px;
  120.                 background:#000;
  121.                 width:100%;
  122.                 font-size:10px;
  123.                 line-height:20px;
  124.                 text-align:right;
  125.                 height:20px;
  126.                 -moz-box-shadow:-1px 0px 10px #000;
  127.                 -webkit-box-shadow:-1px 0px 10px #000;
  128.                 box-shadow:-1px 0px 10px #000;
  129.             }
  130.             span.reference a{
  131.                 color:#aaa;
  132.                 text-transform:uppercase;
  133.                 text-decoration:none;
  134.                 margin-right:10px;
  135.  
  136.             }
  137.             span.reference a:hover{
  138.                 color:#ddd;
  139.             }
  140.             .bg_img img{
  141.                 width:100%;
  142.                 position:fixed;
  143.                 top:0px;
  144.                 left:0px;
  145.                 z-index:-1;
  146.             }
  147.             h1{
  148.                 font-size:75px;
  149.                 text-align:right;
  150.                 position:absolute;
  151.                 right:40px;
  152.                 top:20px;
  153.                 font-weight:normal;
  154.                 /*text-shadow:  0 0 3px #0096ff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #0096ff, 0 0 70px #0096ff, 0 0 80px #0096ff, 0 0 100px #0096ff, 0 0 150px #0096ff;
  155.             */}
  156.             h1 span{
  157.                 display:block;
  158.                 font-size:15px;
  159.                 font-weight:bold;
  160.             }
  161.             h2{
  162.                 position:absolute;
  163.                 top:220px;
  164.                 left:50px;
  165.                 font-size:40px;
  166.                 font-weight:normal;
  167.                 /*text-shadow:  0 0 3px #f6ff00, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #f6ff00, 0 0 70px #f6ff00, 0 0 80px #f6ff00, 0 0 100px #f6ff00, 0 0 150px #f6ff00;
  168. */}
  169.         </style>
  170.     </head>
  171.  
  172.     <body>
  173.         <div class="bg_img"><img src="images/1.jpg" alt="background" /></div>
  174.         <h1>Duke Fashion<span>Overlay Effect Menu with jQuery</span></h1>
  175.         <h2>Welcome to the world of fashion</h2>
  176.  
  177.         <div class="oe_wrapper">
  178.             <div id="oe_overlay" class="oe_overlay"></div>
  179.             <ul id="oe_menu" class="oe_menu">
  180.                 <li><a href="">Collections</a>
  181.                     <div>
  182.                         <ul>
  183.                             <li class="oe_heading">Summer 2011</li>
  184.                             <li><a href="#">Milano</a></li>
  185.                             <li><a href="#">Paris</a></li>
  186.                             <li><a href="#">Special Events</a></li>
  187.                             <li><a href="#">Runway Show</a></li>
  188.                             <li><a href="#">Overview</a></li>
  189.                         </ul>
  190.                         <ul>
  191.                             <li class="oe_heading">Winter 2010</li>
  192.                             <li><a href="#">Milano</a></li>
  193.                             <li><a href="#">New York</a></li>
  194.                             <li><a href="#">Behind the scenes</a></li>
  195.                             <li><a href="#">Interview</a></li>
  196.                             <li><a href="#">Photos</a></li>
  197.                             <li><a href="#">Download</a></li>
  198.                         </ul>
  199.                         <ul>
  200.                             <li class="oe_heading">Categories</li>
  201.                             <li><a href="#">Casual</a></li>
  202.                             <li><a href="#">Business</a></li>
  203.                             <li><a href="#">Underwear</a></li>
  204.                             <li><a href="#">Nature Pure</a></li>
  205.                             <li><a href="#">Swimwear</a></li>
  206.                             <li><a href="#">Evening</a></li>
  207.                         </ul>
  208.                     </div>
  209.                 </li>
  210.                 <li><a href="">Projects</a>
  211.                     <div style="left:-111px;"><!-- -112px -->
  212.                         <ul>
  213.                             <li class="oe_heading">Fashion Shows</li>
  214.                             <li><a href="#">Milano</a></li>
  215.                             <li><a href="#">Paris</a></li>
  216.                             <li><a href="#">Berlin</a></li>
  217.                             <li><a href="#">New York</a></li>
  218.                             <li><a href="#">London</a></li>
  219.                         </ul>
  220.                         <ul>
  221.                             <li class="oe_heading">Events</li>
  222.                             <li><a href="#">Fashion Party 2011</a></li>
  223.                             <li><a href="#">Evening specials</a></li>
  224.                             <li><a href="#">Fashion Day Milano</a></li>
  225.                             <li><a href="#">Model Workshops</a></li>
  226.                         </ul>
  227.                         <ul>
  228.                             <li class="oe_heading">Media</li>
  229.                             <li><a href="#">Wallpapers</a></li>
  230.                             <li><a href="#">Downloads</a></li>
  231.                             <li><a href="#">Images</a></li>
  232.                             <li><a href="#">Contest 2011</a></li>
  233.                             <li><a href="#">Fashion Mania</a></li>
  234.                             <li><a href="#">Green Earth Day</a></li>
  235.                         </ul>
  236.                     </div>
  237.                 </li>
  238.                 <li><a href="">Fragrances</a>
  239.                     <div style="left:-223px;">
  240.                         <ul class="oe_full">
  241.                             <li class="oe_heading">Fashion Fragrances</li>
  242.                             <li><a href="#">Deálure</a></li>
  243.                             <li><a href="#">Violet Woman</a></li>
  244.                             <li><a href="#">Deep Blue for Men</a></li>
  245.                             <li><a href="#">New York, New York</a></li>
  246.                             <li><a href="#">Illusion</a></li>
  247.                         </ul>
  248.                     </div>
  249.                 </li>
  250.                 <li><a href="">Events</a>
  251.                     <div style="left:-335px;">
  252.                         <ul>
  253.                             <li class="oe_heading">Shows 2010</li>
  254.                             <li><a href="#">Milano</a></li>
  255.                             <li><a href="#">Paris</a></li>
  256.                             <li><a href="#">Berlin</a></li>
  257.                             <li><a href="#">New York</a></li>
  258.                             <li><a href="#">London</a></li>
  259.                         </ul>
  260.                         <ul>
  261.                             <li class="oe_heading">Shows 2011</li>
  262.                             <li><a href="#">Milano</a></li>
  263.                             <li><a href="#">Paris</a></li>
  264.                             <li><a href="#">Berlin</a></li>
  265.                             <li><a href="#">New York</a></li>
  266.                             <li><a href="#">London</a></li>
  267.                         </ul>
  268.                         <ul>
  269.                             <li class="oe_heading">Special Events</li>
  270.                             <li><a href="#">Fashion Party 2011</a></li>
  271.                             <li><a href="#">Fashion Countdown Party 2010</a></li>
  272.                             <li><a href="#">Fashion Day Milano</a></li>
  273.                             <li><a href="#">Model Workshops</a></li>
  274.                         </ul>
  275.                     </div>
  276.                 </li>
  277.                 <li><a href="">Stores</a>
  278.                     <div style="left:-447px;">
  279.                         <ul>
  280.                             <li class="oe_heading">Europe</li>
  281.                             <li><a href="#">Milano</a></li>
  282.                             <li><a href="#">Paris</a></li>
  283.                             <li><a href="#">Berlin</a></li>
  284.                             <li><a href="#">London</a></li>
  285.                         </ul>
  286.                         <ul>
  287.                             <li class="oe_heading">Asia</li>
  288.                             <li><a href="#">Hong Kong</a></li>
  289.                             <li><a href="#">Tokio</a></li>
  290.                             <li><a href="#">New Delhi</a></li>
  291.                             <li><a href="#">Beijing</a></li>
  292.                         </ul>
  293.                         <ul>
  294.                             <li class="oe_heading">United States</li>
  295.                             <li><a href="#">New York</a></li>
  296.                             <li><a href="#">Los Angeles</a></li>
  297.                             <li><a href="#">Seattle</a></li>
  298.                             <li><a href="#">Miami</a></li>
  299.                         </ul>
  300.                     </div>
  301.                 </li>
  302.                <li><a href="">My table</a>
  303.                     <div style="left:-559px;">
  304.                         <ul>
  305.                             <li class="oe_heading">Europe</li>
  306.                             <li><a href="#">Milano</a></li>
  307.                             <li><a href="#">Paris</a></li>
  308.                             <li><a href="#">Berlin</a></li>
  309.                             <li><a href="#">London</a></li>
  310.                         </ul>
  311.                         <ul>
  312.                             <li class="oe_heading">Asia</li>
  313.                             <li><a href="#">Hong Kong</a></li>
  314.                             <li><a href="#">Tokio</a></li>
  315.                             <li><a href="#">New Delhi</a></li>
  316.                             <li><a href="#">Beijing</a></li>
  317.                         </ul>
  318.                         <ul>
  319.                             <li class="oe_heading">United States</li>
  320.                             <li><a href="#">New York</a></li>
  321.                             <li><a href="#">Los Angeles</a></li>
  322.                             <li><a href="#">Seattle</a></li>
  323.                             <li><a href="#">Miami</a></li>
  324.                         </ul>
  325.                     </div>
  326.                 </li>
  327.                  <li><a href="">Admin</a>
  328.                     <div style="left:-671px;">
  329.                         <ul>
  330.                             <li class="oe_heading">Europe</li>
  331.                             <li><a href="#">Milano</a></li>
  332.                             <li><a href="#">Paris</a></li>
  333.                             <li><a href="#">Berlin</a></li>
  334.                             <li><a href="#">London</a></li>
  335.                         </ul>
  336.                         <ul>
  337.                             <li class="oe_heading">Asia</li>
  338.                             <li><a href="#">Hong Kong</a></li>
  339.                             <li><a href="#">Tokio</a></li>
  340.                             <li><a href="#">New Delhi</a></li>
  341.                             <li><a href="#">Beijing</a></li>
  342.                         </ul>
  343.                         <ul>
  344.                             <li class="oe_heading">United States</li>
  345.                             <li><a href="#">New York</a></li>
  346.                             <li><a href="#">Los Angeles</a></li>
  347.                             <li><a href="#">Seattle</a></li>
  348.                             <li><a href="#">Miami</a></li>
  349.                         </ul>
  350.                     </div>
  351.                 </li>
  352.             </ul>  
  353.         </div>
  354.         <div>
  355.             <span class="reference">
  356.                 <a href="http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/">back to the Codrops tutorial</a>
  357.                 <a href="http://www.flickr.com/photos/duke9042004/" target="_blank">Background image by Duke Photo</a>
  358.             </span>
  359.         </div>
create a new version of this paste RAW Paste Data