Menu que quede seleccionado

Jamati · #1 (**permalink**) 17/09/2008, 11:56

Hola foristas:

Quizás es sencillo lo que voy a pedir. En el menú que muestro más abajo a modo de ejemplo, al pasar el mouse por la "Fila 2" se muestra un submenu, y si el mouse lo muevo hacia el submenu, me desaparece el color gris de background de la Fila 2.

Como puedo hacer para que quede marcada la línea "Fila 2" mientras yo tenga el mouse en su submenú ??

Pregunto porque lo veo en muchas páginas y no sé como hacen. Yo he visto menús desarrollados por Mikmoro, pero prefiero hacerlo sin usar las condiciones para el IE, prefiero hacerlo todo con <UL> y <LI>.

Saludos y desde ya muchas gracias.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {margin:0;font:11px Tahoma,Arial,Helvetica,sans-serif;}
ul {width:125px;margin:0;padding:0;background:#FF0000;} 
ul li {border-bottom:1px solid #FFFFFF;position:relative;list-style:none;}
ul li a {color:#363636;display:block;position:relative;line-height:18px;}
ul li a:hover {color:#990000;background:#DAD3D3;}
ul li ul {width:125px;background:#ECE9E9;display:none;position:absolute;left:125px;top:0;}
</style>
<script language="JavaScript">
function submenu(llamador)
{
  var valor = llamador.parentNode.getElementsByTagName('ul')[0];
  valor.style.display = valor.style.display == 'block' ? 'none' : 'block' ;
}
</script>
</head>
<body>
<ul>
  <li><a href="#">Fila 1</a></li>
  <li onMouseOver="submenu(this)" onMouseOut="submenu(this)"><a href="#">Fila 2</a>
    <ul>
      <li><a href="#">Sub fila 1</a></li>
      <li><a href="#">Sub fila 2</a></li>
      <li><a href="#">Sub fila 3</a></li>
      <li><a href="#">Sub fila 4</a></li>
      <li><a href="#">Sub fila 5</a></li>
    </ul>
  </li>
  <li><a href="#">Fila 3</a></li>
  <li><a href="#">Fila 4</a></li>
</ul>
</body>
</html>

David · #2 (**permalink**) 17/09/2008, 14:43

Yo te recomendaría que lo hagas directamente con CSS, pero ya que estás usando Javascript, ¿por qué no le cambias el color también con Javascript al menú?. Porque en este momento lo estás haciendo con CSS y por eso pierde el color al ir al Sub-Menu.

Mikmoro · #3 (**permalink**) 17/09/2008, 15:06

Es fácil: a los li de primer nivel ponles una clase cualquiera

Cita:

Y ahora añade a tu css:

ul li:hover a.primernivel {background-color:#DAD3D3;}

Ya hemos hablado de esto alguna vez, y ya sabes que yo no vendo nada, pero... deberás pensar qué hacer si el usuario tiene desctivado javascript.

Jamati · #4 (**permalink**) 17/09/2008, 15:12

Gracias a los dos, en serio.

Paso a contestar:

David el Grande:
No conozco muy bien la función de javascritp que me permite cambiar el color a la fila, la sabes??

Mikmoro:
Esa respuesta es válida pero solamente para FF, ya que IE6 no acepta el li:hover... y estoy tratando de que funcione en todos los navegadores, sea la versión que sea.

Con respecto a si el usuario tiene desactivado el Javascript, puede pasar, y he leído muchísimos articulos relacionados a que si es o no conveniente usar Javascript... pero en fin y al cabo, el 80% de todas las páginas usan funciones Javascript, para guardar sesiones, para abrir popup, para desplegar menus, etc... muy opca gente tiene desactivado el Javascript supongo.

Si grandes portales usan muchísimo Javascript, sin importar la gente que lo tiene desativado, no creo que yo me pueda hacer problemas por esto.

me entiendo lo que quiero decir?... quizás esté equivocado, es solo mi opinión.

Muchas gracias nuevamente.

Mikmoro · #5 (**permalink**) 17/09/2008, 15:16

Sí, claro que te entiendo, pero quizá hay algo que has pasado por alto: es posible que usen mucho javascript, y también es posible que tengan preparada una alternativa si éste está desactivado. ¿Lo habías pensado?

Supongo que viste nuestro tiro en la cruzada de diseño y código. Fíjate lo que ocurre si desactivas javascript:

http://www.araudi.net/cruzada/index.html

Mikmoro · #6 (**permalink**) 17/09/2008, 15:18

Cita:

Iniciado por Jamati

Mikmoro:
Esa respuesta es válida pero solamente para FF, ya que IE6 no acepta el li:hover... y estoy tratando de que funcione en todos los navegadores, sea la versión que sea.

Y esa es sólo una de las pegas que te encontrarás, creo.

David · #7 (**permalink**) 17/09/2008, 15:34

En realidad sería modificar el estilo CSS con Javascript:

Código javascript:

Ver originalelemento.style.color = "Color";
elemento.style.background = "Color";

Aunque, mejor hazle caso a Mikmoro, personalmente, me molestan muchísimo las páginas que no disponen de una alternativa si tienes desactivado Javascript, es un mal uso.

Mikmoro · #8 (**permalink**) 17/09/2008, 17:30

Jamati · #9 (**permalink**) 18/09/2008, 13:33

Gracias Mikmoro, voy a probar esa última opción que me dijiste.

Con respecto a lo que me dijiste de los Javascript, que quizás haya usuarios que lo tengan desactivado, y los grandes portales seguramente tienen una opción alternativa... nunca has usado un Javascript por ejemplo para que al hacer click sobre una foto, esta misma se abra en un popup ubicado arriba a la izquierda en la pantalla ??

es solo una pregunta y espero no lo tomes a mal, ya que me interesaría dejar de usar Javascript, pero no encuentro una solución alternativa; ya que también por ejemplo, en mi website uso un Javascript para enviarle consultas a los clientes, lo cual esa consulta se abre en un popup programado en un JS.

Saludos y muchas gracias.

Jamati · #10 (**permalink**) 19/09/2008, 22:07

Mike no te vayas sin respondermee !!
jajaja

Mikmoro · #11 (**permalink**) 20/09/2008, 02:09

Cita:

Iniciado por Jamati

nunca has usado un Javascript por ejemplo para que al hacer click sobre una foto, esta misma se abra en un popup ubicado arriba a la izquierda en la pantalla ?? es solo una pregunta y espero no lo tomes a mal

Sí, claro que lo he usado, pero no acabo de ver la relación de esto con lo que estábamos hablando, y mucho menos imagino qué es llo que me podría tomar a mal.
No digo que me parezca mal usar javascript ni mucho menos, pero hay dos cuestiones básicas para mi:
1.- si hay una alternativa más accesible y sencilla, no veo bien usarlo sóo por comodidad a la hora de escribir el código.
2.- si no hay alternativa y debes hacerlo con Javascript, y te preocupa la accesibilidad, debes intentar encontrar otra forma de que funcione (aunque no sea exactamente igual), cuando JS esté desactivado. Esa es mi opinión. Y el menú que planteas, como miles de sitios, tiene pocas posibilidades de funcionar si JS está desactivado, y no parece fácil plantear alternativa transparente para el visitante.

No te preocupes por usar javascript, pero el día que te plantees de verdad la accesibilidad deberás buscar cómo hacerlo. Fíjate cómo está hecho el ejemplo que te puse. En el caso del pop-up que comentas, tienes dos posibilidades: hacer una caja que esté oculta y se vea al pulsar con CSS, lo cual tiene una buena complcación, o bien crear otra página específica con la caja visible, a la que se acceda al pulsar el enlace en caso de que JS esté desactivado.

Pero bueno, como te digo, ya te meterás con eso cuando puedas. De momento, el código que te puse para los enlaces te funciona como querías, ¿no?