Imprimir Página - Menú desplegable HTML + CSS + JQuery (ayuda)

Título: Menú desplegable HTML + CSS + JQuery (ayuda)
Publicado por: SanMagic en 20 Enero 2012, 07:32 am

Buen día.

Buscando en Google sobre este tema me encontré un tutorial muy bueno d como hacer esto, donde básicamente el código es el siguiente:

HTML

Código:

        <div class="menu">
            <ul>
                <li><a href="#">Menú 1</a>
                    <ul>
                        <li><a href="#">Menú 1.1</a>
                            <ul>
                                <li><a href="#">Menú 1.1.1</a></li>
                                <li><a href="#">Menú 1.1.2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Menú 1.2</a>
                            <ul>
                                <li><a href="#">Menú 1.2.1</a></li>
                                <li><a href="#">Menú 1.2.2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Menú 2</a>
                    <ul>
                        <li><a href="#">Menú 2.1</a>
                            <ul>
                                <li><a href="#">Menú 2.1.1</a></li>
                                <li><a href="#">Menú 2.1.2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Menú 2.2</a>
                            <ul>
                                <li><a href="#">Menú 2.2.1</a></li>
                                <li><a href="#">Menú 2.2.2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Menú 3</a></li>
                <li><a href="#">Menú 4</a></li>
            </ul>
        </div>

CSS

Código:

        <style>
            .menu ul {
                list-style: none;
                padding: 0;
            }
            
            .menu a {
                display: block;
                width: 150px;
                height: 20px;
                background: red;
                color: white;
                text-decoration: none;
                text-align: center;
            }
            
            .menu a:hover {
                background: green;
            }
            
            .menu li li a {
                background: blue;
            }      
        </style>

JQuery

Código:

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('.menu ul ul').css({
                    display:"none"
                });
       
                $('.menu li').hover(function(){
                    $(this).find('> ul').stop(true, true).slideDown('slow');
                }, function(){
                    $(this).find('> ul').stop(true, true).slideUp('slow');
                });
            });
        </script>

Todo eso me deja el menú de la siguiente manera (suponiendo q está desplegado por completo):

Menú 1
Menú 1.1
Menú 1.1.1
Menú 1.1.2
Menú 1.2
Menú 1.2.1
Menú 1.2.2
Menú 2
Menú 2.1
Menú 2.1.1
Menú 2.1.2
Menú 2.2
Menú 2.2.1
Menú 2.2.2
Menú 3
Menú 4

Pero lo que yo deseo es que quede de la siguiente manera (suponiendo q está desplegado por completo):

Menú 1      | Menú 2    | Menú 3 | Menú 4
Menú 1.1    Menú 2.1
Menú 1.1.1 Menú 2.1.1
Menú 1.1.2 Menú 2.1.2
Menú 1.2    Menú 2.2
Menú 1.2.1 Menú 2.2.1
Menú 1.2.2 Menú 2.2.2

En otras palabras... solo q el primer nivel del menú se encuentre horizontal y los demás q sean verticales.

Desde ahora agradezco su ayuda.

Editando: Lo lamento, envíe sin querer el post incompleto

Título: Re: Menú desplegable HTML + CSS + JQuery (ayuada)
Publicado por: Shell Root en 20 Enero 2012, 07:37 am

Y la pregunta es...

PD: Falta el código CSS y JQuery,

Título: Re: Menú desplegable HTML + CSS + JQuery (ayuada)
Publicado por: SanMagic en 20 Enero 2012, 08:20 am

Cita de: Shell Root en 20 Enero 2012, 07:37 am

Y la pregunta es...

PD: Falta el código CSS y JQuery,

Perdón x error envié el post incompleto, ya esta =)

Título: Re: Menú desplegable HTML + CSS + JQuery (ayuda)
Publicado por: #!drvy en 20 Enero 2012, 21:31 pm

Hola,

Al css, añade estas lineas al final de tu CSS.

Código

            /* Esto hara que se se alineen en una linea */ 
            .main {float:left;}
            /* Para evitar que se superponga, limpiamos los float. */
            .clear {clear:both;}

Y en tu html, cambia el li de los títulos de los menús así:

Código

<li class="main"><a href="#">Menu 1</a>

Osease, les añades como class,"main".

Ejemplo de como quedaría:
(http://i.elhacker.net/i?i=sgMkBx0FN_hwkfcz-fgzc2Vo) (http://i.elhacker.net/d?i=sgMkBx0FN_hwkfcz-fgzc2Vo)

Al final de todo el menú (cuando termina el div "menu") pon otro div con clase "clear". Así te evitas problemas con los float..

Saludos

Título: Re: Menú desplegable HTML + CSS + JQuery (ayuda)
Publicado por: SanMagic en 21 Enero 2012, 21:17 pm

Cita de: drvy | BSM en 20 Enero 2012, 21:31 pm

Hola,

Al css, añade estas lineas al final de tu CSS.

Código

/* Esto hara que se se alineen en una linea */ 
.main {float:left;}
/* Para evitar que se superponga, limpiamos los float. */
.clear {clear:both;}

Y en tu html, cambia el li de los títulos de los menús así:

Código

<li class="main"><a href="#">Menu 1</a>

Wow!! Muchisimas gracias =D había intentado otras cosas y nada me había funcionado, muchisimas gracias!!! =D

Solo una dudita más... eso de poner el div con la clase "clear" es dejarlo sin dada dentro del div?? osea así???

Código

<div class="clear"> </div>

Título: Re: Menú desplegable HTML + CSS + JQuery (ayuda)
Publicado por: #!drvy en 21 Enero 2012, 21:27 pm

Hola, si, es mas que nada para evitar que te rompa el diseño si usas float en otra parte.

Saludos

Título: Re: Menú desplegable HTML + CSS + JQuery (ayuda)
Publicado por: SanMagic en 21 Enero 2012, 21:57 pm

Una pregunta más... eso tendria q ponerlo para todas las páginas q tenga hasta el final o puede ir en cualquier parte del script??

Título: Re: Menú desplegable HTML + CSS + JQuery (ayuda)
Publicado por: #!drvy en 21 Enero 2012, 22:45 pm

Hola,

Tendrías que ponerlo al final del menú. Y en todas las paginas en las que este dicho menú.

Saludos

Título: Re: Menú desplegable HTML + CSS + JQuery (ayuda)
Publicado por: SanMagic en 21 Enero 2012, 23:11 pm

Muchas gracias ;D se ha resuelto el problema, pueden cerrar el tema si gustan ;)

Título: Re: Menú desplegable HTML + CSS + JQuery (ayuda)
Publicado por: SanMagic en 24 Enero 2012, 21:23 pm

Bueno, aprovechando q no han cerrado el tema (y para evitarme tener q abrir otro) pregunto lo siguiente (referente a lo mismo)

Al hacer click en los menús q tienen fotos me aparece el siguiente error:

(http://i1148.photobucket.com/albums/o565/SanMagic/prob-1.png)

como ven se despliegan todos los sub-menús (los cuales deberían estar ocultos) pero esto es solo mientras se carga la página, al terminar la carga todo vuelve a la normalidad, como puedo evitar q pase lo de la imagen??

Título: Re: Menú desplegable HTML + CSS + JQuery (ayuda)
Publicado por: #!drvy en 24 Enero 2012, 21:29 pm

Hola, eso es porque le indicas a jQuery que las oculte cuando la pagina ha sido cargada

Código

$(document).ready(function() {

Lo mas sencillo seria añadir una linea en el css que indique que deberia estar oculto (display:none). Pero con eso te metes en un problema, con usuarios que no tienen javascript activado (no veran nada, ni podran hacer el despliegue).

Prueba poniendo

Código

$('.menu ul ul').css({display:"none"});

antes de document.ready.

PD: Quedaria así:

Código

            $('.menu ul ul').css({display:"none"});
            $(document).ready(function() {
 
                $('.menu li').hover(function(){
                    $(this).find('> ul').stop(true, true).slideDown('slow');
                }, function(){
                    $(this).find('> ul').stop(true, true).slideUp('slow');
                });
            });
        </script>

Saludos

Título: Re: Menú desplegable HTML + CSS + JQuery (ayuda)
Publicado por: SanMagic en 25 Enero 2012, 00:58 am

Ok, creo q eso no funcionó muy bien, el menú sale bien encima de las imagenes pero ya no se oculta y además se despliega todo así:

(http://i1148.photobucket.com/albums/o565/SanMagic/prob2.png)

y aunq la página termine de cargar el menú igual se queda así, teniedno el

Código

$('.menu ul ul').css({display:"none"});

dentro del

Código

$(document).ready(function() {

solo aparece el problema mientras se carga la página, una vez cargada queda bien

Alguna otra sugerencia??
Gracias de antemano drvy | BSM por toda la ayuda q me has brindado =D

Título: Re: Menú desplegable HTML + CSS + JQuery (ayuda)
Publicado por: #!drvy en 25 Enero 2012, 03:05 am

Hola,

Fallo técnico :xD
Teóricamente, no puedes cambiar el css de un elemento que todavía no existe, Por tanto, ya se tendría que haber cargado antes de cambiarle el css.

3 Soluciones.

1. (Recomendado) Añadir un nuevo style mediante javascript. Así evitamos el problema de que los visitantes que no tengan javascript no puedan ver el menú.

2.Poner al final de menú un script que oculte los submenus.

3. Manejarlo desde el css. El problema aquí es que cuando un visitante sin javascript visite tu pagina, no podrá desplegar el menú. De por si el visitante no tiene javascript, el menú aparecerá desplegado entero.

1. > Para añadir, un nuevo estilo en jquery haces lo siguiente.

Código

$("<style type='text/css'></style>").appendTo("head");

Entonces tu código javascript quedaría de la siguiente forma.

Código

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
$("<style type='text/css'>.menu ul ul{display:none;}</style>").appendTo("head");
$(document).ready(function() {
	$('.menu li').hover(function(){
		$(this).find('> ul').stop(true, true).slideDown('slow');
	}, function(){
		$(this).find('> ul').stop(true, true).slideUp('slow');
	});		
});
</script>

2. > Con añadir una linea de js al final del menú (donde termina el div menú) bastara. Aunque puede que tarde algo en reaccionar y se siga viendo todo despegado. Pero seria un mínimo de tiempo (mili segundos como mucho 1 segundo).

Código

<body>
<div class="menu">
   <!-- Menu entero -->
</div>
<script>$('.menu ul ul').css('display','none');</script>
<div class="clear"></div>

3. > Añadir la siguiente linea en el css.

Código

.menu ul ul {display:none;}

Tu css quedaría así:

Código

<style>
.menu ul {list-style: none; padding: 0;}
.menu a {display: block;width: 150px;height: 20px; background: red; color: white;text-decoration: none;text-align: center;}
.menu a:hover {background: green;}
.menu li li a {background: blue;}   
.main {float:left;}
.clear {clear:both;}
.menu ul ul {display:none;}
</style>

Salio largo el post :xD

Saludos

Título: Re: Menú desplegable HTML + CSS + JQuery (ayuda)
Publicado por: SanMagic en 26 Enero 2012, 05:35 am

Eres grande drvy | BSM!!! muchísimas gracias =) este... si tengo duda en algo más vendré de nuevo =P (espero no te moleste)

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: SanMagic en 20 Enero 2012, 07:32 am