Foros del Web » Creando para Internet » CSS »

menu vertical, con un solo boton diferente

Estas en el tema de menu vertical, con un solo boton diferente en el foro de CSS en Foros del Web. Saludos tengo un menu vertical con 3 botones, que esta en todas mis páginas, pero quiero que cuando presione el boton 2 (por ejemplo) y ...
  #1 (permalink)  
Antiguo 14/08/2013, 13:45
Avatar de LinkLooker  
Fecha de Ingreso: agosto-2002
Mensajes: 136
Antigüedad: 21 años, 7 meses
Puntos: 3
menu vertical, con un solo boton diferente

Saludos tengo un menu vertical con 3 botones, que esta en todas mis páginas, pero quiero que cuando presione el boton 2 (por ejemplo) y vaya a la página num 2 en el menu este boton 2 tenga un aspecto diferente, puede ser otro color, que indique que estoy en esa página..Y así con los demás..

Supongo que será una clase aparte al li, pero no he dado con ello..


Acá mi codigo CSS:

Código CSS:
Ver original
  1. ul.botonera {
  2.   width: 100%;
  3.   list-style: none;
  4.   margin: 0;
  5.   padding: 0;
  6.   /*border: 1px solid #7C7C7C;*/
  7.   font-family:Tahoma, Geneva, sans-serif;
  8.   text-shadow: 1px 1px 1px #CCC
  9. }
  10. ul.botonera li {
  11.   margin-top:10px;
  12.  
  13.   /*border-bottom: 1px solid #7C7C7C;*/
  14.   /*border-top: 1px solid #7C7C7C;*/
  15.   background: # 000;
  16. }
  17. ul.botonera li a {
  18.   padding: 25px 25px 25px 20px;
  19.   /*height:0px;*/
  20.   display: block;
  21.   text-decoration: none;
  22.   color: #333;
  23.   background-color: #F6F6F6 ;
  24.  
  25.  
  26. }
  27.  
  28. ul.botonera li a:hover  {
  29.   background-color: #f15723;
  30.   color:#FFF;  
  31. }
  32.  
  33. ul.botonera li a:active { background-color:#ccc}


HTML:


Código HTML:
Ver original
  1. <ul class="botonera">
  2.                     <li><a href="#" title="Notificaciones">1</a></li>
  3.                     <li><a href="#">Objetivos y Tareas</a>2</li>
  4.                     <li><a href="#">Foro</a>2</li>
  5.                    
  6.                </ul>



Gracias de antemano

Última edición por pzin; 14/08/2013 a las 14:16 Razón: highlight
  #2 (permalink)  
Antiguo 14/08/2013, 14:17
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: menu vertical, con un solo boton diferente

Lo habitual es añadir una clase extra al menú seleccionado mediante algún lenguaje de servidor, y luego en esa clase sobreescribes o añades los estilos que necesites.
  #3 (permalink)  
Antiguo 14/08/2013, 15:14
Avatar de LinkLooker  
Fecha de Ingreso: agosto-2002
Mensajes: 136
Antigüedad: 21 años, 7 meses
Puntos: 3
Respuesta: menu vertical, con un solo boton diferente

Gracias por responder...

Un lenguaje como PHP??...Tendrás alguna referencia de algo que se le asemeje para tomarlo como ejemplo??
  #4 (permalink)  
Antiguo 18/08/2013, 07:01
Avatar de orchating  
Fecha de Ingreso: marzo-2009
Ubicación: Madrid
Mensajes: 92
Antigüedad: 15 años
Puntos: 0
Respuesta: menu vertical, con un solo boton diferente

Código HTML:
.menu_seleccionado  {
  background-color: #f15723;
  color:#FFF;
}
Código HTML:
<ul class="botonera">
                    <li><a href="#" title="Notificaciones" class="menu_seleccionado">1</a></li>
                    <li><a href="#">Objetivos y Tareas</a>2</li>
                    <li><a href="#">Foro</a>2</li>
                    
               </ul> 

Luego si no vas a desarrolar mas en php y se quedaria en html y css, en cada pagina de la web editas en menu y le pones el class="menu_selecionado" a el enlace correspondiente.

Etiquetas: boton, color, diferente, hover, html, vertical
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




La zona horaria es GMT -6. Ahora son las 17:06.