Comunidad de diseño web y desarrollo en internet online

Consulta Menú Desplegable CSS

Citar            
MensajeEscrito el 05 Abr 2010 07:53 pm
Hola, tengo una página muy vieja que tiene un menu desplegable que funciona unicamente en IE.
Lo rearmé y ahora me funciona para todos los exploradores SALVO para IE...

Ya no tengo idea de qué mas tocarle, les dejo los links a ver qué se les ocurre...

MENU: http://www.productoslipo.com/esp/menu_esp.asp
CSS: http://www.productoslipo.com/esp/menu.css

Gracias!

Por federicoleandro

2 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 Abr 2010 02:58 am
Hola Federico,

Vi que estas usando li:hover para mostrar el submenu, eso esta bien pero no funciona en IE6, en IE7, IE8 e IE9 deberia funcionar.

Para IE6, la unica opción es usar Javascript e imagino que por eso intentaste usar jQuery, lo cual está bien y el código que pusiste está bien, debería funcionar, excepto claro que el archivo se llama jquery.js y no jquerry.js, dime si con eso se arregla.

Saludos.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

chrome
Citar            
MensajeEscrito el 07 Abr 2010 12:56 pm

NEO_JP escribió:

Para IE6, la unica opción es usar Javascript...

sólo por el placer de llevar la contraria a un BOFH :lol: (en esa parte, no en el resto):
Menú tres niveles sólo con css válido para ie6 también.

Saludos

Por DvillB

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 08 Abr 2010 09:14 pm
Despues de ver ese codigo, vuelvo a decir que la unica manera eficiente de lograrlo, es usando Javascript.

PD: Que horrendo, miles de condicionales de IE y tablas... TABLAS!!!

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

chrome
Citar            
MensajeEscrito el 15 Abr 2010 10:16 pm

NEO_JP escribió:

Despues de ver ese codigo, vuelvo a decir que la unica manera eficiente de lograrlo, es usando Javascript.

PD: Que horrendo, miles de condicionales de IE y tablas... TABLAS!!!

Eficiencia: Capacidad de disponer de alguien o de algo para conseguir un efecto determinado (del D.R.A.E.)
Creo que esos menús son al menos tan eficientes (si no más) que cualquier otro basado en js o cualquier otro método, con la ventaja de que su funcionamiento no depende de si está o no habilitado el js, si el mismo es 100% compatible con ie6, minimizando las peticiones al servidor y el peso (por más ligeros que sean los scrpts).

No sé qué será más horrendo si:

Código :

li class="nivel1"><a href="#" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
   <ul class="nivel2">
      <li><a href="#">Opción 1.1</a></li>
      <li><a href="#">Opción 1.2</a></li>
   </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

o
<script src="jquerry.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// Muestra y oculta los menús
$('ul li:has(ul)').hover(
function(e)
{
$(this).find('ul').show();
},
function(e)
{
$(this).find('ul').hide();
}
);
});
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<body onLoad="MM_preloadImages('images/btn_h1.gif','images/btn_2catalogo.gif','images/btn_3com_ext.gif','images/btn_4novedades.gif','images/btn_5at_consum.gif')">
...
...
<ul class="dropdown" id="menu">

<li id="empresa"><a href="#"><img src="images/btn_1empresa_.gif" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','images/btn_1empresa.gif',1)" onMouseOut="MM_swapImgRestore()"></a>
<ul id="sub_empresa">
<li id="quienesomos"><a href="quienes_somos.asp"><img src="images/sub1_quienes.gif" border="0" id="subquienes" onMouseOver="MM_swapImage('subquienes','','images/sub1_quienes_.gif',1)" onMouseOut="MM_swapImgRestore()"></a></li>
<li id="mision"><a href="mision.asp"><img src="images/sub1_mision.gif" border="0" id="submision" onMouseOver="MM_swapImage('submision','','images/sub1_mision_.gif',1)" onMouseOut="MM_swapImgRestore()"></a></li>
</ul>
</li>


Pósiblemente sólo sea una cuestión de opiniones y gustos

Saludos

Por DvillB

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Abr 2010 05:01 am
Desde mi punto de vista, es mas facil eficiente usar Javascript porque ayuda a "mejorar" la usabilidad de la web y la facilidad de leer, actualizar y extender el siguiente código es mayor a el código que tú muestras.

Repetir condicionales por cada <li> que existe en la navegación es inhumano, además, si tienes 100 estas creando 100 elementos extras, cuando quieras editar algo, tendrias que hacerlo en esos 100 elementos. Y por último, está "mal" insertar elementos del tipo "bloque" dentro de elementos "en linea", es decir, poner un <li> dentro de un <a>.

Por ultimo, estas cambiando la estructura del HTML dependiendo del navegador, lo cual, no necesariamente es malo, pero alguien que no este familiarizado con esto, tendra mucho trabajo que hacer cuando quiera editar el css. Ya que #nav a, no sera lo mismo a #nav a li a.

El siguiente código es el mas eficiente que he podido ver para crear una navegación con JS.

Código :

$('#nav li').live('mouseover mouseout', function(e) {
   if (e.type == 'mouseover') {
      $(this).addClass('hover');
   } else {
      $(this).removeClass('hover');
   }
});


PD: Y no, todo el código que copiaste de la otra web no es eficiente, y es tan intrusivo como el codigo que muestras.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.