Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » ¿CSS3 permite cambiar el estilo de un link activo?

CSS - ¿CSS3 permite cambiar el estilo de un link activo?

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de txema
Val: 39
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

¿CSS3 permite cambiar el estilo de un link activo?

Publicado por txema (6 intervenciones) el 23/01/2015 19:37:11
Pues sí, esa es la pregunta: ¿CSS3 permite cambiar el estilo de un link activo?

Creo que se entiende el enunciado.

Cuando recorremos diversas páginas en una web, disponemos de varios seudoelementos o seudoclases que nos permiten modificar la apariencia, pero que lastimosamente se pierden cuando cambiamos de página.
1
2
3
4
5
6
7
8
9
10
11
a:link {
    color: #FF0000;

}
a:visited {
    color: #00FF00;

}
a:hover {
    color: #FF00FF;

}
a:active {
    color: #0000FF;

Ello no nos sirve cuando, a través del menú nos movemos por diferentes páginas (contemplo que estén en un mismo directorio, que ya sería suficiente). Así que tenemos que acudir a darles alguna clase y gestionarlo en JavaScript o PHP.

¿Alguien sabe si CSS3 tiene algo (que para mí sería nuevo) para conseguirlo?
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
Imágen de perfil de txema
Val: 39
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

[SOLUCIONADO] ¿CSS3 permite cambiar el estilo de un link activo?

Publicado por txema (6 intervenciones) el 24/01/2015 02:55:05
La verdad es que era más difícil llegar a descubrir la solución que el ejecutarla.

Ahora cabe la evaluación si adoptamos la solución en JavaScript (ciertamente compleja), en PHP (teóricamente la más sencilla) o ésta en CSS (me sobra el 3 y no la veo más compleja que en PHP).

Les comento:

He creado cuatro páginas: index, pagina1, pagina2 y pagina3, todo en HTML.

Había que llegar al CSS con algo exclusivo de cada página que la identificara. Así que nada mejor que asignarle un ID particular a la etiqueta <nav> comprometida y una clase particular a cada <li> No sirve una de la dos: Han de ser las dos coordinadas.

En tal caso, podemos poner en el HTML al <nav> comprometido un ID con el nombre de la página y cada <li> con una clase con el mismo nombre.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- Para el index.html -->
<nav id="index">
    <ul id="menu">
        <li><a href="index.html" class="index">index</a></li>
        <li><a href="pagina2.html" class="pagina2">pagina2</a></li>
        <li><a href="pagina3.html" class="pagina3">pagina3</a></li>
        <li><a href="pagina4.html" class="pagina4">pagina4</a></li>
    </ul>
</nav>
<!-- Para la pagina2.html -->
<nav id="pagina2">
    <ul id="menu">
        <li><a href="index.html" class="index">index</a></li>
        <li><a href="pagina2.html" class="pagina2">pagina2</a></li>
        <li><a href="pagina3.html" class="pagina3">pagina3</a></li>
        <li><a href="pagina4.html" class="pagina4">pagina4</a></li>
    </ul>
</nav>
<!-- Y lo mismo para el resto -->
Y con el CSS, tanto al a:hover como a nuestra nueva ruta, creamos el nuevo estilo:
1
2
3
4
5
6
7
8
9
10
11
12
#menu a:hover {

	color: #1E1E1E;

	background-color: #E1E1E1;

}
#index #menu li .index,

#pagina2 #menu li .pagina2,

#pagina3 #menu li .pagina3,

#pagina4 #menu li .pagina4{

	color: #1E1E1E;

	background-color: #E1E1E1;

	border: 2px solid #CA464F;

}

Para muestra, una página HTML completa:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="es-ES">
 
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex,nofollow">
    <link rel="stylesheet" type="text/css" href="estilo.css">
    <title>Menú con CSS</title>
</head>
 
<body>
    <header>
        <h2>Página 3</h2> </div>
    </header>
    <div style="clear:both;"></div>
    <nav id="pagina3">
        <ul id="menu">
            <li><a href="index.html" class="index">index</a></li>
            <li><a href="pagina2.html" class="pagina2">pagina2</a></li>
            <li><a href="pagina3.html" class="pagina3">pagina3</a></li>
            <li><a href="pagina4.html" class="pagina4">pagina4</a></li>
        </ul>
    </nav>
    <div style="clear:both;"></div>
    <section class="cuerpo">
        <p>Esta es mi página #3</p>

    </section>
    <footer>
        <div class="footer">Mi pie de página</div>
    </footer>
</body>
</html>
</html>
Y el CSS limitado a nuestro propósito para todas ellas:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
*{
  font-family:Trebuchet MS,verdana,arial;
  margin: 0px;
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#menu {

	margin: 0 auto;
	padding: 0px;
	list-style-type: none;
}
#menu a {

	font-size: 12px;
	line-height: 12px;
	color: #E1E1E1;

	background-color: #1E1E1E;

	display: block;
	margin-right: 4px;
	float: left;
	text-align: center;
	padding: 10px 20px;
	text-decoration: none;
}
#menu a:hover {

	color: #1E1E1E;

	background-color: #E1E1E1;

}
#index #menu li .index,

#pagina2 #menu li .pagina2,

#pagina3 #menu li .pagina3,

#pagina4 #menu li .pagina4{

	color: #1E1E1E;

	background-color: #E1E1E1;

	border: 2px solid #CA464F;

}

Y fin de la cita.

Ha sido una tarde-noche muy larga pero ha merecido la pena.
(esto es un bostezo)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

[SOLUCIONADO] ¿CSS3 permite cambiar el estilo de un link activo?

Publicado por xve (490 intervenciones) el 24/01/2015 10:55:14
Muy bueno Txema!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar