Tema: Ayuda para hacer un menu estilo carlj jr
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 07/01/2011, 08:01
4ng3r
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Ayuda para hacer un menu estilo carlj jr
ahhh ya veo ..pero ya tocaría programarlo la verdad no creo que hallan plugins para un menú de ese tipo. Pero se me ocurre algo rapido usando JQuery

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5.     <script src="jquery.js"></script>
  6.     <script>
  7.       $(function(){
  8.         $("#op1").click(function(){
  9.           $("#menu ul").hide();
  10.           $("#menu ul").empty();
  11.           $("#menu ul").append("<li>Opcion 1.1</li>");
  12.           $("#menu ul").append("<li>Opcion 1.2</li>");
  13.           $("#menu ul").append("<li>Opcion 1.3</li>");
  14.           $("#menu ul").append("<li>Opcion 1.4</li>");
  15.           $("#menu ul").show('slow');  
  16.         })
  17.         
  18.         $("#op2").click(function(){
  19.           $("#menu ul").hide();
  20.           $("#menu ul").empty();
  21.           $("#menu ul").append("<li>Opcion 2.1</li>");
  22.           $("#menu ul").append("<li>Opcion 2.2</li>");
  23.           $("#menu ul").append("<li>Opcion 2.3</li>");
  24.           $("#menu ul").append("<li>Opcion 2.4</li>");
  25.           $("#menu ul").show('slow');  
  26.         })
  27.         
  28.         $("#op3").click(function(){
  29.           $("#menu ul").hide();
  30.           $("#menu ul").empty();
  31.           $("#menu ul").append("<li>Opcion 3.1</li>");
  32.           $("#menu ul").append("<li>Opcion 3.2</li>");
  33.           $("#menu ul").append("<li>Opcion 3.3</li>");
  34.           $("#menu ul").append("<li>Opcion 3.4</li>");
  35.           $("#menu ul").show('slow');  
  36.         })
  37.       })
  38.     </script>
  39.     <style>
  40.     <!--
  41.      .menu{
  42.       position: relative;
  43.      }
  44.     //-->
  45.     </style>
  46.     
  47.   </head>
  48.  
  49.   <body>
  50.     <table width="500">
  51.       <tr>
  52.         <td><a href="javascript:void(0)" id="op1">Opcion 1</a></td>
  53.         <td><a href="javascript:void(0)" id="op2">Opcion 2</a></td>
  54.         <td><a href="javascript:void(0)" id="op3">Opcion 3</a></td>
  55.       </tr>
  56.     </table>
  57.   
  58.     <div class="menu" id="menu">
  59.       <ul></ul>
  60.     </div>
  61.   </body>
  62.  
  63. </html>

Espero que sea de ayuda !!