1

Uso un menú sticky en mi web: www.doblem.xyz.

En la versión móvil, quiero que una vez que se haga click en el menú movil, y luego, en el menú, se pinche en una sección, el menú sticky se oculte.

<header class="row" id="myHeader">

        <div id="logo" class="col-lg-3 col-md-3 col-sm-4 col-xs-12 ">

               <a href="../index.php"><img src="../img/logo_blanco.png" class="img-responsive"></a>

        </div>

        <!-- La caja "menuMovil" solo aparece en resoluciones de moviles
         (Collapsing The Navigation Bar BS-->
        <div id="menuMovil" class="navbar-header navbar-inverse">

                <!--pull-left: forzamos a colocarlo a la izquierda
                    data-toogle: collapse: Generar acción colapsable
                    data-target: clase a la que afecta el "data-toggle"
                -->
                <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#menu" >

                        <!-- Las tres lineas del botón-->
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>

                </button>

        </div>
        <!-- Debemos indicar que esta caja es colapsable y de que se trata de una barra de navegación colapsable
        -->
        <nav id="menu" class="col-lg-9 col-md-9 col-sm-8 col-xs-12 collapse navbar-collapse pull-right">

                <ul class="nav navbar-nav ">

                      <li class="active"><a href="../index.php">Volver</a></li>                              
                </ul>

        </nav>

</header>

El código del sticky js:

window.onscroll = function() {
    myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
    if (window.pageYOffset > sticky) {
        header.classList.add("sticky");


    } else {
        header.classList.remove("sticky");
    }
}

1 respuesta 1

1
Menu_movil();

function Menu_movil(){
$("#boton_movil").click(function()
    {   $('#menu').show();
        $("#menu").click(function()
        {
            $('#menu').hide();
            Menu_movil();

        })
    });
}

Cuando se hace click en el div #boton_movil (que oculta el menú en resoluciones moviles) se muestra el menú original (#menu) Cuando se clickea #menu, este debe ocultarse de nuevo, lo cual se consigue con $('#menu').hide(); Pero debemos dejar listo de nuevo la funcion MenuMovil() por si se clickea de nuevo en #boton_movil, mediante recursividad. Pero en la segunda interacción, debemos mostrar de nuevo #menu ya que lo habiamos ocultado previamente.

5
  • Tu respuesta fue reportada como de baja calidad, ya que las que son solo codigo se las trata asi. podrias explicar que hace este codigo y porque soluciona el problema? mira por favor Cómo responder
    – gbianchi
    Commented el 20 jul. 2018 a las 14:38
  • @gbianchi lo acabo de editar. Commented el 20 jul. 2018 a las 14:51
  • Genial! gracias por ocuparte :)
    – gbianchi
    Commented el 20 jul. 2018 a las 14:55
  • No es del todo correcta, pero al menos me "ha funcionado" algo de lo que buscaba. Commented el 20 jul. 2018 a las 14:57
  • Recuerda aceptarla una vez que pase el periodo de tiempo necesario!
    – gbianchi
    Commented el 20 jul. 2018 a las 15:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.