Mantener opción seleccionada en barra de menú

[eselito5]

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.

[PrendekZ]

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

a:active{background:#000;}

Saludos!

[catpaw]

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

[MasterXNicoX]

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...

[jomaruro]

Hola:

Iniciado por MasterXNicoX

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.

Iniciado por catpaw

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.

[catpaw]

Iniciado por jomaruro

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!

[kseso?]

¿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.

[eselito5]

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.

[eselito5]

Iniciado por catpaw

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.

[catpaw]

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/

[Ciel]

Iniciado por eselito5

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).

Iniciado por kseso?

¿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?

[eselito5]

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.

[eselito5]

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?!

[kseso?]

Creo que este tema se me quedó en el olvido.

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:

<body>
   <ul id="menu">
      <li class="inicio"><a href="inicio.html">Inicio</a></li>
      <li class="contacto"><a href="inicio.html">contacto</a></li>
      <li class="historia"><a href="inicio.html">historia</a></li>
      <li class="productos"><a href="inicio.html">productos</a></li>
   </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:

#inicio ul#menu li.inicio,
#contacto ul#menu li.contacto,
#historia ul#menu li.historia,
#productos ul#menu li.productos
{/*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:

<body>
   <ul#menu>
      <li class="actual"><a href="inicio.html">Inicio</a></li>
      <li><a href="inicio.html">contacto</a></li>
      <li><a href="inicio.html">historia</a></li>
      <li><a href="inicio.html">productos</a></li>
   </ul>
 

en "contacto.html" sería:

Código HTML:

<body>
   <ul#menu>
      <li><a href="inicio.html">Inicio</a></li>
      <li class="actual"><a href="inicio.html">contacto</a></li>
      <li><a href="inicio.html">historia</a></li>
      <li><a href="inicio.html">productos</a></li>
   </ul>
 

Y así con el resto.
Y en el css debería declarar:

Código CSS:

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.

[eselito5]

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?

[herzbazi]

Iniciado por kseso?

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:

<body>
   <ul id="menu">
      <li class="inicio"><a href="inicio.html">Inicio</a></li>
      <li class="contacto"><a href="inicio.html">contacto</a></li>
      <li class="historia"><a href="inicio.html">historia</a></li>
      <li class="productos"><a href="inicio.html">productos</a></li>
   </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:

#inicio ul#menu li.inicio,
#contacto ul#menu li.contacto,
#historia ul#menu li.historia,
#productos ul#menu li.productos
{/*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:

<body>
   <ul#menu>
      <li class="actual"><a href="inicio.html">Inicio</a></li>
      <li><a href="inicio.html">contacto</a></li>
      <li><a href="inicio.html">historia</a></li>
      <li><a href="inicio.html">productos</a></li>
   </ul>
 

en "contacto.html" sería:

Código HTML:

<body>
   <ul#menu>
      <li><a href="inicio.html">Inicio</a></li>
      <li class="actual"><a href="inicio.html">contacto</a></li>
      <li><a href="inicio.html">historia</a></li>
      <li><a href="inicio.html">productos</a></li>
   </ul>
 

Y así con el resto.
Y en el css debería declarar:

Código CSS:

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

[C2am]

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,

[herzbazi]

Iniciado por C2am

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