Ver Mensaje Individual
  #16 (permalink)  
Antiguo 18/04/2013, 09:20
Avatar de herzbazi
herzbazi
 
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años, 2 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..