No puedo hacer cerrar el menú

Antoniio1 Seguir

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
11 Ago 2018
Mensajes
295
Hola, buenas. Estoy teniendo problemas con el menú de una app, uso una plantilla que compré. Al momento de abrirlo sin problemas se muestra el menú:
abrir.png


Aquí ya se abrió sin problemas:
menu.png


El problema viene aquí, que al darle click en las líneas de arriba para cerrar el menú no reacciona, no cierra, el menú queda abierto, qué pueda ser?, cada que le intento cerrar y doy click en el código se selecciona esta parte:
Insertar CODE, HTML o PHP:
page-content header-clear-larger active-body-left-push

Esta es una parte del css de menú:
CSS:
/*Menu Header*/
/*-----------*/

.menu-header{margin:0px 0px -18px 0px; padding-bottom:20px; border-bottom:solid 1px rgba(255,255,255,0.1);}
.menu-header p{text-align:center; font-size:12px; margin-bottom:5px; color:#FFFFFF; opacity:0.7; text-shadow:0px 0px 0px #000000!important;}
.menu-header h1{text-align:center; margin-bottom:0px; font-size:26px; line-height:20px; font-weight:900; text-transform:uppercase; color:#FFFFFF;}

/*Menu Contact Form*/
/*-----------------*/
.menu .contact-form{margin-left:20px;margin-right:20px;}
.menu input[type="text"], .menu textarea{
    display:block;
    box-shadow:none;
    -webkit-appearance: none;
    color:#000000;
}

.menu input{height:45px; line-height:45px; margin-bottom:15px!important;}
.menu input::placeholder, .menu textarea::placeholder{color:#666666!important;}

/*Menu Sidebar Settings*/
/*---------------------*/
.menu-sidebar-left, .menu-sidebar-right{
    position:fixed;
    top:0px;
    bottom:0px;
    width:250px;
    z-index:1000;
    transition:all 350ms ease;
}

.menu-sidebar-shadow{
    box-shadow: 0 0 25px 5px rgba(0,0,0,0.2);
}

.menu-sidebar-left{left:0px; transform:translateX(-260px);}
.menu-sidebar-right{right:0px; transform:translateX(260px);}

.menu-sidebar-left .menu-scroll, .menu-sidebar-right .menu-scroll{padding-top:0px;}
.active-sidebar-left-over{transform:translateX(0px); transition:all 350ms ease;}
.active-sidebar-left-push{transform:translateX(0px); transition:all 350ms ease;}
.active-body-left-push{transform:translateX(250px); transition:all 350ms ease;}
.active-sidebar-left-parallax{transform:translateX(0px); transition:all 350ms ease;}
.active-body-left-parallax{transform:translateX(80px); transition:all 400ms ease!important;}

.active-sidebar-right-over{transform:translateX(0px); transition:all 350ms ease;}
.active-sidebar-right-push{transform:translateX(0px); transition:all 350ms ease;}
.active-body-right-push{transform:translateX(-250px); transition:all 350ms ease;}
.active-sidebar-right-parallax{transform:translateX(0px); transition:all 350ms ease;}
.active-body-right-parallax{transform:translateX(-80px); transition:all 400ms ease!important;}

/*Menu Modal Settings*/
/*-------------------*/
.menu-box-modal{
    position:fixed;
    top:0px;
    bottom:0px;
    top:50%;
    z-index:1000;
    border-radius:10px;
    pointer-events:none;
    overflow:hidden!important;
    opacity:0;
    left:50%;
    transform:translateX(-50%);
    transition:all 350ms ease;
}

.active-menu-box-modal{
    opacity:1!important;
    pointer-events: all;
    transition:all 350ms ease;
}

/*Menu Bottom Box Settings*/
/*------------------------*/
.menu-box-bottom{
    left:50%;
    position:fixed;
    z-index:1000;
    border-radius:20px;
    height:500px;
    pointer-events:none;
    bottom:-20px;
    transform:translateX(-50%);
    transition:all 350ms ease;
}

.active-menu-box-bottom{
    pointer-events: all!important;
    transform:translate(-50%, -45px)!important;
    transition:all 350ms ease;
}

/*Menu Top Box Settings*/
/*---------------------*/
.menu-box-top{
    position:fixed;
    z-index:1000;
    border-radius:15px;
    height:500px;
    pointer-events:none;
    top:-70px;
    left:15px;
    right:15px;
    transition:all 350ms ease;
}

.active-menu-box-top{
    pointer-events: all!important;
    transform:translate(0%, 80px)!important;
    transition:all 350ms ease;
}

/*Menu Full Top*/
/*-------------*/
.menu-full-top{
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    z-index:1000;
    height:100%;
    transform:translateY(-150%);
    transition:all 550ms ease;
}
.active-menu-full-top{transform:translateY(0px)!important; transition:all 450ms ease;}

/*Menu Full Bottom*/
/*----------------*/
.menu-full-bottom{
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    z-index:1000;
    height:100%;
    transform:translateY(150%);
    transition:all 550ms ease;
}
.active-menu-full-bottom{transform:translateY(0px)!important; transition:all 450ms ease;}

/*Menu Share*/
/*----------*/

.share-icons{
    width:290px;
    margin:0 auto;
}

.share-icons a{
    width:60px;
    float:left;
    margin:0px 15px 20px 15px;
}

.share-icons em{
    display:block;
    font-size:12px;
    color:#1f1f1f;
    font-style: normal;
    margin-top:-20px;
    text-align:center;
    width:80px;
}

.share-icons a i{
    margin:0px 10px 20px 10px;
    font-size:20px;
    width:60px;
    line-height:57px;
    text-align:center;
    border-radius:17px;
    color:#FFFFFF;
}

.share-icons:after{
    content: "";
    display: table;
    clear: both;
}

/*Menu Build*/
/*----------*/
.menu-header{background-color:rgba(0,0,0,0.05); margin-top:-30px!important; padding-top:30px; margin-bottom:0px;}
.menu-header h1{color:#FFFFFF; font-size:24px; text-shadow:0px 1px 0px #777777;}
.menu-header p{font-size:11px; color:#F1ECEC; text-shadow:0px 1px 0px #949292;}

.menu-item{
    color:#FFFFFF!important;
    font-weight:400!important;
    font-size:14px;
    text-shadow:0px 1px 1px rgba(0,0,0,0.5);
    line-height:57px;
    transition:all 250ms ease;
}

.menu-item:hover{
    background-color:rgba(255,255,255,0.03);
}
.submenu a:hover{
    background-color:rgba(255,255,255,0.02);
}

.menu-list .fab{line-height:34px!important;}
.menu-item i:first-child{
    color:#FFFFFF!important;
    height:35px;
    width:35px;
    line-height:36px;
    text-align:center;
    border-radius:35px;
    font-size:14px;
    margin-left:20px;
    margin-right:20px;
    text-shadow:0px 1px 1px rgba(0,0,0,0.5);
    box-shadow:0 20px 67px 0 rgba(0,0,0,.12), 0 5px 14px 0 rgba(0,0,0,.2);
}

.menu-divider{
    text-shadow:0px 1px 0px rgba(0,0,0,0.5);
    color:#FFFFFF!important;
    font-size:10px;
    text-transform:uppercase;
    display:block;
    padding-left:20px;
    padding-bottom:10px;
    margin-bottom:10px;
    font-style:normal;
    font-weight:900;
    margin-top:30px;
    border-bottom:solid 1px rgba(255,255,255,0.05);
}

.menu-list span{
    position:absolute;
    right:16px;
    font-size:9px;
    background-color:rgba(255,255,255,0.15);
    height:20px;
    margin-top:19px;
    line-height:20px;
    padding-left:8px;
    padding-right:8px;
    border-radius:15px;
    min-width:20px;
    text-align:center;
    text-shadow:0px 1px 0px rgba(0,0,0,0.3);
}

.menu-copyright{
    text-shadow:0px 1px 0px rgba(0,0,0,0.5);
    text-align:center;
    color:rgba(255,255,255,1);
    font-style:normal;
    padding-top:20px;
    font-weight:300;
    font-size:10px;
    display:block;
    border-top:solid 1px rgba(255,255,255,0.03);
    margin-top:20px;
    margin-bottom:30px;
}

.menu-list .fa-angle-right{
    position:absolute;
    font-size:10px;
    height:55px;
    line-height:57px;
    width:55px;
    right:0px;
    text-align:center;
}

[data-submenu]::after{display:none!important;}
.active-menu::after {
    font-family: "Font Awesome 5 Free";
    font-weight:900;
    content:'\f111';
    position:absolute;
    right:25px;
    font-size:7px;
    margin-top:0px;
}
.remove-dot::after{content:''!important;}

.active-menu{font-weight:700!important; transition:all 300ms ease; background-color:rgba(255,255,255,0.03);}
.active-menu i:first-child {
  animation-name: menuANI;
  animation-duration: 600ms;
  animation-timing-function: ease;
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes menuANI {
  0% {transform: scale(1);}
  100% {transform: scale(1.08);}
}

Saludos!.
 

Decibel150

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
24 Jun 2019
Mensajes
217
mmm, la consola no da ningún tipo de excepción cuando haces clic?
 

Antoniio1

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
11 Ago 2018
Mensajes
295
Esta es una parte del código del template donde sí funciona, del template donde lo instalé:

HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>Kolor | HTML, CSS & JS Mobile Template | Epsilon X </title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link rel="stylesheet" type="text/css" href="fonts/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="styles/framework.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
</head>
 
<body>
 
<div id="preloader" class="preloader-light">
    <h1 class="center-text color-black ultrabold uppercase bottom-0 fa-2x">Kolor</h1>
    <div id="preload-spinner"></div>
    <p>Beautifully Crafted UI & UX.</p>
    <em>This will only take a second. It's totally worth it!</em>
</div>


<div id="page-transitions" class="page-build">
    <div class="page-bg gradient-body-1"></div>

    <div class="header shadow-large header-light header-logo-app">
        <a href="index.html" class="header-title">Blog List</a>
        <a href="#" class="back-button header-icon header-icon-1"><i class="fas fa-angle-left"></i></a>
        <a data-menu="menu-contact" data-menu-type="menu-box-modal" href="#" class="header-icon header-icon-2"><i class="fas fa-envelope"></i></a>
        <a data-menu="menu-1" data-menu-type="menu-sidebar-left-push" href="#" class="header-icon header-icon-3"><i class="fas fa-bars"></i></a>
    </div>
 
    <div id="menu-1" class="menu menu-sidebar-left menu-settings">
        <div class="menu-bg gradient-body-1"></div>
        <div class="menu-scroll">
            <div class="menu-header">
                <a class="menu-logo" href="index.html"></a>
                <h1>Welcome</h1>
                <p>Put a little color in your life</p>
            </div>
            <div class="menu-list icon-background-active">
                <em class="menu-divider top-10">Navigation</em>
                <a class="menu-item" href="index.html"><i class="fa gradient-red-light fa-star"></i>Welcome</a>
                <a class="menu-item" href="homepages.html"><i class="fa gradient-green-light fa-home"></i>Homepages</a>
                <a class="menu-item" href="components.html"><i class="fa gradient-sky-light fa-cog"></i>Components<span>HOT</span></a>
                <a class="menu-item" href="interactive.html"><i class="fa gradient-mint-dark fa-hand-point-right"></i>Interactive<span>NEW</span></a>
                <a data-submenu="submenu-1" class="menu-item" href="#"><i class="fa gradient-magenta-light fa-image"></i>Media<span></span></a>
                <div id="submenu-1" class="submenu">
                    <a href="galleries.html">Galleries</a>
                    <a href="portfolios.html">Portfolios</a>
                </div>
                <a class="menu-item" href="pages.html"><i class="fa gradient-brown-light fa-file"></i>Site Pages</a>
                <a class="menu-item" href="pageapp.html"><i class="fa gradient-blue-light fa-mobile-alt"></i>App Styled</a>
                <a data-submenu="submenu-2" class="menu-item active-menu" href="#"><i class="fa gradient-mint-dark fa-shopping-bag"></i>Templates<span></span></a>
                <div id="submenu-2" class="submenu">
                    <a href="news.html">News</a>
                    <a href="shop.html">Shop</a>
                    <a href="blog.html" class="active-submenu">Blog</a>
                </div>
                <a class="menu-item" href="contact.html"><i class="fa gradient-sky-dark fa-envelope"></i>Contact Us</a>
                <a class="menu-item close-menu" href="#"><i class="fa gradient-red-dark fa-times"></i>Close Menu</a>
                <em class="menu-divider">Get in Touch</em>
                <a class="menu-item" href="tel:+1 234 567 890"><i class="fa gradient-green-light fa-phone"></i>Call Us</a>
                <a class="menu-item" href="sms:+1 234 567 890"><i class="fa gradient-mint-dark fa-comment"></i>SMS Us</a>
                <a class="menu-item" href="mailto:name@domain.com"><i class="fa gradient-sky-dark fa-envelope"></i>Mail Us</a>
                <em class="menu-divider">Let's get Social</em>
                <a class="menu-item" href="https://www.facebook.com/enabled.labs/"><i class="fab facebook-bg fa-facebook-f"></i>Facebook</a>
                <a class="menu-item" href="https://twitter.com/iEnabled"><i class="fab twitter-bg fa-twitter"></i>Twitter</a>
                <a class="menu-item" href="https://plus.google.com/u/1/+EnabledLabs"><i class="fab google-bg fa-google-plus-g"></i>Google+</a>
            </div>
            <em class="menu-copyright">Copyright <span class="copyright-year"></span>, Enabled. All Rights Reserved</em>
        </div>
    </div>
 
    <div class="page-content header-clear-larger">
 
        <div class="content-box bg-white">
            <div class="news-list-item top-10">
                <a href="#">
                    <img class="preload-image shadow-icon-large round-image" src="images/empty.png" data-src="images/pictures/1s.jpg" alt="img" alt="img">
                    <strong>Retro Typewritters are back, sales are skyrocketing!</strong>
                </a>
                <span><i class="fas fa-clock"></i>30 Dec 2019 <a href="#" class="color-highlight">Gadgets</a></span>
            </div>
            <div class="news-list-item">


Y este es el que está en mi carpeta "Menú"
HTML:
<div id="menu-1" class="menu menu-sidebar-left menu-settings">
    <div class="menu-bg gradient-body-1"></div>
    <div class="menu-scroll">
        <div id="page-transitions" class="page-build">
    <div class="page-bg gradient-body-1"></div>

        <div class="menu-header">
            <a class="menu-logo" href="/"></a>
            <h1>Bienvenido</h1>
            <p>Put a little color in your life</p>
        </div>
        <div class="menu-list icon-background-active">
            <em class="menu-divider top-10">Menú</em>
            <a class="menu-item active-menu" href="/dashboard"><i class="fa gradient-red-light fa-star"></i>Home</a>
            <a class="menu-item" href="/profile"><i class="fa gradient-green-light fa-home"></i>Perfil</a>
            <a class="menu-item" href="/product"><i class="fa gradient-sky-light fa-cog"></i>Servicios</a>
            <a class="menu-item" href="/nanny-help"><i class="fa gradient-mint-dark fa-hand-point-right"></i>Nanny Help<span>NEW</span></a>
            <a class="menu-item" href="/payment"><i class="fa gradient-brown-light fa-file"></i>Pago</a>
            <a class="menu-item" href="/schedule"><i class="fa gradient-blue-light fa-mobile-alt"></i>Agenda</a>
            <a class="menu-item" href="/promotions"><i class="fa gradient-blue-light fa-mobile-alt"></i>Promociones</a>
            <a class="menu-item" href="/help"><i class="fa gradient-brown-light fa-file"></i>Ayuda</a>
            <a class="menu-item" href="terms-conditions"><i class="fa gradient-blue-light fa-mobile-alt"></i>Términos y Condiciones</a>
            <a class="menu-item close-menu" (click)="close_session()"><i class="fa gradient-red-dark fa-times"></i>Cerrar Sesión</a>
        </div>
    </div>
</div>
 

Antoniio1

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
11 Ago 2018
Mensajes
295
Sigo sin poder hacer que cierre el menú 🙁
 

Antoniio1

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
11 Ago 2018
Mensajes
295
Ya encontré el error, en esta parte:
Insertar CODE, HTML o PHP:
.active-menu-hider{
    opacity:100%;
    transition:all 350ms ease;
    pointer-events:all!important;
}

Al momento de cambiar esta parte:
Insertar CODE, HTML o PHP:
pointer-events:all!important;

Por esta:
Insertar CODE, HTML o PHP:
   pointer-events:auto;

El menú ya puede abrir y cerrar pero ahora no me deja entrar a ninguna categoría del menú, le pico y simplemente se cierra el menú, ahora cuál puede ser el problema?
 

ferrafael

Gamma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
22 Feb 2016
Mensajes
278
El menú ya puede abrir y cerrar pero ahora no me deja entrar a ninguna categoría del menú, le pico y simplemente se cierra el menú, ahora cuál puede ser el problema?
¿Te funciona bien cuando la pruebas con la configuración por defecto?.. Porque si es así probablemente declaraste o hiciste una llamada de forma incorrecta. Mira la documentación sobre como poner en marcha los componentes. Y si no encuentras la falla con la documentación quizás debas contactar al soporte de la plantilla
 

Antoniio1

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
11 Ago 2018
Mensajes
295
¿Te funciona bien cuando la pruebas con la configuración por defecto?.. Porque si es así probablemente declaraste o hiciste una llamada de forma incorrecta. Mira la documentación sobre como poner en marcha los componentes. Y si no encuentras la falla con la documentación quizás debas contactar al soporte de la plantilla
Es correcto, cuando la prueba con la configuración por defecto funciona a la perfección. Entonces tendré que ver si tienen soporte, no me he fijado en eso
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba