Foros del Web » Creando para Internet » CSS »

Menu que quede seleccionado

Estas en el tema de Menu que quede seleccionado en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/09/2008, 11:56
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años
Puntos: 3
Menu que quede seleccionado

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> 
  #2 (permalink)  
Antiguo 17/09/2008, 14:43
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 18 años, 10 meses
Puntos: 839
Exclamación Respuesta: Menu que quede seleccionado

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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 17/09/2008, 15:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Menu que quede seleccionado

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

Cita:
<li onMouseOver="submenu(this)" onMouseOut="submenu(this)"><a class="primernivel" href="#">Fila 2</a>
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.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 17/09/2008, 15:12
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años
Puntos: 3
Respuesta: Menu que quede seleccionado

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.
  #5 (permalink)  
Antiguo 17/09/2008, 15:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Menu que quede seleccionado

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
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 17/09/2008, 15:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Menu que quede seleccionado

Cita:
Iniciado por Jamati Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 17/09/2008, 15:34
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 18 años, 10 meses
Puntos: 839
De acuerdo Respuesta: Menu que quede seleccionado

En realidad sería modificar el estilo CSS con Javascript:
Código javascript:
Ver original
  1. elemento.style.color = "Color";
  2. 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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #8 (permalink)  
Antiguo 17/09/2008, 17:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Menu que quede seleccionado

<li onMouseOver="submenu(this);this.style.background=' #DAD3D3';" onMouseOut="submenu(this);this.style.background='# F00';"><a href="#">Fila 2</a>
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 18/09/2008, 13:33
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años
Puntos: 3
Respuesta: Menu que quede seleccionado

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.
  #10 (permalink)  
Antiguo 19/09/2008, 22:07
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años
Puntos: 3
Respuesta: Menu que quede seleccionado

Mike no te vayas sin respondermee !!
jajaja
  #11 (permalink)  
Antiguo 20/09/2008, 02:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Menu que quede seleccionado

Cita:
Iniciado por Jamati Ver Mensaje
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?
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:30.