Foros del Web » Creando para Internet » CSS »

Mantener opción seleccionada en barra de menú

Estas en el tema de Mantener opción seleccionada en barra de menú en el foro de CSS en Foros del Web. Hola, me gustaría saber cómo establecer el color de fondo de la opción clicada de una barra de menú Spry de Dreamweaver CS5. Si alguien ...
  #1 (permalink)  
Antiguo 07/11/2010, 17:05
 
Fecha de Ingreso: noviembre-2010
Mensajes: 6
Antigüedad: 7 años, 1 mes
Puntos: 0
Mantener opción seleccionada en barra de menú

Hola, me gustaría saber cómo establecer el color de fondo de la opción clicada de una barra de menú Spry de Dreamweaver CS5.

Si alguien puede ayudarme, por favor, estoy iniciándome y tengo muchos problemas, y éste no soy capaz de solucionarlo.
  #2 (permalink)  
Antiguo 07/11/2010, 17:26
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Mantener opción seleccionada en barra de menú

Es decir.. Cuando este activa en esa categoría o sesión?

Cita:
a:active{background:#000;}
Saludos!
  #3 (permalink)  
Antiguo 07/11/2010, 21:01
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 7 años, 7 meses
Puntos: 23
Respuesta: Mantener opción seleccionada en barra de menú

Pero el a:active no es permanente, es decir al seleccionar o clicar cualquier otra cosa se deseleccionara, la solucion es usar jquery, te lo digo con conocimiento de causa...

Busca informacion del .addClass() y .removeClass() de jquery
  #4 (permalink)  
Antiguo 07/11/2010, 23:30
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Mantener opción seleccionada en barra de menú

En el menu desplegable de Mikmoro, al seleccionar una opción del mismo, esta queda seleccionada hasta que se cambie de opción...
Fijate que propiedad hace que este efecto aparezca...

ESTE ES EL MENU DEL QUE HABLO...
__________________
Adivino del Foro y Admirador de Sabios
  #5 (permalink)  
Antiguo 08/11/2010, 15:22
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Mantener opción seleccionada en barra de menú

Hola:

Cita:
Iniciado por MasterXNicoX Ver Mensaje
En el menu desplegable de Mikmoro, al seleccionar una opción del mismo, esta queda seleccionada hasta que se cambie de opción...
Y sin javascript a pesar de que lo dicen con conocimiento de causa.

Cita:
Iniciado por catpaw Ver Mensaje
Pero el a:active no es permanente, es decir al seleccionar o clicar cualquier otra cosa se deseleccionara, la solucion es usar jquery, te lo digo con conocimiento de causa...
Porque se entiende que al seleccionar otra opción, la anterior deja de estar activa ¿no?

Saludos.

  #6 (permalink)  
Antiguo 08/11/2010, 15:26
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 7 años, 7 meses
Puntos: 23
Respuesta: Mantener opción seleccionada en barra de menú

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:



Y sin javascript a pesar de que lo dicen con conocimiento de causa.



Porque se entiende que al seleccionar otra opción, la anterior deja de estar activa ¿no?

Saludos.

No pero si seleccionas algun combo o otra cosa te deselecciona tu "opcion del menu en la que estas" yo pase por ahi...

Compruebenlo...En el menu desplegable de Mikmoro...seleccionen cualquier opcion 1, 2 ... y den un clic fuera de las pestañas, en el background y se deseleccionara...depende de como este maquetando su web pero en la mia, como usaba ajax y un menu en pestañas mi solucion fue usar jquery

Saludos!
  #7 (permalink)  
Antiguo 08/11/2010, 16:07
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Mantener opción seleccionada en barra de menú

¿Es funcional o méramente ornamental?

Si es funcional, debería usar algún otro lenguaje, tipo js y prevenir que algún usuario lo tenga deshabilitado.

Si es ornamental, con css sí es posible:
:target

Una intro a dicha pseudoclase: http://bit.ly/cCHQgW

Y sí, es persistente.
  #8 (permalink)  
Antiguo 09/11/2010, 12:59
 
Fecha de Ingreso: noviembre-2010
Mensajes: 6
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Mantener opción seleccionada en barra de menú

Muchísimas gracias a todos por el aluvión de respuestas, así da gusto.

A ver, quiero explicarme mejor poniendo un ejemplo de una web:
http://portal.uned.es/portal/page?_pageid=93,171871&_dad=portal&_schema=PORTAL

Cuando vas a cualquiera de los elementos del menú ("Oferta de estudios", "Cómo se estudia en la UNED", etc), dicho elemento queda marcado. Mi pregunta era si podría hacerse con la barra de menú SPRY.

He estado viendo la opción de kseso?, pero creo que no vale porque con cada opción del menú quiero abrir una página nueva, en vez de los marcadores con # (no sé cómo llamar a eso).

Las demás opciones las voy a investigar ahora, a ver si consigo algo.
  #9 (permalink)  
Antiguo 09/11/2010, 13:47
 
Fecha de Ingreso: noviembre-2010
Mensajes: 6
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Mantener opción seleccionada en barra de menú

Cita:
Iniciado por catpaw Ver Mensaje
Pero el a:active no es permanente, es decir al seleccionar o clicar cualquier otra cosa se deseleccionara, la solucion es usar jquery, te lo digo con conocimiento de causa...

Busca informacion del .addClass() y .removeClass() de jquery
Uffff, estoy empezando con html, cómo voy a ponerme con javascript!?!, más aún, con jquery.

Con lo que sé de basic y macros en excel, pensaba que esto del diseño web iba a ser algo del estilo, pero no tiene nada que ver!!!!!

No avanzo, en fin, espero que podáis echarle un ojo al ejemplo que puse antes y que me podáis ayudar con algo que sea capaz de lograr.
  #10 (permalink)  
Antiguo 09/11/2010, 13:57
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 7 años, 7 meses
Puntos: 23
Respuesta: Mantener opción seleccionada en barra de menú

la verdad es muy sencillo de hecho cuando trataba de hacer lo mismo q tu tampoco sabia nada de jquery!!

echale un vistazo a este post

http://www.forosdelweb.com/f127/menu-como-este-847233/
  #11 (permalink)  
Antiguo 09/11/2010, 18:34
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 7 años, 5 meses
Puntos: 5
Respuesta: Mantener opción seleccionada en barra de menú

Cita:
Iniciado por eselito5 Ver Mensaje
Uffff, estoy empezando con html, cómo voy a ponerme con javascript!?!, más aún, con jquery.

Con lo que sé de basic y macros en excel, pensaba que esto del diseño web iba a ser algo del estilo, pero no tiene nada que ver!!!!!

No avanzo, en fin, espero que podáis echarle un ojo al ejemplo que puse antes y que me podáis ayudar con algo que sea capaz de lograr.
Yo no se nada practicamente de jQuery sin embargo lo uso, no es necesario que lo sepas para aplicarlo en tu web, esta lleno de plugins en internet para hacer millones de cosas, efectos hovers, tooltips, menus, etc... Ojo, no estoy diciendo que no sirve saber Javascript/jQuery, claro que sirve, ya que podes modificar los scripts a tu gusto o crear algo de la forma que quieras pero weno... sin saber tampoco te impide usarlos, y adaptar los plugins no requiere de mucho conocimiento mas que el html y css basico (bueno, con algunos plugins quizas tengas problemas pero hay algunos otros que son muy simples de implementar sin tanta vuelta).

Cita:
Iniciado por kseso? Ver Mensaje
¿Es funcional o méramente ornamental?

Si es funcional, debería usar algún otro lenguaje, tipo js y prevenir que algún usuario lo tenga deshabilitado.

Si es ornamental, con css sí es posible:
:target

Una intro a dicha pseudoclase: http://bit.ly/cCHQgW

Y sí, es persistente.
Me intereso lo que dijiste sobre prevenir que algun usuario lo tenga deshabilitado (al javascript), me podrias explicar algo de eso? o simplemente te referis a dejar un mensaje en la pagina web aclarando que dicha pagina usa js y que el cliente deberia tenerlo activado?
  #12 (permalink)  
Antiguo 19/11/2010, 15:16
 
Fecha de Ingreso: noviembre-2010
Mensajes: 6
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Mantener opción seleccionada en barra de menú

Hola.

He ido progresando. He sido capaz de crear la barra de menu en condiciones, que no se me descojone con los diferentes navegadores, he asimilado un motivo más para odiar a Microsoft e incluso he sido capaz de introducir un par de líneas jquery, de hecho son estas:

<script type="text/javascript">
$("ul.MenuBarHorizontal a").click(function(event){
$("ul.MenuBarHorizontal a").css("background-image","");
$("ul.MenuBarHorizontal a").css("color","");
$(this).css("background-image","url(../Imagenes/b_sel.jpg)");
$(this).css("color","black");
});
</script>

quita cualquier imagen de fondo de todos los elementos del menú y aplica una (b_sel.jpg) sobre el elemento clicado.

Por si a alguien le interesa (yo me quedé un rato emparanoiado con la tontería, que simple se puede llegar a ser...):
http://www.michaelvandaniker.com/labs/browserVisualization/

Muchísimas gracias por todo.
  #13 (permalink)  
Antiguo 20/11/2010, 04:26
 
Fecha de Ingreso: noviembre-2010
Mensajes: 6
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Mantener opción seleccionada en barra de menú

Qué cagada, le tenía puesto a los diferentes elementos del menú enlaces #, pero al ponerle enlaces a las diferentes páginas del menú, no se me mantiene la opción seleccionada, puesto que se va a otra página. Con lo que me había costado...

¿¡Qué hago ahora?!
  #14 (permalink)  
Antiguo 20/11/2010, 07:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Mantener opción seleccionada en barra de menú

Creo que este tema se me quedó en el olvido.
Cita:
con cada opción del menú quiero abrir una página nueva
Si es eso, la respuesta es la que siempre se ha dado:

1ª: actuar sobre la etiqueta body añadiendo un identificador único (id/#) <- La almohadilla "#" es el símbolo usado en css para etiquetar un selector como id (identificador único) Y el punto "." para las clases.
2ª: añadir una clase o un id a la pestaña correspondiente en cada página.

----------------
Ejemplo:
tengamos un grupo de páginas como: inicio, contacto, historia, productos y que serán los enlaces en el menú

1ª Opción:
Código HTML:
Ver original
  1.    <ul id="menu">
  2.       <li class="inicio"><a href="inicio.html">Inicio</a></li>
  3.       <li class="contacto"><a href="inicio.html">contacto</a></li>
  4.       <li class="historia"><a href="inicio.html">historia</a></li>
  5.       <li class="productos"><a href="inicio.html">productos</a></li>
  6.    </ul>

Actuando sobre la etiqueta body
Deberá asignar en cada html su id a esa etiqueta:
en "inicio.html" quedaría: <body id="inicio">
en "contacto.html" sería: <body id="contacto">
y así sucesivamente.

Y ahora en el css debería crear la regla correspondiente:
Código CSS:
Ver original
  1. #inicio ul#menu li.inicio,
  2. #contacto ul#menu li.contacto,
  3. #historia ul#menu li.historia,
  4. #productos ul#menu li.productos
  5. {/*propiedad:valor;*/}

2ª opción:
Olvidarnos de la etiqueta body y en cada página aplicar una clase a su li correspondiente.
Así, en la página "inicio.html", el menú quedaría:
Código HTML:
Ver original
  1.    <ul#menu>
  2.       <li class="actual"><a href="inicio.html">Inicio</a></li>
  3.       <li><a href="inicio.html">contacto</a></li>
  4.       <li><a href="inicio.html">historia</a></li>
  5.       <li><a href="inicio.html">productos</a></li>
  6.    </ul>
en "contacto.html" sería:
Código HTML:
Ver original
  1.    <ul#menu>
  2.       <li><a href="inicio.html">Inicio</a></li>
  3.       <li class="actual"><a href="inicio.html">contacto</a></li>
  4.       <li><a href="inicio.html">historia</a></li>
  5.       <li><a href="inicio.html">productos</a></li>
  6.    </ul>
Y así con el resto.
Y en el css debería declarar:
Código CSS:
Ver original
  1. ul#menu li.actual {/*propiedad:valor;*/}

Nótese que para mejor comprensión en el css he sido muy específico en la regla (#inicio ul#menu li.inicio).

Si en vez de crear las páginas (y el menú) de forma manual y que le facilitará la inclusión de las correspondientes etiquetas lo hace de forma dinámica (por ejemplo el mismo menú para todas las páginas incluyéndolo con alguna programación como los includes de php) deberá hacer lo mismo (programación) para añadir la clase correspondiente en cada página.
Pero eso ya sería otra historia.
  #15 (permalink)  
Antiguo 20/11/2010, 11:59
 
Fecha de Ingreso: noviembre-2010
Mensajes: 6
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Mantener opción seleccionada en barra de menú

Muchísimas gracias kseso. La verdad es que lo acabo de hacer funcionar bien, aunque me ha quedado un poco "artesano" por llamarlo de alguna forma.

Lo que hago es aplicar al elemento del menú cuyo id coincida con la url actual (a partir del último "/" y sin ".html") el estilo que quiero para que se mantenga seleccionado.

La forma en que lo aplico es similar a como dije antes, es decir con jquery, solo que en el evento onload.

¿Qué te parece?

Aprovechándome un poco: estoy usando dreamweaver, lo que estoy haciendo ahora que he terminado la plantilla, es dejar una región editable (el contenido) y crearé diferentes páginas sobre esa plantilla en las que sólo podré cambiar el contenido, así si algún día cambio algo del menú, encabezado o pie, cambiará en todas. ¿Es esta una buena forma de hacerlo?
  #16 (permalink)  
Antiguo 18/04/2013, 10:20
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 605
Antigüedad: 5 años, 9 meses
Puntos: 36
Mensaje Respuesta: Mantener opción seleccionada en barra de menú

Cita:
Iniciado por kseso? Ver Mensaje
Creo que este tema se me quedó en el olvido.
Si es eso, la respuesta es la que siempre se ha dado:

1ª: actuar sobre la etiqueta body añadiendo un identificador único (id/#) <- La almohadilla "#" es el símbolo usado en css para etiquetar un selector como id (identificador único) Y el punto "." para las clases.
2ª: añadir una clase o un id a la pestaña correspondiente en cada página.

----------------
Ejemplo:
tengamos un grupo de páginas como: inicio, contacto, historia, productos y que serán los enlaces en el menú

1ª Opción:
Código HTML:
Ver original
  1.    <ul id="menu">
  2.       <li class="inicio"><a href="inicio.html">Inicio</a></li>
  3.       <li class="contacto"><a href="inicio.html">contacto</a></li>
  4.       <li class="historia"><a href="inicio.html">historia</a></li>
  5.       <li class="productos"><a href="inicio.html">productos</a></li>
  6.    </ul>

Actuando sobre la etiqueta body
Deberá asignar en cada html su id a esa etiqueta:
en "inicio.html" quedaría: <body id="inicio">
en "contacto.html" sería: <body id="contacto">
y así sucesivamente.

Y ahora en el css debería crear la regla correspondiente:
Código CSS:
Ver original
  1. #inicio ul#menu li.inicio,
  2. #contacto ul#menu li.contacto,
  3. #historia ul#menu li.historia,
  4. #productos ul#menu li.productos
  5. {/*propiedad:valor;*/}

2ª opción:
Olvidarnos de la etiqueta body y en cada página aplicar una clase a su li correspondiente.
Así, en la página "inicio.html", el menú quedaría:
Código HTML:
Ver original
  1.    <ul#menu>
  2.       <li class="actual"><a href="inicio.html">Inicio</a></li>
  3.       <li><a href="inicio.html">contacto</a></li>
  4.       <li><a href="inicio.html">historia</a></li>
  5.       <li><a href="inicio.html">productos</a></li>
  6.    </ul>
en "contacto.html" sería:
Código HTML:
Ver original
  1.    <ul#menu>
  2.       <li><a href="inicio.html">Inicio</a></li>
  3.       <li class="actual"><a href="inicio.html">contacto</a></li>
  4.       <li><a href="inicio.html">historia</a></li>
  5.       <li><a href="inicio.html">productos</a></li>
  6.    </ul>
Y así con el resto.
Y en el css debería declarar:
Código CSS:
Ver original
  1. ul#menu li.actual {/*propiedad:valor;*/}

Nótese que para mejor comprensión en el css he sido muy específico en la regla (#inicio ul#menu li.inicio).

Si en vez de crear las páginas (y el menú) de forma manual y que le facilitará la inclusión de las correspondientes etiquetas lo hace de forma dinámica (por ejemplo el mismo menú para todas las páginas incluyéndolo con alguna programación como los includes de php) deberá hacer lo mismo (programación) para añadir la clase correspondiente en cada página.
Pero eso ya sería otra historia.
muchas gracias por tus conocimientos quien diria 5 años mas tarde tu post me ayudo gracias
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #17 (permalink)  
Antiguo 18/04/2013, 10:33
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Mantener opción seleccionada en barra de menú

El amigo kseso? hace un tiempo que no anda por estos lares, pero lo podés seguir a través de su blog, muy recomendable, desde mi punto de vista.

http://ksesocss.blogspot.com.es

Ah, no revivas post tan antiguos,
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #18 (permalink)  
Antiguo 18/04/2013, 10:48
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 605
Antigüedad: 5 años, 9 meses
Puntos: 36
Respuesta: Mantener opción seleccionada en barra de menú

Cita:
Iniciado por C2am Ver Mensaje
El amigo kseso? hace un tiempo que no anda por estos lares, pero lo podés seguir a través de su blog, muy recomendable, desde mi punto de vista.

http://ksesocss.blogspot.com.es

Ah, no revivas post tan antiguos,

ok
muchas gracias por tu ayuda
y comentarios lo tomare en cuenta
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..

Etiquetas: barra, mantener
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 17:00.