CSS - Opcion Inicio del menu me queda siempre activada.

 
Vista:
sin imagen de perfil

Opcion Inicio del menu me queda siempre activada.

Publicado por Juan (11 intervenciones) el 22/05/2016 01:10:59
Estimados, me presento, me llamo Juan, tengo una radio online y una página web.

Soy novato en el tema de html y css, pero estimo que nadie nació sabiendo, por lo que estoy dispuesto a aprender cada día un poco más.

Paso a la consulta concreta:

Como verán, en mi web, la opción inicio del menú siempre queda activada por defecto, lo cual lo veo muy bien y no deseo modificar.

Pero, cuando se elige otra opción del mismo menú, sigue activada la opción de inicio, vale decir, lo que deseo es que cuando elija la opción 2, la 1 quede desactivada, ó si elijo la 3 que sea solo la opción que elijo la que quede iluminada.

Comentarles que cada opción del menú horizontal es un archivo php distinto, pero sabiendo modificar el css estimo que quedarán todos los códigos html que están dentro de los php corregidos.

Con mis pocos conocimientos, creo haber encontrado la parte de los códigos que tendría que modificar.

En el archivo 1.php tengo lo siguiente:

Código HTML :

1
2
3
<body>{{ga_code}}<div class="root"><div class="vbox wb_container" id="wb_header">
 
<div id="wb_element_instance0" class="wb_element"><ul class="hmenu"><li class="active"><a href="CHz-Radio/" target="_self" title="CHz-Radio">CHz-RaDiO</a></li><li><a href="Propuesta/" target="_self" title="Propuesta">Propuesta</a></li><li><a href="Contacto/" target="_self" title="Contacto">Contacto</a></li></ul></div><div id="wb_element_instance1" class="wb_element" style=" overflow: hidden;"><script>


En el archivo site.css lo siguiente:

Código CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.hmenu      {
   display: block; list-style-type: none; padding: 0px; margin: 0px; width: 100%;
   height: 100%; float: left; overflow: visible;
}
.hmenu { white-space: nowrap; }
.vmenu li,
.hmenu li      { position: relative; display: block; display: inline-block; padding: 0px; margin: 0px; }
.vmenu li      { clear: both; display: block; }
.vmenu li a,
.hmenu li a { display: block; }
.vmenu ul,
.hmenu ul   { display: none; position: absolute; margin-left: 0; padding-left: 0; left: 100%; top: 0; }
.vmenu ul li,
.hmenu ul li   { display: block; }
.hmenu ul li:first-child,
.vmenu ul li:first-child { margin-top: 0 ! important; }
.hmenu > li > ul { left: 0; top: 100%; }
.hmenu li:hover > ul, .vmenu li:hover > ul { display: block; }
.vmenu ul a, .hmenu ul a { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

Otra cosa que deseo es que la transición entre cada opción del menu sea más lenta al realizar click con el mouse, en la actualidad al realizar click en una de las opciones el "salto" es muy abrupto.
Si ven el color rosa que se pinta cuando está activada la opción, me gustaría que pasara de una opción a la otra de forma suave, no de golpe.

¿Que debería de modificar para lograr mi objetivos?
Atentos saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder