Foros del Web » Creando para Internet » CSS »

No puedo hacer cerrar el menú

Estas en el tema de No puedo hacer cerrar el menú en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/09/2019, 19:38
Avatar de Jose_A  
Fecha de Ingreso: mayo-2015
Ubicación: México, Sonora.
Mensajes: 180
Antigüedad: 9 años, 5 meses
Puntos: 0
No puedo hacer cerrar el menú

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!
  #2 (permalink)  
Antiguo 25/09/2019, 14:28
Avatar de Jose_A  
Fecha de Ingreso: mayo-2015
Ubicación: México, Sonora.
Mensajes: 180
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: No puedo hacer cerrar el menú

Ya encontré el error, en esta parte:

Código:
.active-menu-hider{

    opacity:100%;

    transition:all 350ms ease;

    pointer-events:all!important;

}


Al momento de cambiar esta parte:

Código:
pointer-events:all!important;


Por esta:

Código:
   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?

Etiquetas: cerrar, color, fonts, form, google
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:29.