HTML - Menú HTML

 
Vista:
sin imagen de perfil

Menú HTML

Publicado por Andres (1 intervención) el 04/06/2017 22:11:28
Bueno lo que estoy haciendo es un menú con css en el cual se colorea los apartados de este pero tengo el problema de que cuando accedo a una seccion del menú no se queda el color ahí, un ejemplo accedi a la galeria y el color regreso a la seccion de inicio. Lo que quiero es que si estoy en galeria el color se quede en galeria y no regrese a inicio.
Captura

este es el css.

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
nav {
	margin: 30px auto;
	position: relative;
	width: 650px;
	height: 50px;
	background-color: #34495e;
	border-radius: 8px;
	font-size: 0;
}
nav a {
	line-height: 50px;
	height: 100%;
	font-size: 15px;
	display: inline-block;
	position: relative;
	z-index: 1;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	color: white;
	cursor: pointer;
}
nav .animation {
	position: absolute;
	height: 100%;
	top: 0;
	z-index: 0;
	transition: all .5s ease 0s;
	border-radius: 8px;
}
 
a:nth-child(1) {
	width: 100px;
}
a:nth-child(2) {
	width: 230px;
}
a:nth-child(3) {
	width: 100px;
}
a:nth-child(4) {
	width: 220px;
}
 
nav .start-home, a:nth-child(1):hover~.animation { /*1 elemento del menu*/
	width: 100px;
	left: 0;
	background-color: #1abc9c;
}
nav .start-best, a:nth-child(2):hover~.animation {/*2 elemento del menu*/
	width: 230px;
	left: 100px;
	background-color: #e74c3c;
}
nav .start-galery, a:nth-child(3):hover~.animation { /*3 elemento del menu*/
	width: 100px;
	left: 330px;
	background-color: #3498db;
}
nav .start-teach, a:nth-child(4):hover~.animation { /*4 elemento del menu*/
	width: 220px;
	left: 430px;
	background-color: #9b59b6;
}
 
body { /*Estilo del cuerpo*/
	font-size: 12px;
	font-family: sans-serif;
	background: #654321;
}
h1 {
	text-align: center;
	margin: 40px 0 40px;
	text-align: center;
	font-size: 30px;
	color: #f0c0f1;
	text-shadow: 2px 2px 4px #000000;
	font-family: 'Cherry Swash', cursive;
}
#cuerpo{ 
	margin: 30px 200px 100px 200px;
	font-family: 'Cherry Swash';
	color: #ecf0f1;
	font-size: 18px;
}
p {
	margin: 40px 40px 40px 40px;
    bottom: 20px;
    width: 100%;
	color: #ecf0f1;
    font-family: 'Cherry Swash';
    font-size: 16px;
}
 
span {
    color: #2BD6B4;
    font-size: 30px;
}
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 xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Menú HTML

Publicado por xve (1543 intervenciones) el 05/06/2017 09:05:29
Hola Andres, eso que quieres hacer, no puedes hacerlo solamente con estilos... tendrás que utilizar o javascript, ya que veo que no utilizas ni PHP, ni ningún otro lenguaje de servidor.

Según veo, lo puedes hacer de dos maneras...
1.- Cargando el contenido de las paginas del menú mediante AJAX, de esta manera, no se moverá el menú y quedara la selección que hayas realizado.

2.- al cargar la pagina galeria.html, en su interior añade el estilo que determina que esta la selección del menú seleccionada, y quitarla del botón inicio. No nos muestras el código html del menú que hay en la pagina galerita, por lo que no te se decir muy bien como ponerlo.
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