Tema: Mantener opción seleccionada en barra de menú
Ver Mensaje Individual
  #14 (permalink)  
Antiguo 20/11/2010, 07:48
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
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. <body>
  2.    <ul id="menu">
  3.       <li class="inicio"><a href="inicio.html">Inicio</a></li>
  4.       <li class="contacto"><a href="inicio.html">contacto</a></li>
  5.       <li class="historia"><a href="inicio.html">historia</a></li>
  6.       <li class="productos"><a href="inicio.html">productos</a></li>
  7.    </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. <body>
  2.    <ul#menu>
  3.       <li class="actual"><a href="inicio.html">Inicio</a></li>
  4.       <li><a href="inicio.html">contacto</a></li>
  5.       <li><a href="inicio.html">historia</a></li>
  6.       <li><a href="inicio.html">productos</a></li>
  7.    </ul>
en "contacto.html" sería:
Código HTML: 
Ver original
  1. <body>
  2.    <ul#menu>
  3.       <li><a href="inicio.html">Inicio</a></li>
  4.       <li class="actual"><a href="inicio.html">contacto</a></li>
  5.       <li><a href="inicio.html">historia</a></li>
  6.       <li><a href="inicio.html">productos</a></li>
  7.    </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.