CSS 3 Mega Dropdown Menu Tutorial, es un bonito tutorial para aquellos que venían pensando mejorar el menú de sus clientes. El objetivo de este tutorial, es poder crear un menú atractivo y más funcional, usando nuevos atributos de CSS3 para reducir aún más el uso de las imágenes.

DemoDescarga - Info y Tutorial  CSS 3 Mega Dropdown


1 – HTML

  1. <div id="nav_wrapper">
  2.     <span id="menu_start"><a href="#" class="home">Home</a></span>
  3.     <ul id="topnav">           
  4.         <li class="liSub">
  5.             <a href="#">
  6.                 <span class="dd_wrapper">
  7.                     Tutorials
  8.                     <span class="dd_action"><img src="arrow.png" /></span>
  9.                 </span>
  10.             </a>
  11.             <div style="opacity: 0; display: none; width: 300px;" class="sub">
  12.                 <ul>                   
  13.                     <li><a href="#">Painting</a></li>
  14.                     <li><a href="#">Photo Effects</a></li>
  15.                     <li><a href="#">Text Effects</a></li>
  16.                     <li><a href="#">Drawing</a></li>
  17.                     <li><a href="#">Illustration</a></li>                        
  18.                 </ul>
  19.                 <ul>                   
  20.                     <li><a href="#">Interface</a></li>
  21.                     <li><a href="#">Designing</a></li>
  22.                     <li><a href="#">HTML & CSS</a></li>
  23.                     <li><a href="#">JavaScript & AJAX</a></li>
  24.                    <li><a href="#">PHP</a></li>                      
  25.                </ul>                                
  26.            </div>
  27.        </li>
  28.        <li class="liSub">
  29.             <a href="#">
  30.                 <span class="dd_wrapper">
  31.                     Resources
  32.                     <span class="dd_action"><img src="arrow.png" /></span>
  33.                 </span>
  34.             </a>
  35.            <div style="opacity: 0; display: none; width: 450px;" class="sub">
  36.                 <div class="row">
  37.                     <ul style="width: 225px;">
  38.                         <li><h2><a href="#">Deal of the Week</a></h2></li>
  39.                         <li><a href="#">Navigation Link - 2 Column</a></li>
  40.                         <li><a href="#">Navigation Link - 2 Column</a></li>
  41.                         <li><a href="#">Navigation Link - 2 Column</a></li>
  42.                         <li><a href="#">Navigation Link - 2 Column</a></li>
  43.                     </ul>
  44.                     <ul style="width: 225px;">
  45.                         <li><h2><a href="#">Clearance Items</a></h2></li>
  46.                         <li><a href="#">Navigation Link - 2 Column</a></li>
  47.                         <li><a href="#">Navigation Link - 2 Column</a></li>
  48.                         <li><a href="#">Navigation Link - 2 Column</a></li>
  49.                         <li><a href="#">Navigation Link - 2 Column</a></li>
  50.                     </ul>
  51.                 </div>
  52.                 <div style="margin: 0pt;" class="row">
  53.                     <ul>
  54.                         <li><h2><a href="#">Deal of the Week</a></h2></li>
  55.                         <li><a href="#">Navigation Link</a></li>
  56.                         <li><a href="#">Navigation Link</a></li>
  57.                         <li><a href="#">Navigation Link</a></li>
  58.                         <li><a href="#">Navigation Link</a></li>
  59.                     </ul>
  60.                     <ul>
  61.                         <li><h2><a href="#">Clearance Items</a></h2></li>
  62.                         <li><a href="#">Navigation Link</a></li>
  63.                         <li><a href="#">Navigation Link</a></li>
  64.                         <li><a href="#">Navigation Link</a></li>
  65.                         <li><a href="#">Navigation Link</a></li>
  66.                     </ul>
  67.                     <ul>
  68.                         <li><h2><a href="#">Open Box Items</a></h2></li>
  69.                         <li><a href="#">Navigation Link</a></li>
  70.                         <li><a href="#">Navigation Link</a></li>
  71.                         <li><a href="#">Navigation Link</a></li>
  72.                         <li><a href="#">Navigation Link</a></li>
  73.                     </ul>
  74.                 </div>
  75.             </div>
  76.         </li>
  77.         <li>
  78.             <a href="#">
  79.                 <span class="single_wrapper">Wordpress</span>
  80.             </a>
  81.         </li>
  82.         <li>
  83.             <a href="#">           
  84.                 <span class="single_wrapper">Community news</span>
  85.             </a>
  86.         </li>
  87.         <li>
  88.             <a href="#">           
  89.                 <span class="single_wrapper">About</span>
  90.             </a>
  91.         </li>
  92.         <li>
  93.             <a href="#">           
  94.                 <span class="single_wrapper">Archives</span>
  95.             </a>
  96.         </li>
  97.         <li id="last-li">          
  98.             <a href="#">           
  99.                 <span class="single_wrapper">Contact</span>
  100.             </a>
  101.         </li>
  102.     </ul>
  103.     <span id="menu_end"><img src="last_li.png" width="5" height="46" /></span>
  104. </div>