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

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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

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 clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 12

Val: 100

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:

@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

@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

Comentar

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

Comentar

Pos: 12

Val: 100

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

Comentar

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:

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:info@advisorpublicity.com"><i class="icon-42" title="42"></i> info@advisorpublicity.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>

css.rar(29,9 KB)

Valora esta respuesta

Comentar

Pos: 12

Val: 100

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

<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

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

<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

Comentar

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

Comentar

Regresar a la pagina anterior en el mismo punto desde donde accedí a otra página

Problema al pasar de mobil a desktop