Well, I'm trying to make a responsive menu... I already have the web menu structure, now I'm working on the mobile menu. Said menu must occupy the entire screen, when I close it what I do is reduce its width to 0 with a transition. The problem is that only the div is reduced, its content is still there... in this case only the button, obviously it will have more content later, but to begin with I want that button to disappear every time it is closed.
//Variables
let openMenu = document.getElementById('open_menu');
let contentMenu = document.getElementById('content_menu');
let iconsTopBar = document.querySelectorAll('.icon-top-bar');
let topBarWeb = document.getElementById('top_bar_web');
let topBarMobile = document.getElementById('top_bar_mobile');
let closeMenuMobile = document.getElementById('close_menu_mobile');
let mobileMenu = document.getElementById('mobile_menu');
//Functions
openMenu.addEventListener('click',function(e) {
contentMenu.classList.toggle('close-menu');
});
window.addEventListener("resize", function(){
iconsTopBar.forEach(icon => {
if( window.innerWidth <= 1000){
if(icon.classList.contains('fad')){
icon.classList.remove('fad');
icon.classList.add('fas');
}
}else{
if(icon.classList.contains('fas')){
icon.classList.remove('fas');
icon.classList.add('fad');
}
}
});
if( window.innerWidth <= 768){
contentMenu.classList.add('close-menu');
}else{
contentMenu.classList.remove('close-menu');
}
showMenu();
});
window.onload = showMenu();
function showMenu(){
if( window.innerWidth <= 600){
topBarWeb.style.display = "none";
topBarMobile.style.display = "flex";
contentMenu.style.display = "none";
// this.alert('asdfas');
}else{
topBarWeb.style.display = "flex";
contentMenu.style.display = "flex";
topBarMobile.style.display = "none";
}
}
closeMenuMobile.addEventListener('click',function(e){
mobileMenu.style.width = "0vw";
mobileMenu.style.transition = ".5s";
// alert('sdfsd');
});@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
--bg-color: rgba(78, 78, 78, 0.1);
--white:rgb(255, 255, 255);
--blue: rgb(67, 140, 248);
--gray: rgba(0, 0, 0, 0.6);
--red: rgba(212, 34, 34, 0.797);
--orange: rgb(255, 147, 74);
--purple:rgb(222, 83, 155);
--yellow:rgb(255, 238, 88);
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
border-radius: 3px;
}
* {
padding: 0;
margin: 0;
}
body {
background: var(--bg-color);
display: flex;
}
.content-menu {
display: inline-flex;
background: var(--white);
width: 280px;
height: 100vh;
transition: 0.6s;
}
.content-body {
width: 100%;
height: 100vh;
}
.content-body .content-top-bar {
display: block;
padding: 10px;
background: var(--white);
top: 0;
width: 100%;
background-image: url('../img/cardinal/top-bar.png');
background-position: center;
background-size: 50%;
background-repeat: no-repeat;
}
.content-body .content-top-bar .top-bar {
display: flex;
}
.content-body .content-top-bar .top-bar #open_menu {
display: inline-flex;
font-size: 25px;
cursor: pointer;
padding: 2px;
color: var(--blue);
width: auto;
}
.content-body .content-top-bar .top-bar .content-search-input {
border: 1.5px solid var(--blue);
margin-left: 20px;
border-radius: 5px;
background: var(--white);
width: 35%;
position: relative;
}
.content-body .content-top-bar .top-bar .content-search-input .search {
padding: 2px 0 2px 10px;
border: none;
background: var(--white);
color: var(--gray);
width: 80%;
outline: none;
border-radius: 5px 0 0 5px;
}
.content-body .content-top-bar .top-bar .content-search-input button{
border: none;
background: var(--white);
padding: 2px 5px;
border-radius: 0 5px 5px 0;
color: var(--gray);
position: absolute;
right: 0px;
}
.content-body .content-top-bar .top-bar .icons{
display: flex;
align-items: center;
position: absolute;
right:20px;
color: rgba(48, 132, 222, 0.934);
}
.content-body .content-top-bar .top-bar .icons i{
padding: 5px 10px 5px 10px;
font-size: 20px;
cursor: pointer;
position: relative;
}
/*EFECTO DE PULSO*/
.circle {
width: 7px;
height: 7px;
background: var(--red);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
}
.circle::before, .circle::after {
content:"";
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
width: 3px;
height: 3px;
border: 10px solid var(--orange);
border-radius:100%;
animation: latido linear 3s infinite;
}
.circle::after {
animation-delay: -1.5s;
}
@keyframes latido {
0% { width:7px; height:7px; border:3px solid var(--orange); }
100% { width:20px; height:20px; border:5px solid transparent; }
}
#button-0 { top: 5px; left: 30px; }
#button-1 { top: 5px; left: 25px; }
/*END EFECTO PULSO*/
.content-body .content-top-bar .top-bar .icons a{
text-decoration: none;
color: rgba(48, 132, 222, 0.856);
}
.content-body .content-top-bar .top-bar .icons img{
margin-right: 7px;
font-size: 20px;
border-radius: 100%;
border: 2px solid var(--blue);
}
#prueba {
width: 225px;
}
.close-menu {
width: 50px;
transition: 0.6s;
}
#top_bar_mobile{
display: none;
}
.mobile-menu{
width:100vw;
height: 100vh;
background: red;
position: fixed;
z-index: 10000;
}
.mobile-menu .i{
position: relative;
}
.body {
width: 100%;
}
.card {
margin: 10px;
height: 600px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<title>Administrador</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="{{ URL::asset('css/cardinal.css') }}">
<link rel="stylesheet" href="{{ URL::asset('css/fontawesome.css') }}">
</head>
<body>
<div id="mobile_menu">
<button id="close_menu_mobile">cerrar</button>
</div>
<div id="content_menu">
<div >
</div>
</div>
<div >
<div >
<div id="top_bar_web">
<i id="open_menu"></i>
<div >
<input type="text" id="search" placeholder="Search...">
<button><i ></i></button>
</div>
<div >
<i id="message_icon"><div id="button-0"></div></i>
<i id="notification_icon" ><div id="button-1"></div></i>
<i id="config_icon"></i>
<a href="/login"><img src="{{URL::asset('img/cardinal/login/brain.webp')}}"width="35px" height="35px"; alt="">
<span>Aldahir Ruiz Valdez</span></a>
</div>
</div>
<div id="top_bar_mobile">
<i id="open_menu"></i>
<div >
<a href="/login"><img src="{{URL::asset('img/cardinal/login/brain.webp')}}"width="35px" height="35px"; alt=""></a>
</div>
</div>
</div>
<div >
<div >
<div >Headers</div>
<div >
</div>
</div>
</div>
</div>
<script src="{{ URL::asset('js/cardinal.js') }}"></script>
</body>
</html>CodePudding user response：
With your current implementation, you can add overflow: hidden; property to your .mobile-menu CSS rule.