menu y submenu al mismo nivel

rascabuchitos · #1 (**permalink**) 06/09/2013, 15:24

hola amigos

tengo esto

Código Javascript:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 
<style>
.ui-menu {
width: 200px;
}
</style>
 
<script>
$(function () {
$("#menu").menu();
});
</script>
 
</head>
<body>
 
<div style="position: absolute; top: 20px; left: 40px; z-index: 100">
<ul id="menu">
<li><a href="#">1</a>
<ul>
<li><a href="#11">11</a></li>
<li><a href="#12">111</a></li>
<li><a href="#13">1111</a></li>
</ul>
</li>
<li><a href="#">2</a>
<ul>
<li><a href="#21">22</a></li>
<li><a href="#">222</a>
<ul>
<li><a href="#241">2222</a></li>
<li><a href="#242">2222</a></li>
</ul>
</li>
<li><a href="#25">22222</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</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

rascabuchitos · #2 (**permalink**) 10/09/2013, 14:17

alguien que me pueda ayudar?

gracias

vick90 · #3 (**permalink**) 10/09/2013, 14:37

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

rascabuchitos · #4 (**permalink**) 10/09/2013, 15:04

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 :)

vick90 · #5 (**permalink**) 10/09/2013, 15:24

Checa este link hay muchos ejemplos
http://www.creativosonline.org/blog/...on-jquery.html
Saludos

rascabuchitos · #6 (**permalink**) 11/09/2013, 08:50

es igual a lo que tengo...
lo que necesito es html para poder configurar la altura de los submenus.... como muestro en la imagen...

bathorz · #7 (**permalink**) 18/09/2013, 09:37

Juega las posiciones y los anchos. Al CSS se puede mejorar la herencia, investiga.

Código HTML:

Ver original<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Menu_nivel</title>
      <style type="text/css">
         * { margin: 0px;padding: 0px; outline: 0;}
         .menu ul {
            list-style-type: none;
         }
         /* n1 */
         .menu ul li.n1 {width: 50px; border: solid 1px #f00;}
         .menu ul li a { color:black; text-decoration: none;}
         .menu ul li a.n1 {color:red; display: block!important;display: none;position: relative;}
         /* se oculta ul */
         .menu ul li ul {display: none;}
         /* muestra nivel 2 */
         .menu ul li:hover > ul {display: block;position: absolute;left: 52px;top:-1px;}
         /* n2 */
         .menu ul li ul li a.n2 {width: 50px; color:green; border: solid 1px #0f0;display: block!important;display: none;position: relative;}
         /* muestra nivel 3 */
         .menu ul li ul li:hover > ul {display: block;position: absolute;left: 52px;top:-1px;}
         /* n3 */
         .menu ul li ul li ul li a.n3 {width: 50px;color:blue;border: solid 1px #00f;display: block!important;display: none;position: relative;}
      </style>
   </head>
   <body>
      <div  class="menu">
         <ul>
            <li class="n1">
               <a class="n1" href="">1</a>
               <ul>
                  <li>
                     <a class="n2" href="">11a</a>
                     <ul>
                        <li>
                           <a class="n3" href="">111</a>
                        </li>
                     </ul>
                  </li>
                  <li>
                     <a class="n2" href="">11b</a>
                  </li>
                  <li>
                     <a class="n2" href="">111</a>
                  </li>
               </ul>
            </li>
            <li class="n1">
               <a class="n1" href="">2</a>
               <ul>
                  <li>
                     <a class="n2" href="">22a</a>
                  </li>
                  <li>
                     <a class="n2" href="">22b</a>
                     <ul>
                        <li>
                           <a class="n3" href="">222a</a>
                        </li>
                        <li>
                           <a class="n3" href="">222b</a>
                        </li>
                     </ul>
                  </li>
                  <li>
                     <a class="n2" href="">22c</a>
                  </li>
               </ul>
            </li>
         </ul>
      </div>
   </div>
</body>
</html>