Ayuda para hacer un menu estilo carlj jr

juanmata · #1 (**permalink**) 05/01/2011, 14:56

Hola buenas tarde, les escribo porque necesito de su ayuda o si me podrian donde encotrar un script o ideas de como hacer un menu de comida estilo Carls Jr

www.carlsjr.com ahi puede ver el menu gracias

#2 (**permalink**) 06/01/2011, 10:24

algo asi ?? http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html

juanmata · #3 (**permalink**) 07/01/2011, 02:11

Cita:

Iniciado por 4ng3r

algo asi ?? http://www.dreamcss.com/2009/04/crea...y-sliders.html

No mira lo quiero hacer mas o menos es con el menu del restaurant carl jr

osea

que arriba traiga el menu horizonal y cuando le click por ejemplo en pollos por ejemplo ahi mismo me salga un menu vertical con todos los tipo de pollos y cuando le de click a un tipo de pollo me despliege la foto del pollo con su precio

asi como este menu del carl jr

velo ami aver si se puede hacer algo

http://www.carlsjr.com/menu

gracias

#4 (**permalink**) 07/01/2011, 08:01

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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script src="jquery.js"></script>
    <script>
      $(function(){
        $("#op1").click(function(){
          $("#menu ul").hide();
          $("#menu ul").empty();
          $("#menu ul").append("<li>Opcion 1.1</li>");
          $("#menu ul").append("<li>Opcion 1.2</li>");
          $("#menu ul").append("<li>Opcion 1.3</li>");
          $("#menu ul").append("<li>Opcion 1.4</li>");
          $("#menu ul").show('slow');  
        })
        
        $("#op2").click(function(){
          $("#menu ul").hide();
          $("#menu ul").empty();
          $("#menu ul").append("<li>Opcion 2.1</li>");
          $("#menu ul").append("<li>Opcion 2.2</li>");
          $("#menu ul").append("<li>Opcion 2.3</li>");
          $("#menu ul").append("<li>Opcion 2.4</li>");
          $("#menu ul").show('slow');  
        })
        
        $("#op3").click(function(){
          $("#menu ul").hide();
          $("#menu ul").empty();
          $("#menu ul").append("<li>Opcion 3.1</li>");
          $("#menu ul").append("<li>Opcion 3.2</li>");
          $("#menu ul").append("<li>Opcion 3.3</li>");
          $("#menu ul").append("<li>Opcion 3.4</li>");
          $("#menu ul").show('slow');  
        })
      })
    </script>
    <style>
    <!--
     .menu{
      position: relative;
     }
    //-->
    </style>
    
  </head>
 
  <body>
    <table width="500">
      <tr>
        <td><a href="javascript:void(0)" id="op1">Opcion 1</a></td>
        <td><a href="javascript:void(0)" id="op2">Opcion 2</a></td>
        <td><a href="javascript:void(0)" id="op3">Opcion 3</a></td>
      </tr>
    </table>
  
    <div class="menu" id="menu">
      <ul></ul>
    </div>
  </body>
 
</html>

Espero que sea de ayuda !!

juanmata · #5 (**permalink**) 07/01/2011, 14:32

[QUOTE=4ng3r;3697049]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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script src="jquery.js"></script>
    <script>
      $(function(){
        $("#op1").click(function(){
          $("#menu ul").hide();
          $("#menu ul").empty();
          $("#menu ul").append("<li>Opcion 1.1</li>");
          $("#menu ul").append("<li>Opcion 1.2</li>");
          $("#menu ul").append("<li>Opcion 1.3</li>");
          $("#menu ul").append("<li>Opcion 1.4</li>");
          $("#menu ul").show('slow');  
        })
        
        $("#op2").click(function(){
          $("#menu ul").hide();
          $("#menu ul").empty();
          $("#menu ul").append("<li>Opcion 2.1</li>");
          $("#menu ul").append("<li>Opcion 2.2</li>");
          $("#menu ul").append("<li>Opcion 2.3</li>");
          $("#menu ul").append("<li>Opcion 2.4</li>");
          $("#menu ul").show('slow');  
        })
        
        $("#op3").click(function(){
          $("#menu ul").hide();
          $("#menu ul").empty();
          $("#menu ul").append("<li>Opcion 3.1</li>");
          $("#menu ul").append("<li>Opcion 3.2</li>");
          $("#menu ul").append("<li>Opcion 3.3</li>");
          $("#menu ul").append("<li>Opcion 3.4</li>");
          $("#menu ul").show('slow');  
        })
      })
    </script>
    <style>
    <!--
     .menu{
      position: relative;
     }
    //-->
    </style>
    
  </head>
 
  <body>
    <table width="500">
      <tr>
        <td><a href="javascript:void(0)" id="op1">Opcion 1</a></td>
        <td><a href="javascript:void(0)" id="op2">Opcion 2</a></td>
        <td><a href="javascript:void(0)" id="op3">Opcion 3</a></td>
      </tr>
    </table>
  
    <div class="menu" id="menu">
      <ul></ul>
    </div>
  </body>
 
</html>

Espero que sea de ayuda !![/QUOTE

Gracias amigo pero para que desplege el menu a un lado como le podria hacer con iframes o que se te ocurre, si es on iframes como lo pondrias, o tambien se pude poner con jquery o mas como le pondrias el contenido aun lado

#6 (**permalink**) 07/01/2011, 16:11

en la funcion append puede colocar cualquier contenido HTML .... entonces hay se coloca el codigo del IFrame

juanmata · #7 (**permalink**) 07/01/2011, 16:16

Cita:

Iniciado por 4ng3r

en la funcion append puede colocar cualquier contenido HTML .... entonces hay se coloca el codigo del IFrame

amigo si me podrias explicar por ejemplo en el happend que pusistes ahi coloco el iframe pero tienes varios append si me podrias dar un ejemplo

gracias

juanmata · #8 (**permalink**) 07/01/2011, 17:05

Cita:

Iniciado por juanmata

amigo si me podrias explicar por ejemplo en el happend que pusistes ahi coloco el iframe pero tienes varios append si me podrias dar un ejemplo

gracias

Amigo ayudame en esto ultimo como pondria con el append el iframe es que me urge
gracias

juanmata · #9 (**permalink**) 26/04/2011, 14:54

Gracias de todos modos al Final lo pude de otra forma y me quedo igual que al de carl Junior