Menu Swipeable
Publicado por Alvaro (1 intervención) el 09/02/2016 10:30:54
Buenos días, tengo una duda con un menú swipeable que estoy haciendo con jquery.
He mirado algo por ahí ya que estoy empezando con esto y os comento lo que me pasa. Lo muestro y lo oculto con el "toggle" y funciona bien. Lo que hago es detectar el click en una capa y me muestra y cierra el menú perfectamente. Pero quiero que por ejemplo cuando haga click en el contenido de la web, es decir fuera del menú, me cierre el menú. Hago que me cierre y me abra al hacer click pero lo que quiero es que solo me cierre y no se como hacerlo.
Os muestro lo que tengo en el código.
esto el js. y ahora el css
y en el body tengo esto:
He mirado algo por ahí ya que estoy empezando con esto y os comento lo que me pasa. Lo muestro y lo oculto con el "toggle" y funciona bien. Lo que hago es detectar el click en una capa y me muestra y cierra el menú perfectamente. Pero quiero que por ejemplo cuando haga click en el contenido de la web, es decir fuera del menú, me cierre el menú. Hago que me cierre y me abra al hacer click pero lo que quiero es que solo me cierre y no se como hacerlo.
Os muestro lo que tengo en el código.
1
2
3
4
5
$(document).ready(function() {
$("[data-toggle]").click(function() {
var toggle_el = $(this).data("toggle");
$(toggle_el).toggleClass("open-sidebar");
});
esto el js. y ahora el css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
position: relative;height: 100%;
width: 100%;
left: 0;-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
-webkit-overflow-scrolling: touch;
}.container.open-sidebar {
left: 240px;y en el body tengo esto:
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
<div class="container">
<div id="sidebar">
<div class="capamenu">
<div style="position:relative; left:50%; margin-left:-75px; padding-top:10px;"><img src="images/logo.png" width="150px" /></div>
<ul>
<li><a class="smoothScroll" href="#home">HOME</a></li>
<li><a class="smoothScroll" href="#quien">QUIÉNES SOMOS</a></li>
<li><a class="smoothScroll" href="#tatoo">TATTOO</a></li>
<li><a class="smoothScroll" href="#piercing">PIERCING</a></li>
<li><a class="smoothScroll" href="#eldirector">MICRODERMAL</a></li>
<li><a class="smoothScroll" href="#contacto">ELIMINACIÓN DE TATUAJES</a></li>
<li><a class="smoothScroll" href="#galeria">DONDE ESTAMOS</a></li>
</ul>
</div>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<div class="capabotonmenu">
<a href="#capamenu" data-toggle=".container" id="sidebar-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
</div>
<div class="content">
.................... aquí va contenido
</div>
Valora esta pregunta
0