Foros del Web » Creando para Internet » CSS »

Como puedo dejar el color activo segun la pagina que se ejecute

 Estas en el tema de Como puedo dejar el color activo segun la pagina que se ejecute en el foro de CSS en Foros del Web. Tengo este codigo para un menu horizontal. Segun paso el mouse por cada opcion cambia a este color #C04D00. Pero al entrar en una pagina ...
  #1 (permalink)  
Antiguo 15/07/2010, 07:00
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Como puedo dejar el color activo segun la pagina que se ejecute
Tengo este codigo para un menu horizontal.
Segun paso el mouse por cada opcion cambia a este color #C04D00.
Pero al entrar en una pagina no me deja activo este color #C04D00
Que tengo que hacer en el codigo para que cuando cliquee en una pagina se quede activo el color #C04D00, en el menu, segun la pagina que elija.

Este es el codogo.

Código CSS: 
Ver original
  1. /* Menu */
  2.  
  3. #barra_menu {       /*Esta etiqueta es para situar el menu */
  4. position:absolute; 
  5. overflow:hidden; 
  6. left:2px; 
  7. top:135px; 
  8. width:991px; 
  9. height:27px; 
  10. border:0px;
  11. }
  12.  
  13. #menu {
  14. position:absolute;
  15. top: 137px;
  16. left: 5px;
  17. z-index: 100;
  18. }
  19.  
  20. #menu-horizontal {  
  21. position: relative;  
  22. margin:0 auto;  
  23. }  
  24.   
  25. #menu-horizontal li {
  26. float:left;
  27. margin:0 1px;  
  28. width:100px;  
  29. min-height:19px;  
  30. text-align:center;  
  31. background: img/bg_menu01.gif repeat x;  /* Este color es verde */
  32. list-style:none;  
  33. padding:2px 0;  
  34. }
  35.   
  36. #menu-horizontal li:hover {  
  37. /* Este anarangado que es el que quiero que de quede activo al entrar en la pagina */
  38. background:#C04D00;     
  39. width:100px;
  40. }  
  41.   
  42. #menu-horizontal li a {  
  43. font:bold 14px Arial, Helvetica, Sans-serif;  
  44. color:#FFFFFF;  
  45. text-decoration:none;  
  46. }  
  47.   
  48. #menu-horizontal li ul li{  
  49. float:none;  
  50. width:100px;  
  51. margin:7px 0;  
  52. }   
  53.  
  54. ul#menu-horizontal li {  
  55. float: left;  
  56. display: inline;  
  57. position: relative;  
  58. }   
  59.  
  60. ul#menu-horizontal ul {  
  61. display: none;  
  62. position: relative;  
  63. width:100px;
  64. background:#BECD43;  /* Esto color es para el submenu */
  65. }  
  66.   
  67. ul#menu-horizontal ul li {  
  68. display: block !important;  
  69. }  
  70.   
  71. ul#menu-horizontal li:hover ul{  
  72. display: none;  
  73. }  
  74.   
  75. ul#menu-horizontal li:hover ul{  
  76. display: block;  
  77. } 
  78.  
  79. /* Fix IE. Hide from IE Mac \*/ 
  80. * html ul li { float: left; height: 1%; } 
  81. * html ul li a { height: 1%; } 
  82. * #menu a { float: none ; } 
  83. /* End */

Muchas Gracias
  #2 (permalink)  
Antiguo 15/07/2010, 08:02
 
Fecha de Ingreso: junio-2002
Mensajes: 750
Antigüedad: 21 años, 10 meses
Puntos: 22
Respuesta: Como puedo dejar el color activo segun la pagina que se ejecute
Una opción es usar un id único en <body> para identificar cada página y una clase en cada enlace del menú (en <li> o <a>...) para poder hacer referencia en el código CSS al menú activo mediante body#id #menu li.contactar
Código HTML: 
Ver original
  1. <body id="contactar">
Código CSS: 
Ver original
  1. body#contactar #menu li.contactar{background-color:#C04D00;}
Última edición por all-ill; 15/07/2010 a las 13:21 Razón: Omisión de # al especificar background-color
  #3 (permalink)  
Antiguo 15/07/2010, 09:58
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como puedo dejar el color activo segun la pagina que se ejecute
No se nada de css, lo he hecho segun me has indicado y no me funciona.

Y en el codigo que he publicado en el hilo anterior he puesto lo siguiente con la explicacion que me has dicho por si acaso acierto, justo debajo de esto:
Código CSS: 
Ver original
  1. #menu-horizontal li {
  2. float:left;margin:0 1px;  
  3. width:100px;  
  4. min-height:19px;  
  5. text-align:center;  
  6. background: img/bg_menu01.gif repeat x;  
  7. /* Este color es verde */
  8. list-style:none;  
  9. padding:2px 0;  
  10. }

#menu-horizontal li.contactar{background-color:C04D00;}

Y en el html he puesto esto.
Código HTML: 
Ver original
  1. <ul id="menu-horizontal">   
  2. <li><a class="contactar" href="inicio.html">INICIO</a></li>  
  3. </ul>
Y no me funciona.
¿Que es lo que tengo mal?
Última edición por corretodo; 15/07/2010 a las 13:16
  #4 (permalink)  
Antiguo 15/07/2010, 13:17
 
Fecha de Ingreso: junio-2002
Mensajes: 750
Antigüedad: 21 años, 10 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;}
  #5 (permalink)  
Antiguo 15/07/2010, 13:20
 
Fecha de Ingreso: junio-2002
Mensajes: 750
Antigüedad: 21 años, 10 meses
Puntos: 22
Respuesta: Como puedo dejar el color activo segun la pagina que se ejecute
En el primer ejemplo indicado me comí el signo # del color de fondo
Cita:
Iniciado por corretodo Ver Mensaje
#menu-horizontal li.contactar{background-color:C04D00;}
Código CSS: 
Ver original
  1. #menu-horizontal li.contactar{background-color:#C04D00;}

Cita:
Iniciado por corretodo Ver Mensaje
No se nada de css, lo he hecho segun me has indicado y no me funciona.
En http://www.librosweb.es/ puedes encontrar guías de uso de CSS, HTML, etc.
  #6 (permalink)  
Antiguo 15/07/2010, 14:20
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como puedo dejar el color activo segun la pagina que se ejecute
Muchisimas gracias por tu solucion.
Ha quedado perfecto.
A si da gusto aprender.
Muy bien por la explicacion.

El codigo definitivo queda asi sin las etiquetas body y funciona perfectamente.
Código CSS: 
Ver original
  1. /* Menu */
  2.  
  3. #menu-horizontal {  
  4. position: absolute; 
  5. width: 985px;  
  6. margin:0 auto;  
  7. } 
  8.  
  9. #menu-horizontal li {  
  10. margin:0 1px;  
  11. width:155px;  
  12. min-height:19px;  
  13. text-align:center;  
  14. background: img/bg_menu01.gif repeat x;  
  15. list-style:none;  
  16. padding:2px 0;  
  17. }  
  18.  
  19. #menu-horizontal li.activar{background-color:#C04D00;}
  20.  
  21. #menu-horizontal li:hover {  
  22. background:#C04D00;
  23. width:155px;
  24. }  
  25.   
  26. #menu-horizontal li a {  
  27. font:bold 14px Arial, Helvetica, Sans-serif;  
  28. color:#FFFFFF;  
  29. text-decoration:none;  
  30. }  
  31.   
  32. #menu-horizontal li ul li{  
  33. float:none;  
  34. width:155px;  
  35. margin:7px 0;  
  36. }   
  37.  
  38. ul#menu-horizontal li {  
  39. float: left;  
  40. display: inline;  
  41. position: relative;  
  42. }   
  43.  
  44. ul#menu-horizontal ul {  
  45. display: none;  
  46. position: relative;  
  47. width:155px;
  48. background:#BECD43;  
  49. }  
  50.   
  51. ul#menu-horizontal ul li {  
  52. display: block !important;  
  53. }  
  54.   
  55. ul#menu-horizontal li:hover ul{  
  56. display: none;  
  57. }  
  58.   
  59. ul#menu-horizontal li:hover ul{  
  60. display: block;  
  61. } 
  62.  
  63. /* Fix IE. Hide from IE Mac \*/ 
  64. * html ul li { float: left; height: 1%; } 
  65. * html ul li a { height: 1%; } 
  66. * #menu a { float: none ; } 
  67. /* FIN */

Y asi el
Código HTML: 
Ver original
  1. <ul id="menu-horizontal"> 
  2. <li class="activar"><a href="#">INICIO</a>
  3. </ul>

Al codigo original que postee se le añade la linea 19.
He puesto de nuevo todo el codigo completo por si le sirve a alguien.

Hay que cambiar la clase activar solo, en la pagina html que se abra.
Como ha explicado all-ill

Muchisimas gracias all-ill.
Saludos

Etiquetas: color, dejar
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 00:36.