Foros del Web » Programando para Internet » Javascript »

menu y submenu al mismo nivel

Estas en el tema de menu y submenu al mismo nivel en el foro de Javascript en Foros del Web. hola amigos tengo esto @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original <! doctype html > < html > < head > < meta charset = ...
  #1 (permalink)  
Antiguo 06/09/2013, 16:24
 
Fecha de Ingreso: abril-2011
Ubicación: Peru
Mensajes: 486
Antigüedad: 8 años, 7 meses
Puntos: 9
menu y submenu al mismo nivel

hola amigos

tengo esto

Código Javascript:
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>jQuery UI</title>
  6. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  7. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  8. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  9.  
  10. <style>
  11. .ui-menu {
  12. width: 200px;
  13. }
  14. </style>
  15.  
  16. <script>
  17. $(function () {
  18. $("#menu").menu();
  19. });
  20. </script>
  21.  
  22. </head>
  23. <body>
  24.  
  25. <div style="position: absolute; top: 20px; left: 40px; z-index: 100">
  26. <ul id="menu">
  27. <li><a href="#">1</a>
  28. <ul>
  29. <li><a href="#11">11</a></li>
  30. <li><a href="#12">111</a></li>
  31. <li><a href="#13">1111</a></li>
  32. </ul>
  33. </li>
  34. <li><a href="#">2</a>
  35. <ul>
  36. <li><a href="#21">22</a></li>
  37. <li><a href="#">222</a>
  38. <ul>
  39. <li><a href="#241">2222</a></li>
  40. <li><a href="#242">2222</a></li>
  41. </ul>
  42. </li>
  43. <li><a href="#25">22222</a></li>
  44. </ul>
  45. </li>
  46. </ul>
  47. </div>
  48. </div>
  49. </body>
  50. </html>


alguien podria decirme como hago para que sea igual a esta imagen:
es decir, que cuando abra el submenu se extienda de arriba hacia abajo en la web, gracias
  #2 (permalink)  
Antiguo 10/09/2013, 15:17
 
Fecha de Ingreso: abril-2011
Ubicación: Peru
Mensajes: 486
Antigüedad: 8 años, 7 meses
Puntos: 9
Respuesta: menu y submenu al mismo nivel

alguien que me pueda ayudar?

gracias
  #3 (permalink)  
Antiguo 10/09/2013, 15:37
Avatar de vick90  
Fecha de Ingreso: abril-2010
Mensajes: 144
Antigüedad: 9 años, 6 meses
Puntos: 14
Respuesta: menu y submenu al mismo nivel

Ese efecto lo puedes lograr con Transition de CSS3 o si no lo puedes hacer con jquery te recomiendo investigues sobre animaciones en jquery
Saludos
  #4 (permalink)  
Antiguo 10/09/2013, 16:04
 
Fecha de Ingreso: abril-2011
Ubicación: Peru
Mensajes: 486
Antigüedad: 8 años, 7 meses
Puntos: 9
Respuesta: menu y submenu al mismo nivel

hola vick90
tengo que hacerlo con algun framework js
pero hasta ahorita no logro conseguir un buen manual que me ayude :(
si tuvieses alguno en linea te lo vo a agradecer :)
  #5 (permalink)  
Antiguo 10/09/2013, 16:24
Avatar de vick90  
Fecha de Ingreso: abril-2010
Mensajes: 144
Antigüedad: 9 años, 6 meses
Puntos: 14
Respuesta: menu y submenu al mismo nivel

Checa este link hay muchos ejemplos
http://www.creativosonline.org/blog/...on-jquery.html
Saludos
  #6 (permalink)  
Antiguo 11/09/2013, 09:50
 
Fecha de Ingreso: abril-2011
Ubicación: Peru
Mensajes: 486
Antigüedad: 8 años, 7 meses
Puntos: 9
Respuesta: menu y submenu al mismo nivel

es igual a lo que tengo...
lo que necesito es html para poder configurar la altura de los submenus.... como muestro en la imagen...
  #7 (permalink)  
Antiguo 18/09/2013, 10:37
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 6 años, 2 meses
Puntos: 29
Respuesta: menu y submenu al mismo nivel

Juega las posiciones y los anchos. Al CSS se puede mejorar la herencia, investiga.
Código HTML:
Ver original
  1. <!doctype html>
  2.    <head>
  3.       <meta charset="utf-8" />
  4.       <title>Menu_nivel</title>
  5.       <style type="text/css">
  6.          * { margin: 0px;padding: 0px; outline: 0;}
  7.          .menu ul {
  8.             list-style-type: none;
  9.          }
  10.          /* n1 */
  11.          .menu ul li.n1 {width: 50px; border: solid 1px #f00;}
  12.          .menu ul li a { color:black; text-decoration: none;}
  13.          .menu ul li a.n1 {color:red; display: block!important;display: none;position: relative;}
  14.          /* se oculta ul */
  15.          .menu ul li ul {display: none;}
  16.          /* muestra nivel 2 */
  17.          .menu ul li:hover > ul {display: block;position: absolute;left: 52px;top:-1px;}
  18.          /* n2 */
  19.          .menu ul li ul li a.n2 {width: 50px; color:green; border: solid 1px #0f0;display: block!important;display: none;position: relative;}
  20.          /* muestra nivel 3 */
  21.          .menu ul li ul li:hover > ul {display: block;position: absolute;left: 52px;top:-1px;}
  22.          /* n3 */
  23.          .menu ul li ul li ul li a.n3 {width: 50px;color:blue;border: solid 1px #00f;display: block!important;display: none;position: relative;}
  24.       </style>
  25.    </head>
  26.    <body>
  27.       <div  class="menu">
  28.          <ul>
  29.             <li class="n1">
  30.                <a class="n1" href="">1</a>
  31.                <ul>
  32.                   <li>
  33.                      <a class="n2" href="">11a</a>
  34.                      <ul>
  35.                         <li>
  36.                            <a class="n3" href="">111</a>
  37.                         </li>
  38.                      </ul>
  39.                   </li>
  40.                   <li>
  41.                      <a class="n2" href="">11b</a>
  42.                   </li>
  43.                   <li>
  44.                      <a class="n2" href="">111</a>
  45.                   </li>
  46.                </ul>
  47.             </li>
  48.             <li class="n1">
  49.                <a class="n1" href="">2</a>
  50.                <ul>
  51.                   <li>
  52.                      <a class="n2" href="">22a</a>
  53.                   </li>
  54.                   <li>
  55.                      <a class="n2" href="">22b</a>
  56.                      <ul>
  57.                         <li>
  58.                            <a class="n3" href="">222a</a>
  59.                         </li>
  60.                         <li>
  61.                            <a class="n3" href="">222b</a>
  62.                         </li>
  63.                      </ul>
  64.                   </li>
  65.                   <li>
  66.                      <a class="n2" href="">22c</a>
  67.                   </li>
  68.                </ul>
  69.             </li>
  70.          </ul>
  71.       </div>
  72.    </div>
  73. </body>
  74. </html>

Etiquetas: html, jquery, js, nivel, submenu
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:52.