Código de CSS - Menú desplegable con efecto en CSS3 para nuestra web con responsive

Imágen de perfil

Menú desplegable con efecto en CSS3 para nuestra web con responsivegráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 01 de Agosto del 2014 por Administrador
5.178 visualizaciones desde el 01 de Agosto del 2014. Una media de 49 por semana
Menú utilizado para las paginas web que necesitan implementar un menú que aparezca y desaparezca cuando nuestra web esta en responsive para utilizar en un móvil o tablet.
Este código de CSS3, muestra un recuadro el cual al ser pulsado se desplegará un menú hacia la derecha haciendo un simple efecto.

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 01 de Agosto del 2014gráfica de visualizaciones de la versión: Versión 1
5.179 visualizaciones desde el 01 de Agosto del 2014. Una media de 49 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí

Forma parte de CSS library
 
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<style>
	.menuDesplegable {
		position: relative;
		height: 45px;
		overflow: hidden;
		}
 
	.menuDesplegable, .menuDesplegable * {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		}
 
	/* checkbox utilizado para alternar el estado del menu */
	.menuDesplegable input[type="checkbox"] {
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		}
 
	/* Icono principar para alternar el estado del menu */
	.menuDesplegable > label {
		z-index: 1000;
		display: block;
		position: absolute;
		width: 40px;
		height: 40px;
		float: left;
		top: 0;
		left: 0;
		background: white;
		text-indent: -1000000px;
		border: 6px solid black; /* border color */
		border-width: 6px 0;
		cursor: pointer;
		-moz-transition: all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in; /* Transicion para mover la etiqueta */
		}
 
	/* rayas internas dentro de la etiqueta */
	.menuDesplegable > label::after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 18%;
		top: 19%;
		left: 0;
		border: 6px solid black; /* border color */
		border-width: 6px 0;
		-moz-transition: all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in; /* Transicion para mover la etiqueta */
		}
 
	/* contenedor <UL> con las opciones del menu */
	.menuDesplegable ul {
		margin: 0;
		padding: 0;
		position: absolute;
		margin-left: 40px;
		background: #eee;
		left: -100%; /* hide menu intially */
		height: 40px; /* height of menu */
		font: bold 14px Verdana;
		text-align: center;
		list-style: none;
		opacity: 0;
		-moz-border-radius: 0 5px 5px 0;
		-webkit-border-radius: 0 5px 5px 0;
		border-radius: 0 5px 5px 0;
		-moz-perspective: 10000px;
		perspective: 10000px;
		-moz-transition: all 0.5s ease-in;
		-webkit-transition: all 0.5s ease-in;
		transition: all 0.5s ease-in; /* transition for animating UL in and out */
		}
 
	.menuDesplegable li {
		display: inline;
		margin: 0;
		padding: 0;
		}
 
	/* hace referencia a la etiqueta para cerrar el menu */
	.menuDesplegable ul label {
		cursor: pointer;
		position: relative;
		height: 100%;
		text-align: center;
		}
 
	/* etiqueta para el boton de cerrar o recojer el menu */
	.menuDesplegable ul label::after {
		content: "x";
		display: inline-block;
		line-height: 14px;
		color: white;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		border-radius: 50px;
		width: 20px;
		height: 20px;
		background: black;
		font-size: 18px;
		margin: 5px;
		margin-top: 10px;
		-moz-transition: all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in;
		}
 
	.menuDesplegable input[type="checkbox"]:checked ~ label, .menuDesplegable ul label:hover::after {
		-moz-transform: rotatey(180deg);
		-ms-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
		transform: rotatey(180deg); /* hace rotar 180º */
		}
 
	.menuDesplegable > label:hover, .menuDesplegable > label:hover::after, .menuDesplegable input[type="checkbox"]:checked ~ label, .menuDesplegable input[type="checkbox"]:checked ~ label::after {
		border-color: darkred; /* resaltamos cambiando el color */
		}
 
	.menuDesplegable input[type="checkbox"]:checked ~ ul {
		left: 8px; /* simulamos una pequeña animación */
		opacity: 1;
		-moz-box-shadow: 1px 1px 5px gray;
		-webkit-box-shadow: 1px 1px 5px gray;
		box-shadow: 1px 1px 5px gray;
		}
 
	.menuDesplegable li a {
		display: block;
		float: left;
		text-align: center;
		text-decoration: none;
		color: black;
		margin: 0;
		padding: 10px;
		padding-right: 15px;
		height: 100%;
		}
 
	.menuDesplegable li a:hover {
		background: black;
		color: white;
		}
	</style>
</head>
 
<body>
<p>Pulsa sobre el icono para visualizar el menu</p>
 
<div class="menuDesplegable">
	<input type="checkbox" id="togglebox" />
	<ul>
		<li><a href="http://www.lawebdelprogramador.com">Home</a></li>
		<li><a href="http://www.lawebdelprogramador.com/cursos/">Cursos</a></li>
		<li><a href="http://www.lawebdelprogramador.com/foros/">Foros</a></li>
		<li><a href="http://www.lawebdelprogramador.com/Noticias">Noticias</a></li>
		<li><label for="togglebox"></label></li>
	</ul>
	<label class="toggler" for="togglebox">Menu</label>
</div>
</body>
</html>



Comentarios sobre la versión: Versión 1 (1)

adriana
15 de Julio del 2015
estrellaestrellaestrellaestrellaestrella
como puedo hacer para colocar el menu desplegable hacia abajo.... ?? urgente por favor
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2730