Tema: Como puedo dejar el color activo segun la pagina que se ejecute
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 15/07/2010, 13:17
all-ill
 
Fecha de Ingreso: junio-2002
Mensajes: 750
Antigüedad: 22 años, 5 meses
Puntos: 22
Respuesta: Como puedo dejar el color activo segun la pagina que se ejecute
Línea 31 del primer ejemplo; línea 6 del segundo.
Código CSS: 
Ver original
  1. background: url("img/bg_menu01.gif") repeat-x;  /* Este color es verde */
Aunque no lo he puesto lo recomendado sería añadir un color de fondo al especificar la imagen (por ejemplo background: green url("img/bg_menu01.gif") repeat-x;).

En el segundo ejemplo si el color de fondo lo aplicas sobre <li> entonces la clase debes aplicarla sobre este elemento en lugar de sobre <a>.

Un ejemplo ficticio:
  • Estructura de archivos:
    • index.html = corresponde a la sección o menú "inicio"
    • servicios.html = corresponde a la sección o menú "sevicios"
    • contactar.html = corresponde a la sección o menú "contactar"
    • layout.css = archivo de estilos CSS
  1. Paso 1: Modificar el elemento <body> de cada uno de los archivos con código html:
    Extracto del archivo index.html
    Código HTML: 
    Ver original
    1. <body id="inicio">
    Extracto del archivo servicios.html
    Código HTML: 
    Ver original
    1. <body id="servicios">
    Extracto del archivo contactar.html
    Código HTML: 
    Ver original
    1. <body id="contactar">
  2. Paso 2: Modificar el código html del menú (en todos los archivos donde aparezca el código del menú)
    Código HTML: 
    Ver original
    1. <ul id="menu-horizontal">   
    2. <li class="inicio"><a href="index.html" title="Inicio">INICIO</a></li>
    3. <li class="servicios"><a href="servicios.html" title="Servicios que ofrecemos">SERVICIOS</a></li>
    4. <li class="contactar"><a href="contactar.html" title="Contáctenos">CONTACTAR</a></li>
    5. </ul>
  3. Paso 3: Editar archivo CSS layout.css
    Código CSS: 
    Ver original
    1. /* Cuando se visite la página inicio el menú inicio tendrá el color de fondo especificado */
    2. body#inicio #menu-horizontal li.inicio {background:#C04D00;}
    3.  
    4. /* Cuando se visite la página servicios el menú inicio tendrá el color de fondo especificado */
    5. body#servicios #menu-horizontal li.servicios {background:#C04D00;}
    6.  
    7. /* Cuando se visite la página inicio el menú contactar tendrá el color de fondo especificado */
    8. body#contactar #menu-horizontal li.contactar {background:#C04D00;}
    En este ejemplo de código CSS se puede conseguir lo mismo ahorrando espacio al reducir el código de la siguiente manera:
    Código CSS: 
    Ver original
    1. /* Resaltar menú activo o sección actual */
    2. #inicio #menu-horizontal li.inicio, #servicios #menu-horizontal li.servicios, #contactar #menu-horizontal li.contactar {background:#C04D00;}