JQuery - Menu Swipeable

   
Vista:

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.

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Menu Swipeable

Publicado por arck (21 intervenciones) el 17/02/2016 14:10:01
si lo quieres hacer asi, creo que deberias hacerlo por css no por jquery.
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