no se como ocultar el menu.
Publicado por zendi (22 intervenciones) el 10/06/2019 18:02:54
Necesito su ayuda por favor ya tengo los codigos para un menu y funciona,pero como haria para que cada vez que yo escoja una opcion del menu desaparezca para que el usuario pueda leer por ej., INICIO tiene varias opciones pero el menu mismo se queda abierto y no permite ver lo seleccionado.
este es el js:
y este el html:
este es el js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(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();
});
}y este 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
<!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>
<div class="menu_bar" title="Presione para Traer o Retirar el Menú">
<a href="#menu" class="bt-menu"><span class="icon-menu"></span>Menú</a>
</div>
<img src="imagenes/m1.png" WIDTH="1000" height="200"/>
<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-mail"></span>Galería</a></li>
<li><a href="#"><span class="icon-mail"></span>Login</a></li>
</ul>
</nav>
</header>
<section>
<p class="mappe">
<a name="Quienes">Mappe es una empresa de mantenimiento especializada</a></p>
<p class="pquienessomos">
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</a></p>
<p class="mappe">
<a name="Vision">La Visión</a></p>
<p class="pquienessomos">
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum,</a></p>
<p class="mappe">
<a name="Mision">Misión</a></p>
<p class="pquienessomos">
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum,
</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">
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum,
</a></p>
</section>
</body>
<footer>
<div>
<p>Copyright - Maape 2019 </p>
</div>
</footer>
</html>
- menu.rar(315,4 KB)
Valora esta pregunta
0