Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » No consigo ocultar la capa por defecto

JQuery - No consigo ocultar la capa por defecto

Volver
Nuevo Tema
<<>>
 
Vista:

No consigo ocultar la capa por defecto

Publicado por Byeve (2 intervenciones) el 22/04/2018 19:09:39
Hola Amigos,

Estoy volviendome loca con un asunto. Tengo un menú lateral en mi web, que aparece y desaparece con una función toggle en Jquery adherida aún botón.

Click -> Desaparece y Clic -> aparece. Así sucesivamente.

Bien, mi problema es que la capa que tiene el menú está visible por defecto. Sin embargo no consigo que desaparezca por defecto.

He probado con el código css los displays none, visibility, etc. Pero nada eso funciona, ya que si las aplico, la función funciona correctamente pero los cambios de estilo no los aplica. La función, agrega una class por defecto que es "menu-open".

Muchas Gracias de antemano, y si necesitáis más info decidme. Gracias.

Os dejo la funcion:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("#menu-toggle").on('click', function(e) {
    e.preventDefault();
    $(".side-nav").toggleClass("toggled");
});
 
$('.side-nav .sidebar-inner li.dropdown').children('ul').hide();
 
$('.side-nav .sidebar-inner li a').click(function(event) {
    event.stopPropagation();
    $(this).find(".side-nav .sidebar-inner li a").removeClass('menu-open');
    $(this).parents(".side-nav .sidebar-inner li a").addClass('menu-open');
    $(this).toggleClass('menu-open');
    $(this).parent().children('ul.side-sub-menu').toggle(200);
});


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
<div class="side-nav">
    <nav class="sidebar-inner light sidebar-nav">
        logo
        </a>
        <ul class="sidebar-menu">
            <li class="dropdown first-level">
                <a href="#Home/">Home</a>
            </li>
            <!-- /dropdown -->
 
            <li class="dropdown first-level">
                <a href="#sobre-nosotros/">Sobre WHSW</a>
 
            </li>
            <!-- /dropdown -->
 
            <li class="dropdown first-level">
                <a href="#cosmetica-y-productos/">Marcas</a>
            </li>
            <!-- /dropdown -->
 
            <li class="dropdown first-level">
                <a href="#trabaja-con-nosotros/">Trabaja con nosotros</a>
            </li>
            <!-- /dropdown -->
 
            <li class="dropdown first-level">
                <a href="#contacto/">Contacto</a>
            </li>
            <!-- /dropdown -->
        </ul>
        <!-- /side-bar-menu -->
    </nav>
</div>
<!-- /sidebar-inner -->
<!-- Sidebar Toogle -->
    <a class="sidebar-toggle" href="#menu-toggle" id="menu-toggle"><i class="ti-menu"></i></a>
<!-- /Sidebar Toogle -->

y los 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
/* Toggle Styles */
 
.sidebar-toggle {
    position: fixed;
    top: 45px;
    right: 45px;
    font-size: 20px;
    z-index: 99;
    color: #777;

}
 
.side-nav {
    padding-left: 0px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
 
.side-nav.toggled {
    padding-left: 300px;
}
 
.side-nav.toggled .sidebar-inner {
    opacity: 1;
    visibility: hidden
 
}
 
.sidebar-inner {
    z-index: 1000;
    position: fixed;
    left: 300px;
    width: 0;
    height: 100%;
    margin-left: -300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px 30px;
    border-right: 1px solid #e9e9e9;

    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
 
.sidebar-inner.light,
.sidebar-inner.light .sidebar-bottom {
    background-color: #fff

}
 
.sidebar-inner.light ul.sidebar-menu li a {
    color: #3e3e3e

}
 
.sidebar-inner.dark,
.sidebar-inner.dark .sidebar-bottom {
    background-color: #121212

}
 
.sidebar-inner.dark ul.sidebar-menu li a {
    color: #999

}
 
.sidebar-inner,
.side-nav.toggled .sidebar-inner {
    width: 300px;
}
 
#page-content-wrapper {

    width: 100%;
    padding: 15px;
}
 
.side-nav.toggled #page-content-wrapper {

    position: absolute;
    margin-right: -300px;
}
 
.side-nav {
    padding-left: 0px;
}
 
.side-nav.toggled {
    padding-left: 0;
}
 
.side-nav.toggled .sidebar-inner {
    width: 0;
}
 
.sidebar-menu {
    width: 250px;
    overflow-y: auto;
}
 
.sidebar-inner .side-sub-menu {
    display: none;
}
 
.side-sub-menu li.openul.side-sub-menu {
    display: block
}
 
.sidebar-inner ul.side-sub-menu li a,
.sidebar-inner ul.sidebar-menu li a {
    display: inline-block;
    width: 100%;
    text-indent: 30px;
    line-height: 3.5;
    font-weight: bold;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}
 
.sidebar-inner ul.sidebar-menu li a:hover {
    color: #ECB510

}
 
.sidebar-inner .first-level ul li a {
    padding-left: 15px;
    line-height: 3;
}
 
.sidebar-inner .second-level ul li a {
    padding-left: 30px
}
 
.sidebar-inner .dropdown>a:after {
    position: absolute;
    content: "+";
    right: 25px
}
 
.sidebar-inner .dropdown>a.menu-open:after {
    position: absolute;
    content: "-";
}
 
.sidebar-inner .sidebar-bottom {
    bottom: 0;
    min-height: 100px;
    display: inline-block;
    width: 100%;
    position: relative;
}
 
.sidebar-inner.dark .sidebar-bottom {
    border-top: 1px solid #323232;

}
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 santi
Val: 162
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

No consigo ocultar la capa por defecto

Publicado por santi (55 intervenciones) el 24/04/2018 19:48:49
Hola,

la verdad que no me he leído el código del todo jeje pero prueba con esto:

html
1
<div class="side-nav menu-open"><!-- añade directamente la clase menu-open -->

jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
jQuery(document).ready(function($) {
	$("#menu-toggle").on('click', function(e) {
	    e.preventDefault();
	    var sidebar = $(".side-nav");
	    var sideWidth = $(".side-nav").width();//anchura del nav

	    if(sidebar.hasClass('menu-open')){
	    	//el menú está abierto

	    	//enviamos el menú a la izquierda del documento con -la_anchura_del_nav px

	    	$(sidebar).animate({'margin-left':'-'+sideWidth+'px'});//si es una posición aboluta solo añade "left"

	    	//quitamos la clase menu-open

	    	$(sidebar).removeClass('menu-open');
	    }else{
	    	//al revés

	    	$(sidebar).animate({'margin-left':sideWidth+'px'});//si es una posición aboluta solo añade "left"

	    	//añadimos la clase

	    	$(sidebar).addClass('menu-open');
	    }
	});
});

Prueba a ver y comentas ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

No consigo ocultar la capa por defecto

Publicado por Eva (2 intervenciones) el 24/04/2018 21:46:39
Ay gracias! Lo.intentaré a ver si tengo solución gracias!
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