CSS - Ocultar un menu movil al dar click en opcion

 
Vista:
sin imagen de perfil
Val: 36
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ocultar un menu movil al dar click en opcion

Publicado por zendi (22 intervenciones) el 10/06/2019 23:34:44
Estoy teniendo un problema con una pagina, cuando llega a la resolucion de movil el menu se convierte en desplegable y quisiera que al darle click en el icon de menu abriera yque al darle click en alguna de las pestañas del menu se vovliera a ocultar, he intentado de varias maneras pero solo funciona apareciendo en el movil.
si alguien pudiera ayudar.


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
$(document).ready(main);
var contador = 1;
function main () {
	$('.menu_bar').click(function(){
		if (contador == 1) {
			$('nav').animate({
				left: '0'
			});
			contador = 0;
		} else {
			contador = 1;
			$('nav').animate({
				left: '-100%'
			});
		}
	});
	// Mostramos y ocultamos submenus
	$('.submenu').click(function(){
		$(this).children('.children').slideToggle();
	});
	$('.submenu1').click(function(){
		$(this).children1('.children1').Hide();
	});
 
}
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 joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ocultar un menu movil al dar click en opcion

Publicado por joel (252 intervenciones) el 11/06/2019 08:59:39
Hola Zendi, viendo unicamente el código de jquery, no se muy bien como indicarte ni como probarlo... puedes poner la parte de HTML y CSS del menú para poder probarlo?
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
sin imagen de perfil
Val: 36
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ocultar un menu movil al dar click en opcion

Publicado por zendi (22 intervenciones) el 11/06/2019 14:03:26
Hola Joel, gracias por responder.
Por aqui yo sigo buscando la solucion tambien. Trata de ver cual es el error.
Este es el HTML:

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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="estilos.css">
	<link rel="stylesheet" href="fonts.css">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="main.js"></script>
</head>
<body>
	<header class="header">
 
		<div class="menu_bar" title="Presione para Traer o Retirar el Menú">
			<a href="#menu" class="bt-menu"><span class="icon-menu2">Menu</span></a>
		</div>
 
		<img src="imagenes/m1.png" WIDTH="1000" height="200"/>
			<div id="contenedor">
				<h5 id="contenedor"><span class="icon-phone"></span>0426-6082111 / 0212-6152685</h5>
			</div>
	    <nav>
			 		  <h1 class="color" align="center" >INVERSIONES MAAPE</h1>
 
 
			<ul>
				<li class="submenu">
					<a href="#"><span class="icon-home3"></span>Inicio<span class="caret icon-circle-down"></span></a>
					<ul class="children">
						<li><a href="#Quienes">Quienes Somos<span class="icon-dot"></span></a></li>
						<li><a href="#Vision">Nuestra Visión<span class="icon-dot"></span></a></li>
						<li><a href="#Mision">Nuestra Misión<span class="icon-dot"></span></a></li>
						<li><a href="#Objetivos">Objetivos<span class="icon-dot"></span></a></li>
					</ul>
				</li>
				<li><a href="#"><span class="icon-suitcase"></span>Que es MAAPE?</a></li>
				<li class="submenu">
					<a href="#"><span class="icon-rocket"></span>Modulos<span class="caret icon-circle-down"></span></a>
					<ul class="children">
						<li><a href="#">Limpieza General<span class="icon-dot"></span></a></li>
						<li><a href="#">Plomería<span class="icon-dot"></span></a></li>
						<li><a href="#">Mantenimiento General <span class="icon-dot"></span></a></li>
						<li><a href="#">Electricidad <span class="icon-dot"></span></a></li>
						<li><a href="#">Seguridad y Salud Laboral <span class="icon-dot"></span></a></li>
					</ul>
				</li>
				<li><a href="correomail.php"><span class="icon-earth"></span>Consultas en Línea</a></li>
				<li><a href="#"><span class="icon-mail"></span>Contacto</a></li>
				<li><a href="galeria.html"><span class="icon-video-camera"></span>Galería</a></li>
				<li><a href="#"><span class="icon-database"></span>Login</a></li>
 
 
			</ul>
		</nav>
	</header>
     <main class="main">
 
	<section>
<p class="mappe">
<a name="Quienes">Mappe es una empresa de mantenimiento especializada</a></p>
 		  <p  class="pquienessomos">
 Inversiones MAAPE DINDROM, te ofrece asesoramiento en materia de mantenimiento preventivo.
Somos una familia compuesta por personas responsables, que gracias a la experiencia y conocimiento que tenemos hemos logrado condensar un programa de mantenimiento preventivo efectivo, con excelentes resultados en materia económica y por supuesto física al mejorar el rendimiento de tus equipos, herramientas y elementos.
Para ello contamos con una aplicación para pc, que al configurarla y adaptarla a tus necesidades te ayudara a llevar un mejor control del mantenimiento, así como de la vida útil de todos los elementos que componen tu empresa.
Nuestro programa se estructura en tres etapas.
Antes: es la etapa donde puedes conocer nuestro programa, cotizar presupuestos, hacer preguntas importantes y también podemos hacer una evaluación de tu empresa.
</a></p>
 
 
<p class="mappe">
<a name="Vision">La Visión</a></p>
 		  <p  class="pquienessomos">
 En tiempo de crisis y de problemas económicos, comprar  artículos nuevos se hace cuesta arriba
Nuestra visión es poder llegar con nuestro programa al mayor número posible de empresas y personas, para ayudarlas en el área de mantenimiento preventivo. Queremos que nuestra aplicación MAAPE, que es parte fundamental de nuestro programa cale bien en el mercado y que  sea una herramienta de mucha utilidad y valía.
.</a></p>
 
<p class="mappe">
<a name="Mision">Misión</a></p>
 		  <p  class="pquienessomos">
 Queremos capacitar a las empresas y a su personal sea profesional o no, podrán recibir un entrenamiento que le permitirá realizar mantenimiento preventivo en su área de trabajo, a fin  de que puedan darle un mejor uso a su herramienta de labor y por supuesto alargar su vida útil.
Podrán ver que con productos sencillos de fácil adquisición se puede lograr mucho para que los equipos de trabajos, herramientas y otros estén en buen estado.
Acompañado de nuestra aplicación MAAPE, será sencillo tanto para la empresa como para cada trabajador llevar un control del mantenimiento preventivo de sus equipos de trabajo.
Parte de nuestro lema es “no lo cambies, cuídalo y ahórrate mucho dinero” definen parte de lo que queremos lograr para tu empresa.
Veras que lo que creías que ya no servía al hacerle un buen mantenimiento queda en excelentes condiciones y podrás utilizarlos más en el tiempo, eso te ahorra tiempo y dinero. </a></p>
 
<p class="mappe">
<a name="Objetivos">Objetivos</a></p> <a href="index.html">Volver al Menú <img src="imagenes/attach.jpg" title="Volver al Menú" /></a>
 		  <p  class="pquienessomos">
 Principalmente queremos promover el mantenimiento preventivo, capacitar a otros en el área de mantenimiento, salud laboral, limpieza y uso eficaz de ciertos productos, son parte  de los motores de nuestra empresa, cada trabajador puede aprender de forma sencilla como cuidar el mismo de su área de trabajo, así como una capacitación que le será de utilidad incluso en su vida diaria en casa, no necesitan experiencia en el área, nuestro programa te dará lo necesario para que efectúes un mantenimiento efectivo.
En tiempo de crisis económicas ofrecemos una alternativa eficiente en el área de mantenimiento, que ahorrara mucho dinero y alargara la vida útil de todos los elementos equipos y herramientas de trabajo.
 
</a></p>
	</section>
</main>
	<footer id="main-footer">
		<p>&copy; 2019</p>
	</footer> <!-- / #main-footer -->
</body>
 
</html>


y 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
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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
* {
	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
 
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator
 
{
   display: inline-block;
}
 
body {background:#FEFEFE;
 
}
 
.menu_bar {
	display:none;
}
 
.color{
	color:#ff0000;
}
 
 
 
.mappe{
    font-weight: bold;
    font-size: 20px;
 
}
.pquienessomos{
	text-align: justify;
	text-indent: 50px;
 
}
 
.pvision{
	text-align: justify;
	text-indent: 50px;
 
}
.galeriafix{
	position: fixed;
}
header {
	width:100%;
 
	height: 100%;
/*	padding-top: 0%;
    padding-left: 0%;
    padding-right: 20%;*/
}
 
 
header nav {
	background:#023859;
    height: 100px;
 
}
 
/*.sheader{
	height: 50px;
}*/
 
}
header nav h1 {
    color:  #ff0000;
 
}
 
header nav ul {
	list-style:none;
}
 
header nav ul li {
	display:inline-block;
	position: relative;
 
}
 
header nav ul li:hover {
	background:#ff0000;
}
 
header nav ul li a {
	color:#fff;
	display:block;
	text-decoration:none;
	padding: 20px;
 
}
 
header nav ul li a span {
	margin-right:10px;
	color: white;
}
 
header nav ul li:hover .children {
	display:block;
}
 
header nav ul li .children {
	display: none;
	background:#011826;
	position: absolute;
	width: 150%;
	z-index:1000;
}
 
header nav ul li .children li {
	display:block;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,.5);
}
 
header nav ul li .children li a {
	display: block;
}
 
header nav ul li .children li a span {
	float: right;
	position: relative;
	top:3px;
	margin-right:0;
	margin-left:10px;
}
 
header nav ul li .caret {
	position: relative;
	top:3px;
	margin-left:10px;
	margin-right:0px;
				padding-bottom: 30px;
 
}
 
	form {
		margin: 1em auto;
	    text-align: center;
     }
	span{
	  color: #F60;
	  font-size: 1.5 em;
	}
 
	section{
			text-align: justify;
			text-indent: 50px;
			float:left;
 
	}
footer {
/*	background:#16a085;
*/	color:#023859;
	width:100%;
	height: 100%;
    text-align: center;
}
 
@media screen and (max-width: 800px) {
	body {
		padding-top:80px;
	}
 
	.menu_bar {
		display:block;
		width:500%;
		position: fixed;
		top:0;
		background:#3837E6; /*se diseñó con el color rojo#E6344A;*/
	}
 
	.menu_bar .bt-menu {
		display: block;
		padding: 50px;
		color: #fff;
		overflow: hidden;
		font-size: 80px;
		font-weight: bold;
		text-decoration: none;
		max-width: 800px;
		overflow: scroll;
 
	}
 
	.menu_bar span {
		float: right;
		font-size: 80px;
	}
 
	header nav {
		width: 80%;
		height: calc(100% - 80px);
		position: fixed;
		right:100%;
		margin: 0;
		overflow: scroll;
/*		transition: 0.1s;
*/	}
 
	header nav ul li {
		display: block;
		border-bottom:1px;
	  solid rgba(255,255,255,.5);
	}
 
	header nav ul li a {
		display: block;
	}
 
	header nav ul li:hover .children {
		display: none;
			  border-radius: 1px;
	}
 
	header nav ul li .children {
		width: 100%;
		position: relative;
	}
 
	header nav ul li .children li a {
		margin-left:20px;
		border-right-width: 2px;
 
	}
 
	header nav ul li .caret {
		float: right;
	}
}
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

Ocultar un menu movil al dar click en opcion

Publicado por Cristian (1 intervención) el 25/05/2022 04:25:52
como lo solucionaste?
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