Ayuda al crear un menu horizontal responsive

  • Autor Autor Nemessiss
  • Fecha de inicio Fecha de inicio
N

Nemessiss

Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Saludos Betas, Tengo un problema y es que puse un menu responsive en mi pagina web pero cuando visualizo la pagina desde un celular me sale el boton para que salga el menu ( hasta alli exelente) pero el caso es que cuando le doy para que me aparesca el menu este abre pero inmediatamente se cierra lo cual es obvio que no quiero


Quisiera saber como hago para arreglar eso aca les dejo el codigo del menu.php

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<meta http-equiv="Content-Type" content="text/javascript; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="no-cache">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta name="title" content="ENVIEXPRESS" />
<meta name="Description" content="ENVIEXPRESS - Envios a nival nacional" >
<meta name="Keywords" content="envios, paquetes, mensajeros, nacional, caracas" >
<meta name="StartPage" content="PageName" />
<meta name="Author" content="SIRCO,C.A." />
<meta name="copyright" content="© 2014-2018 ENVIEXPRESS, C.A. All rights reserved." />
<meta name="robots" content="NOYDIR" />
<meta name="robots" content="NOODP" />

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" type="text/css" href="estilos.css"  />
<link rel="stylesheet" type="text/css" href="recursos/colorbox.css" />
<link rel="stylesheet" type="text/css" href="recursos/bootstrap.css">
<link rel="stylesheet" href="fontello.css">

	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="js/main.js"></script>
<script type="text/javascript" src="recursos/jquery.js" ></script>
<script type="text/javascript" src="recursos/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="recursos/jquery.maskedinput.js"></script>
<script type="text/javascript" src="recursos/jquery.price_format.2.0.min.js"></script>
<script type="text/javascript" src="recursos/bootstrap.min.js"></script>
<script type="text/javascript" src="recursos/jquery.colorbox.js"></script>
<script>
$(document).ready(function() {
            $(".ajax").colorbox();
});
</script>
<script>
var num = 150; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});
</script>
<title>EnviExpress Inversiones</title>
</head>
<div class="row" style="background-color: #DDDDDD;">
    <div class="col-xs-12 col-lg-5 text-center">
    <img src="Logo.png" class="img-fluid" alt="Responsive image"/>
    </div>
    <div class="col-xs-12 col-lg-3 text-center">
    <br /><br /><marquee><h2 class="text-success"> La soluci&oacute;n a tu tiempo.</h2></marquee>
    </div>
    <div class="col-xs-12 col-lg-4 text-center">
    <br /><img src="https://forobeta.com/images/llamada.png" width="48" height="40" border="0" alt="" />
    Llamada Gratuita: 0800-000000<br /><br /><br />
    <img src="recursos/tiempo.gif" width="293" height="43" border="0" alt="" />
    </div>
</div>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
     <a class="nav-link" href="index.php">Inicio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="nosotros.php">Nosotros</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Servicios
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="express.php">Express</a>
          <a class="dropdown-item" href="express24.php">24 horas</a>
          <a class="dropdown-item" href="domiciliario.php">Domiciliado</a>
          <a class="dropdown-item" href="internacional.php">Internacional</a>
          <a class="dropdown-item" href="carteroexpress.php">Sobre-Express</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="calculo_envio.php">Calculadora de envio</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Productos
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
          <a class="dropdown-item" href="productos/productos.php">Cat&aacute;logo de productos</a>
          <a class="dropdown-item" href="silvercoin.php">SilverCoin</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="agencias.php">Agencias</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="registro.php">Registrarse</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contactos.php">Contacto</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="como.php">&iquest;C&oacute;mo comprar?</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Fundacion.php">Fundaci&oacute;n</a>
      </li>
    </ul>
  </div>
</nav>

Y POR ACA LES DEJO EL DEL ESTILOS.CSS

PHP: 
.navbar {
  font-family:  Arial;
  font-size: 14;
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.navbar-nav {
  margin: 7.5px -15px;
}
.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.navbar-toggle:focus {
  outline: 0;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}   [MENTION=16931]medi[/MENTION]a (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}
  .dropup,
.dropdown {
  position: relative;
}
.dropdown-toggle:focus {
  outline: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;

  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #337ab7;
  outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #777;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}
.dropdown-menu-right {
  right: 0;
  left: auto;
}
.dropdown-menu-left {
  right: auto;
  left: 0;
}
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777;
  white-space: nowrap;
}
.dropdown-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 990;
}
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  content: "";
  border-top: 0;
  border-bottom: 4px dashed;
  border-bottom: 4px solid;
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 2px;
}   [MENTION=16931]medi[/MENTION]a (min-width: 768px) {
  .navbar-right .dropdown-menu {
    right: 0;
    left: auto;
  }
  .navbar-right .dropdown-menu-left {
    right: auto;
    left: 0;
  }
}
   [MENTION=16931]medi[/MENTION]a (min-width: 768px) {
  .navbar-right .dropdown-menu {
    right: 0;
    left: auto;
  }
  .navbar-right .dropdown-menu-left {
    right: auto;
    left: 0;
  }
}

Tambien dejar en claro que esta web no lo e echo yo, solo lo estoy editando

Espero puedan ayudarme se los agradezco ante mano
 
Última edición:
El problema no creo que sea el html del menu, si no el css, si solo copiaste tal cual el código html, pero no copiaste los estilos es normal que no salga bien. Busca los estilos de ese menú en la pagina de donde lo copiaste.
 
Stron dijo:
El problema no creo que sea el html del menu, si no el css, si solo copiaste tal cual el código html, pero no copiaste los estilos es normal que no salga bien. Busca los estilos de ese menú en la pagina de donde lo copiaste.
Hacer clic para expandir...

Si habia introducido el css y tambien el js y los iconos pero quedo como mencione.

Bueno pero ahora el problema es otro y es que indagando por el codigo de la pagina encontre un boton para el menu responsive que le habian creado ( como explico en el tema la web no lo cree yo solo me mandaron a arreglarla ) que estaba inactivo por un <!----- tan solo se lo quite y aparece el boton, acabo de editar el tema dando detalle del asunto. Cualquier solucion que tengas te la agradecería
 
Nemessiss dijo:
Si habia introducido el css y tambien el js y los iconos pero quedo como mencione.

Bueno pero ahora el problema es otro y es que indagando por el codigo de la pagina encontre un boton para el menu responsive que le habian creado ( como explico en el tema la web no lo cree yo solo me mandaron a arreglarla ) que estaba inactivo por un <!----- tan solo se lo quite y aparece el boton, acabo de editar el tema dando detalle del asunto. Cualquier solucion que tengas te la agradecería
Hacer clic para expandir...

lo del botón, es un conflicto con el jquery, tienes mas de 1 etiqueta de jquery.js y están haciendo conflicto entre ellas.
 
Stron dijo:
lo del botón, es un conflicto con el jquery, tienes mas de 1 etiqueta de jquery.js y están haciendo conflicto entre ellas.
Hacer clic para expandir...

Pues eh quitado todas dejando 1 sola etiqueta y asi susesivamente con todas y el problema permanece, el boton aparece bien pero al darle click aparece el menu y desaparece al instante :s
 
[MENTION=197981]Nemessiss[/MENTION] hola estimado podrías proporcionarme la URL donde lo estas trabajando para analizarlo o lo estas realizando en un localhost?
 
4ngeluxpunk dijo:
[MENTION=197981]Nemessiss[/MENTION] hola estimado podrías proporcionarme la URL donde lo estas trabajando para analizarlo o lo estas realizando en un localhost?
Hacer clic para expandir...

Esta es la url del sitio en la que estoy trabajando: EnviExpress Inversiones

Cualquier Codigo que necesites me avisas, y si tienes alguna solucion que puedas brindarme lo agradecería un monton:encouragement:
 
[MENTION=197981]Nemessiss[/MENTION]

qué código estas usando para abrir y cerrar el menú en la versión móvil? Lo más seguro es que sea ese el problema.
 
Kuroneko-kun dijo:
[MENTION=197981]Nemessiss[/MENTION]

qué código estas usando para abrir y cerrar el menú en la versión móvil? Lo más seguro es que sea ese el problema.
Hacer clic para expandir...

Como dije antes ese codigo no es mio, solo estoy editando la web y por lo que vi el codigo que se utilizo para crear dicho menu fueron css, html, jqueri. o eso creo de todas formas en el codigo de arriba se puede ver mas o menos. pero sospecho que el problema lo esta causando el jqueri, si tienes alguna idea no dudes en responder te lo agradeceria un monton:encouragement:
 
Nemessiss dijo:
Como dije antes ese codigo no es mio, solo estoy editando la web y por lo que vi el codigo que se utilizo para crear dicho menu fueron css, html, jqueri. o eso creo de todas formas en el codigo de arriba se puede ver mas o menos. pero sospecho que el problema lo esta causando el jqueri, si tienes alguna idea no dudes en responder te lo agradeceria un monton:encouragement:
Hacer clic para expandir...

Pues, acabo de ver el código que dejas en el post y el de tu web y no encuentro por ningún lado el código que muestre y oculte el menú en la versión móvil. :ambivalence:
 
Kuroneko-kun dijo:
Pues, acabo de ver el código que dejas en el post y el de tu web y no encuentro por ningún lado el código que muestre y oculte el menú en la versión móvil. :ambivalence:
Hacer clic para expandir...

El codigo en el menu.php es este
PHP: 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

Y el codigo en el css es este otro
PHP: 
.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.navbar-toggle:focus {
  outline: 0;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}    [MENTION=16931]medi[/MENTION]a (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}

o almenos eso creo :distant:
 
Nemessiss dijo:
El codigo en el menu.php es este
PHP: 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

Y el codigo en el css es este otro
PHP: 
.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.navbar-toggle:focus {
  outline: 0;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}    [MENTION=16931]medi[/MENTION]a (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}

o almenos eso creo :distant:
Hacer clic para expandir...

Yo me refiero al código javascript, no al html y css que me dices, ya que esos no hacen nada que tenga que ver con mostrar u ocultar el menú en móviles.
 
Kuroneko-kun dijo:
Yo me refiero al código javascript, no al html y css que me dices, ya que esos no hacen nada que tenga que ver con mostrar u ocultar el menú en móviles.
Hacer clic para expandir...

Aca te dejo el archivo jquery.js en mediafire ya que no me deja publicarlo en el foro porque es muy largo

Descarga el archivo -->ACA<--

Si no es este me avisas
 
Última edición:
Hay que estar conectado o registrado para responder aquí.

Temas similares

ultracobra
Cómo ajustar nav con CSS para botones más estrechos
Respuestas
4
Visitas
400
ultracobra
ultracobra
Digitalplus
Como hacer que este código de páginacion se voltee horizontal
Respuestas
7
Visitas
304
Digitalplus
Digitalplus
Digitalplus
Problemas para reproducir videos en mi página
Respuestas
10
Visitas
428
enmanuel0309
enmanuel0309
I
¿Cómo pongo un menu horizontal en mi Blog?
Respuestas
1
Visitas
330
elii01
E
A
Búsqueda y filtrado de hoteles con Bootstrap, Ajax y jQuery
Respuestas
1
Visitas
695
Eduardo Pech
Eduardo Pech
Atrás
Arriba