html 根据div内容的宽度隐藏div内容

toe95027  于 2022-12-16  发布在  其他
关注(0)|答案(1)|浏览(116)

嗯，我正在尝试制作一个响应式菜单......我已经有了网页菜单结构，现在我正在制作移动的菜单。该菜单必须占据整个屏幕，当我关闭它时，我所做的是通过一个过渡将其宽度减小到0。问题是只有div被减小，其内容仍然存在......在这种情况下，只有按钮，显然它稍后会有更多的内容，但开始我希望那个按钮在每次关闭时都消失。

//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/bootstrap@5.1.3/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 class="mobile-menu" id="mobile_menu">
        <button class="far fa-times" id="close_menu_mobile">cerrar</button>
    </div>
    <div class="content-menu" id="content_menu">
        <div class="nav-bar">
        </div>
    </div>
    <div class="content-body">
        
        <div class="content-top-bar">
            <div class="top-bar" id="top_bar_web">
                <i class="fad fa-bars" id="open_menu"></i>
                <div class="content-search-input">
                    <input type="text" class="search" id="search" placeholder="Search...">
                    <button><i class="fas fa-search"></i></button>
                </div>
                <div class="icons">
                    <i class="fad fa-envelope icon-top-bar" id="message_icon"><div class="circle button" id="button-0"></div></i>
                    
                    <i class="fad fa-bell icon-top-bar" id="notification_icon" ><div class="circle button" id="button-1"></div></i>
                    <i class="fad fa-cog icon-top-bar" 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 class="top-bar-mobile top-bar" id="top_bar_mobile">
                <i class="fad fa-bars" id="open_menu"></i>
                <div class="icons " >
                    <a href="/login"><img src="{{URL::asset('img/cardinal/login/brain.webp')}}"width="35px" height="35px"; alt=""></a>
                </div>
            </div>
        </div>
        
        <div class="body">
            <div class="card">
                <div class="card-header">Headers</div>
                <div class="card-body">
                    
                </div>
            </div>
        </div>
    </div>
    <script src="{{ URL::asset('js/cardinal.js') }}"></script>
</body>

</html>
Html

1条答案

按热度按时间
oalqel3c

oalqel3c1#

使用当前实现，您可以将overflow: hidden;属性添加到.mobile-menu CSS规则中。

赞(0）分享  回复(0）举报  2022-12-16
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com