Hola a todos/das:
Estoy confeccionando un menú de pestañas y hasta ahora con lo que he investigado por ahí más lo que yo se (poco) me voy defendiendo. Ya lo tengo prácticamente terminado, pero me falla un detalle que no se como resolver (será la hora
).
Cuando pincho una pestaña cualquiera me selecciona el contenido que corresponde, sin embargo, no se mantiene "pulsada" mientras dura la selección.
Mi idea sería que al pinchar la opción desapareciera el background-color y cogiera el mismo que el contenido además de que desapareciera la línea inferior del botón, pero manteniendo el resto del borde, creando el efecto de que la pestaña pertenece a una ficha.
Aquí el código para vuestro examen (se admiten críticas constructivas acompañadas de alternativas funcionales
).
El menú
Código HTML:
<div id="Pestanas">
<ul>
<li style="margin-left: 1px"><a href="#" rel="1" class="button"><span>Perfil</span></a></li>
<li><a href="#" rel="2" class="button"><span>Referencias</span></a></li>
<li><a href="#" rel="3" class="button"><span>Documentos</span></a></li>
</ul>
</div>
<div id="Pestanasline"> </div>
El estilo del menú:
Código HTML:
/*Menus de pestaña*/
#Pestanas{margin-left: 4px;padding: 0px;width: 100%;background: transparent;voice-family: "\"}\"";voice-family: inherit;padding-left: 5px;}
#Pestanas ul{font: bold 11px Arial, Verdana, sans-serif;margin:0;padding:0;list-style:none;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
#Pestanas li{display:inline;margin:0 2px 0 0;padding:0;text-transform:uppercase;line-height: 1.5em;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
#Pestanas a{float:left;color: white;background-color: FireBrick;margin:0 2px 0 0;padding:0 0 0 3px;text-decoration:none;letter-spacing: 1px;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
#Pestanas a span{float:left;display:block;background-color: FireBrick;padding:3px 9px 3px 6px;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
#Pestanas a span{float:none;}
#Pestanas a:hover{background-color: #d50509;}
#Pestanas a:hover span{background-color: #d50509;}
#Pestanas #current a #Pestanas #current span{ /*boton selecionado*/background-color:#f0f8ff;}
#Pestanasline{clear: both;padding: 0;width: 100%;height: 1px;line-height: 1px;background: #8b0000;}
A ver si alguien me puede iluminar. Cuando lo tenga resuelto lo publicaré.
Gracias por adelantado
,