HTML - Menu aparece activo en tablets y smartphones (AYUDA)

 
Vista:
sin imagen de perfil

Menu aparece activo en tablets y smartphones (AYUDA)

Publicado por Gher (5 intervenciones) el 24/02/2017 16:27:22
Hola a todos:

Resulta que el problema que tengo es que el menu de mi página aparece activo en las versiones para tablet y smartphone, al decir activo es que todo el menu se desplega sobre mi pagina de entrada y lo que deseo es que este se active cuando el cliente lo necesite.

De antemano, gracias por la ayuda!
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
sin imagen de perfil

Menu aparece activo en tablets y smartphones (AYUDA)

Publicado por Gher (5 intervenciones) el 24/02/2017 17:15:19
Esta es la sección del Style:

.responsive-menu {
display: block;
cursor: wait;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;

21cuwwp
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
Imágen de perfil de Alejandro
Val: 100
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Menu aparece activo en tablets y smartphones (AYUDA)

Publicado por Alejandro (27 intervenciones) el 24/02/2017 23:58:51
Hola Gher lo que debes hacer es utilizar media queries. Es decir por ejemplo:

1
2
3
@media screen and (max-width: 768px) { // tamaño maximo tablet
  /* estilos aplicados en tamaño movil */
}

o que tus etilos generales sean para movil y tablet la siguiente media querie se aplique para desktop

1
2
3
@media screen and (min-width: 768px) {
  /* estilos aplicados a partir de tamaño desktop */
}

Luego cuando te refieres a activar esa parte la realizas con javascript??.


Comentanos. Un Saludo.
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

Menu aparece activo en tablets y smartphones (AYUDA)

Publicado por Gher (5 intervenciones) el 25/02/2017 00:07:20
Gracias Alejandro, fijate que este tema fue por solicitud del cliente yo generalmente manejo gestores de contenido, desconozco Html solo lo básico creo. pero el tema es que el menu en la version desktop esta genial pero en smartphones aparece activo y cubre la mayor parte de la pagina... es decir como con el click en el menu por default y se muestra como en la imagen, cuando solo deberia de aparecer la palabra menu para hacer click en ella y ver el menu por consiguiente. Con las dimensiones esta todo genial, gracias.

Gracias de antemano por el apoyo Alejandro.
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
Imágen de perfil de Alejandro
Val: 100
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Menu aparece activo en tablets y smartphones (AYUDA)

Publicado por Alejandro (27 intervenciones) el 26/02/2017 01:07:07
Hola de nuevo Gher, si pudieras compartir el código html y css para poder mirarlo estaria bueno. Capaz que se soluciona agregando un posicionamiento en css.

Un Saludo.
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

Menu aparece activo en tablets y smartphones (AYUDA)

Publicado por Gher (5 intervenciones) el 28/02/2017 19:08:15
Gracias por tu ayuda, no sabes cuanto lo agradezco

INDEX:

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
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title> Home </title>
        <meta name="description" content="" />
        <meta name="author" content="" />
        <link rel="shortcut icon" href="images/elements/favicon.png" type="image/x-icon" />
        <!-- ======================================================================
                                    Mobile Specific Meta
        ======================================================================= -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <!-- ======================================================================
                                    Style CSS + Google Fonts
        ======================================================================= -->
        <link href='http://fonts.googleapis.com/css?family=Roboto:100,400,400italic,300,300italic,700,700italic,900' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/swipebox.css" />
        <link rel="stylesheet" href="css/bootstrap.css" />
        <link rel="stylesheet" href="css/style.css" />    </head>
    <body class="background-model-1">
 
 
        <!-- ======================================================================
                                        START HEADER
        ======================================================================= -->
        <div class="header-model-1">
            <div class="header-top-line">
                <div class="container">
                    <ul>
                        <li class="header-mail"><a href="mailto:[email protected].com"><i class="icon-42" title="42"></i> [email protected].com.gt</a></li>
                        <li class="header-phone"><i class="icon-298" title="298"></i> (502) 2221-6718</li>
 
                        <li class="header-social"><a href="https://www.linkedin.com/in/advisor-publicity-77615b12a/"><i class="socials-linkedin"></i></a></li>
                        <li class="header-social"><a href=""></i></a></li>
                    </ul>
                    <p></p>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="header-logo">
                            <a href="index.html"><img src="images/elements/header-logo.png" alt="" /></a>
                        </div>
                    </div>
                    <div class="col-md-8">
                       <div class="menu">
                            <div class="responsive-menu">Menu</div>
                            <ul>
                                <li><a href="index.html">Home</a></li>
                                <li><a href="nosotros.html">¿Quiénes Somos?</a></li>
                                <li><a href="">Comunicación</a>
                                    <ul>
                                        <li><a href="Relaciones con Medios.html">Relaciones con Medios</a></li>
                                        <li><a href="Imagen Corporativa.html">Imágen Corporativa</a></li>
                                        <li><a href="Comunicacion Estrategica.html">Comunicación Estratégica</a></li>
                                    </ul>
                                </li>
                                <li><a href="practica.html">Áreas de Práctica</a></li>
                                <li><a href="galerias.html">Galerías</a></li>
                                <li><a href="contacto.html">Contacto</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ======================================================================
                                        END HEADER
        ======================================================================= -->
 
 
 
 
 
 
 
        <!-- ======================================================================
                                        START CONTENT
        ======================================================================= -->
        <div class="content">
            <!-- START SLIDER -->
            <div class="the-slider" data-tesla-plugin="slider" data-tesla-item=".slide" data-tesla-next=".slide-right" data-tesla-prev=".slide-left" data-tesla-container=".slide-wrapper">
                <div class="slide-arrows">
                    <div class="slide-left"></div>
                    <div class="slide-right"></div>
                </div>
                <ul class="slide-wrapper" style="position: relative; height: 488px;">
                    <li class="slide">
                        <img src="images/slider/slide-3.jpg" class="slider-image" alt="sport 6" />
                    </li>
                    <li class="slide">
                        <img src="images/slider/slide-2.jpg" class="slider-image" alt="sport 6" />
                    </li>
                    <li class="slide">
                        <img src="images/slider/slide-1.jpg" class="slider-image" alt="sport 6" />
                    </li>
                </ul>
                <ul class="the-bullets-dots" data-tesla-plugin="bullets">
                    <li class="active"><span></span></li>
                    <li><span></span></li>
                    <li><span></span></li>
                </ul>
            </div>
            <!-- END SLIDER -->
 
            <!-- START SERVICES TYPE 2 -->
            <div class="services-type-2">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="service">
                              <div class="service-icon color-1"><i class="icon-25" title="25"></i></div>
                                <h3>Relaciones con medios</h3>
                                <p>Creemos que escucharle activamente -y también a los medios- facilitarán la tarea de comunicar adecuadamente su mensaje. Nosotros podemos ser su aliado en comunicación.</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="service">
                                <div class="service-icon color-2"><i class="icon-71" title="71"></i></div>
                                <h3>Imágen Corporativa</h3>
                                <p>Forma en que se percibe una compañía, es la imagen de lo que la compañía significa, es un ejercicio a la percepción. Debe transmitir la personalidad de tu empresa. </p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="service">
                                <div class="service-icon color-3"><i class="icon-26" title="26"></i></div>
                                <h3>Comunicación Estratégica</h3>
                                <p>Proyecta la identidad de las organizaciones en una imagen que entregue confianza en su entorno y adhesión en su público objetivo.</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="service">
                                <div class="service-icon color-4"><i class="icon-97" title="97"></i></div>
                                <h3>Marketing</h3>
                                <p>Análisis del comportamiento de los mercados y de los consumidores. Estudiamos la gestión comercial de su empresas para captar, retener y fidelizar a los clientes.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END SERVICES TYPE 2 -->
 
 
            <div class="buy-theme">
                <div class="container">
                    <div class="col-md-9">
                        <h2>Galería de Proyectos</h2>
                        <p>Visíte nuestra galería de imágenes para conocer los diferentes proyectos desarrollados con nuestros clientes. Desde ya esperamos que su empresa forme parte de ella.</p>
                    </div>
                    <div class="col-md-3">
                        <div class="buy-theme-button">
                            <a href="galerias.html" class="button-2">Visitar</a>
                        </div>
                    </div>
                </div>
            </div>
 
 
 
        </div>
        <!-- ======================================================================
                                        END CONTENT
        ======================================================================= -->
 
 
 
 
 
 
        <!-- ======================================================================
                                        START FOOTER
        ======================================================================= -->
        <div class="footer-model-1 footer-color-dark">
            <div class="footer-bottom-line">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="footer-copyright">
                                Desarrollado por <a href="" target="_blank"></a>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <ul class="footer-socials">
                            	<li><a href="https://www.linkedin.com/in/advisor-publicity-77615b12a/"><i class="socials-linkedin"></i></a></li>
                                <li><a href="https://www.facebook.com/Advisor-Publicity-235066706647166/?fref=ts"><i class="socials-facebook"></i></a></li>
 
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <!-- ======================================================================
                                        END FOOTER
        ======================================================================= -->
 
 
 
 
 
 
        <!-- ======================================================================
                                        START SCRIPTS
        ======================================================================= -->
        <script src="js/modernizr.custom.63321.js" type="text/javascript"></script>
        <script src="js/jquery-1.10.0.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.js" type="text/javascript"></script>
        <script src="js/placeholder.js" type="text/javascript"></script>
        <script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
        <script src="js/masonry.pkgd.js" type="text/javascript"></script>
        <script src="js/jquery.swipebox.min.js" type="text/javascript"></script>
        <script src="js/farbtastic/farbtastic.js" type="text/javascript"></script>
        <script src="js/options.js" type="text/javascript"></script>
        <script src="js/plugins.js" type="text/javascript"></script>
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
        <!-- ======================================================================
                                        END SCRIPTS
        ======================================================================= -->
    </body>
</html>
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
Imágen de perfil de Alejandro
Val: 100
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Menu aparece activo en tablets y smartphones (AYUDA)

Publicado por Alejandro (27 intervenciones) el 01/03/2017 01:29:00
Hola Gher cambie la ultima media querie:

html
CAMBIA EL MENU POR ESTE
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
<div class="container" style="">
            <div class="row">
                <div class="col-md-4">
                    <div class="header-logo">
                        <a href="index.html"><img src="images/elements/header-logo.png" alt="" /></a>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="responsive-menu" id="toggle-menu">Menu</div>
                    <div class="menu" id="main-menu">
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="nosotros.html">¿Quiénes Somos?</a></li>
                            <li class="toggle-sumbenu"><a href="">Comunicación</a>
                                <ul class="submenu">
                                    <li><a href="Relaciones con Medios.html">Relaciones con Medios</a></li>
                                    <li><a href="Imagen Corporativa.html">Imágen Corporativa</a></li>
                                    <li><a href="Comunicacion Estrategica.html">Comunicación Estratégica</a></li>
                                </ul>
                            </li>
                            <li><a href="practica.html">Áreas de Práctica</a></li>
                            <li><a href="galerias.html">Galerías</a></li>
                            <li><a href="contacto.html">Contacto</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

styles.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
@media (max-width: 991px) {
    .container {
        position: static;
    }
    .header-model-1 .header-top-line ul {
        float: none;
    }
    .responsive-menu {
        display: block;
        cursor: crosshair;
        font-weight: 700;
        font-size: 14px;
        text-transform: uppercase;
    }
    .header-model-1 .menu>ul {
        display: none;
    }
    .header-model-1 .header-top-line ul,
    .header-model-1 .header-top-line ul li.header-cart,
    .header-model-1 .header-top-line ul li.header-language,
    .header-model-1 .header-top-line ul li.header-phone,
    .header-model-1 .header-top-line ul li.header-mail {
        height: auto;
    }
    /********************* MENU *********************/
    .header-model-1 .header-top-line ul {
        float: none;
    }
    .responsive-menu {
        display: block;
        cursor: pointer;
        font-weight: 700;
        font-size: 14px;
        text-transform: uppercase;
    }
    .header-model-1 .menu {
        position: absolute;
        top: 20px;
        left: -1000px;
        width: 100%;
        min-height: 100vh;
        display: block;
        z-index: 10000;
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out;
        background-color: #000;
    }
    .submenu {
        position: relative;
        background-color: #000!important;
    }
    .submenu li {
        background-color: #000!important;
    }
    .submenu.active {
        display: block;
    }
    .header-model-1 .menu>ul {
        display: block;
        background-color: none;
    }
    .header-model-1 .menu.active {
        left: 0;
        top: 20px;
    }
    .header-model-1 .menu ul li a {
        background-color: #000 !important;
        text-align: left;
        color: #FFF;
    }
    .header-model-1 .header-top-line ul {
        text-align: center;
        border: 0;
    }
    .footer-model-1 .footer-bottom-line .footer-socials,
    .header-model-1 .header-top-line p {
        text-align: center;
    }
    .footer-model-1 .footer-bottom-line .footer-copyright a,
    .footer-model-1 .footer-bottom-line .footer-copyright {
        text-align: center;
        margin-bottom: 10px;
    }
    .header-model-1 .menu {
        text-align: center;
        margin-bottom: 20px;
    }
    .header-model-1 .header-logo {
        text-align: center;
    }
    .header-model-1 .menu ul li a {
        border-radius: 0;
    }
    .header-model-1 .menu ul li ul li,
    .header-model-1 .menu ul li ul li ul li,
    .header-model-1 .menu ul li {
        display: block;
        width: 100%;
        margin: 0;
    }
    .header-model-1 .menu ul li ul li ul li ul,
    .header-model-1 .menu ul li ul li ul,
    .header-model-1 .menu ul li ul {
        display: block !important;
        margin: 0 !important;
        left: 0;
        position: relative;
        width: 100%;
        text-align: center;
    }
    .header-model-1 .header-search {
        text-align: center;
        margin-bottom: 20px;
    }
    .header-model-1 .header-search .search-line {
        width: 100%;
    }
    .header-model-1 .header-search button i {
        margin-right: 0;
    }
}
SCRIPT
Agrega este script al final antes de la etiqueta de cierre del body

1
2
3
4
5
6
7
8
9
10
<script>
        (function(d) {
            var menu = d.getElementById('main-menu');
            var toggle = d.getElementById('toggle-menu');
 
            toggle.addEventListener('click', function(e) {
                menu.classList.toggle('active');
            });
        })(document);
    </script>

Comenta si te sirvio. Un Saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Menu aparece activo en tablets y smartphones (AYUDA)

Publicado por Gher (5 intervenciones) el 01/03/2017 02:27:16
Alejandro no sabes cuanto te agradezco, te debo una caja de cervezas! Espero poder compensar esta ayuda algun día.
Todo sirvio de maravilla.

Gracias nuevamente! 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