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ú:
Aquí ya se abrió sin problemas:
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:
Código:
page-content header-clear-larger active-body-left-push
Esta es una parte del css de menú:
[CODE=css]/*Menu Header*/
/*-----------*/
.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*/
/*-------------------*/
[/CODE]
Esta es una parte del código del template donde sí funciona, del template donde lo instalé:
[CODE=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,700 i,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:
[email protected]"><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">[/CODE]
Y este es el que está en mi carpeta "Menú"
[CODE=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>[/CODE]
Saludos!