Menú desplegable HTML + CSS + JQuery (ayuda)

#!drvy · 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 (javascript) [Seleccionar]

$(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 (javascript) [Seleccionar]

$('.menu ul ul').css({display:"none"}); antes de document.ready.

PD: Quedaria así:

Código (javascript) [Seleccionar]


            $('.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

SanMagic · 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í:

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

Código (javascript) [Seleccionar]

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

Código (javascript) [Seleccionar]

$(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

#!drvy · 25 Enero 2012, 03:05 AM

Hola,

Fallo técnico

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 (javascript) [Seleccionar]

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

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

Código (javascript,3) [Seleccionar]

<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 (html4strict) [Seleccionar]

<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 (css) [Seleccionar]

.menu ul ul {display:none;}

Tu css quedaría así:

Código (css) [Seleccionar]

<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

Saludos

SanMagic · 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)

Test Foro de elhacker.net SMF 2.1

Menú desplegable HTML + CSS + JQuery (ayuda)

#!drvy

SanMagic

#!drvy

SanMagic