调整窗口大小时打开响应式侧面菜单

Question

我一直在编写似乎可以正常工作的副菜单...但是有一个错误。

当窗口小于660 px时，侧面菜单随媒体查询一起隐藏。然后出现一个汉堡图标，并且边栏消失。

如果单击盗窃者，则菜单再次出现。

如果单击“ X”关闭菜单，菜单将再次消失。

直到这里，一切正常。

现在，如果将尺寸调整为正常大小，则侧面菜单将完全消失。

我需要以大于660px的尺寸打开它，但仍在努力使其工作。

这是一个凌乱的代码（我没有删除一些使它起作用的意图）。

    var openMenu = function(){
    el = document.getElementsByTagName("aside")[0];
    el.style.display = "block";
    document.getElementById("burguer-menu").style.display = "none";
}

var closeMenu = function(){
    el = document.getElementsByTagName("aside")[0];
    el.style.display = "none";
    document.getElementById("burguer-menu").style.display = "inline";
}

var openMenuOnResize = function(){
    const mq = window.matchMedia("(min-width: 660px)");
    if (mq.matches) {
        openMenu;
    }
}

document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);

/*Resize Window */
 if (matchMedia) {
    const mq = window.matchMedia("(min-width: 660px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
    }

 //    media query change
     function WidthChange(mq) {
    if (mq.matches) { openMenu;
     // window width is at least 660px
    } else {
      window width is less than 660px
     }

    }

这里是带有完整代码的codepen。

感谢您的帮助。

Answer 1

var openMenu = function(){
    el = document.getElementsByTagName("aside")[0];
    el.style.display = "block";
    document.getElementById("burguer-menu").style.display = "none";
}

var closeMenu = function(){
    el = document.getElementsByTagName("aside")[0];
    el.style.display = "none";
    document.getElementById("burguer-menu").style.display = "inline";
}

var openMenuOnResize = function(){
    const mq = window.matchMedia("(min-width: 660px)");
    if (mq.matches) {
        openMenu;
    }
}

document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
window.addEventListener('resize', openMenuOnResize);

/*Resize Window */
 if (matchMedia) {
    const mq = window.matchMedia("(min-width: 660px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
    }
    
 //    media query change
     function WidthChange(mq) {
    if (mq.matches) { openMenu;
     // window width is at least 660px
	 document.getElementById('sidemenu').style.display='block'
	 
	 
    } else {
     // window width is less than 660px
	 document.getElementById('sidemenu').style.display='none';
	 var btn=document.getElementById('burguer-menu');
	 if(isHidden(btn)){
		 btn.style.display='inline';
		 }
     }
    
    }
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
}


/* NAV SECTION */
aside {
    display:inline;
    flex: 1;
    background-color: #1a2b42;
    min-width:280px;
    /* top:0;
    bottom:0;
    width: 20%;
    height: 100%; */
}

.aside-logo {
    display:flex;
    flex-direction: column;
    color: white;
    font-size: 2rem;
    padding: 20px;
    width: 100%;
}

.aside-logo p {
    font-size: 12px;
}
#aside-logo-mb {
    display: none;
}

.aside-logo a {
    text-decoration: none;
    color: white;
    font-size: 3rem;
}

aside hr {
    border-color: #4c5267;
    margin:0;
    padding:0;
}
.menu-link {
    color:#98A4CE;
    padding:20px 3px 20px 20px;
    display:block;
    text-decoration: none;
}

.menu-link:hover{
    color: white;
    border-left:solid 3px #363a51;
    background-color:#363a51;
    padding:20px 30px 20px 40px;
    display:block;

}

.menu-link:active {
    color: #67f494;
    border-left:solid 3px #67f494;
    background-color:#363a51;
    padding:20px 30px 20px 17px;
    display:block;
}

.active-menu-link {
    color: #67f494;
    border-left:solid 3px #67f494;
    background-color:#363a51;
    padding:20px 30px 20px 17px;
    display:block;
}


.far {
    color:#67f494;
    padding-right:15px;
}

.fas {
    color:#67f494;
    padding-right:15px;
}


/* MAIN SECTION */

main {
    display: flex;
    flex-direction: column;
    flex: 5;
    background-color:#98A4CE;
}

/*HEADER SECTION*/

header {
    display: flex;
    min-height: 50px;
    background-color: white;
}

.top-nav_right {
    display:flex;
    flex:1;
    flex-direction: row;
    justify-content: flex-end;
    margin-right: 30px;
}

.top-nav_left {
    display:none;
    flex: 1;
    flex-direction: row;
}

.top-nav_right-sm {
    display: none;
}

#burguer-menu {
    color:#67f494;
    padding-right:15px;

}

.content{
    flex: 4;
}

footer {
    display: flex;
    min-height: 50px;
    background-color:#4C5267;
}

footer p {
    padding: 0 0 0 30px;
    color:#98A4CE;
}


@media(max-width:660px) {
    aside {
        display:none;
    }
    .aside-logo{
        display:none;
    }

    #aside-logo-mb{
        display: block;
    }

    header{background-color:#1a2b42;}

    .top-nav_left {
        display:flex;
        flex: 1;
        flex-direction: row;
        color: white;
        padding: 0 0 0 20px;
    }

    .top-nav_right-sm {
        display: flex;
    }
    .top-nav_right {
        display: none;
    }
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside id="sidemenu">
        <div class="aside-logo" id="aside-logo">
            LOGO
        <p>Your slogan </p>
        
        </div>
        <div class="aside-logo" id="aside-logo-mb">
         <a href="#">&times</a>    
        </div>
        <hr>
        <a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
        <a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
        <a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
        <a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
        <a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
        <a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
        <a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
        <a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
    
</aside>
<main>
    <header>
        <div class="top-nav_left">
            <p>LOGO</p>
        </div>
        <div class="top-nav_right">
                <a href="#"><i class="fas fa-user-circle"></i>Profile</a>
                <a href="#"><i class="fas fa-cog"></i>Settings</a>
        </div>
        <div class="top-nav_right-sm">
                <a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
        </div>
    </header>
    <div class="content">

    </div>
    <footer>
        <p>Copyright 2018</p>
        <p>Terms & Conditions</p>

    </footer>


</main>

Answer 2

var openMenu = function(){
    el = document.getElementsByTagName("aside")[0];
    el.style.display = "block";
    document.getElementById("burguer-menu").style.display = "none";
}

var closeMenu = function(){
    el = document.getElementsByTagName("aside")[0];
    el.style.display = "none";
    document.getElementById("burguer-menu").style.display = "inline";
}

var openMenuOnResize = function(){
    const mq = window.matchMedia("(min-width: 660px)");
    if (mq.matches) {
        openMenu;
    }
}

document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);

/*Resize Window */
 if (matchMedia) {
    const mq = window.matchMedia("(min-width: 660px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
    }
    
 //    media query change
     function WidthChange(mq) {
    if (mq.matches) { openMenu;
     // window width is at least 660px
    }
    else {
    }
    
    }

/* 
COLOR PALETTE
light green #67f494 	(103,244,148)
green #5cc59e     (92,197,158)
greyBlue #385D8E
lightest gray #98A4CE
light gray #4C5267
gray #4c5267     (76,82,103)
middle grey #363a51     (54,58,81)
dark grey #1a2b42	    (26,43,66)

FONTS
font-family: 'Open Sans', sans-serif;
*/

body {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
}


/* NAV SECTION */
aside {
    display:inline;
    flex: 1;
    background-color: #1a2b42;
    min-width:280px;
    /* top:0;
    bottom:0;
    width: 20%;
    height: 100%; */
}

.aside-logo {
    display:flex;
    flex-direction: column;
    color: white;
    font-size: 2rem;
    padding: 20px;
    width: 100%;
}

.aside-logo p {
    font-size: 12px;
}
#aside-logo-mb {
    display: none;
}

.aside-logo a {
    text-decoration: none;
    color: white;
    font-size: 3rem;
}

aside hr {
    border-color: #4c5267;
    margin:0;
    padding:0;
}
.menu-link {
    color:#98A4CE;
    padding:20px 3px 20px 20px;
    display:block;
    text-decoration: none;
}

.menu-link:hover{
    color: white;
    border-left:solid 3px #363a51;
    background-color:#363a51;
    padding:20px 30px 20px 40px;
    display:block;

}

.menu-link:active {
    color: #67f494;
    border-left:solid 3px #67f494;
    background-color:#363a51;
    padding:20px 30px 20px 17px;
    display:block;
}

.active-menu-link {
    color: #67f494;
    border-left:solid 3px #67f494;
    background-color:#363a51;
    padding:20px 30px 20px 17px;
    display:block;
}


.far {
    color:#67f494;
    padding-right:15px;
}

.fas {
    color:#67f494;
    padding-right:15px;
}


/* MAIN SECTION */

main {
    display: flex;
    flex-direction: column;
    flex: 5;
    background-color:#98A4CE;
}

/*HEADER SECTION*/

header {
    display: flex;
    min-height: 50px;
    background-color: white;
}

.top-nav_right {
    display:flex;
    flex:1;
    flex-direction: row;
    justify-content: flex-end;
    margin-right: 30px;
}

.top-nav_left {
    display:none;
    flex: 1;
    flex-direction: row;
}

.top-nav_right-sm {
    display: none;
}

#burguer-menu {
    color:#67f494;
    padding-right:15px;

}

.content{
    flex: 4;
}

footer {
    display: flex;
    min-height: 50px;
    background-color:#4C5267;
}

footer p {
    padding: 0 0 0 30px;
    color:#98A4CE;
}


@media(max-width:660px) {
    aside {
        display:none;
    }
    .aside-logo{
        display:none;
    }

    #aside-logo-mb{
        display: block;
    }

    header{background-color:#1a2b42;}

    .top-nav_left {
        display:flex;
        flex: 1;
        flex-direction: row;
        color: white;
        padding: 0 0 0 20px;
    }

    .top-nav_right-sm {
        display: flex;
    }
    .top-nav_right {
        display: none;
    }
}

@media (min-width: 660px) {
  aside {
      display: inline !important;
  }
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<aside>
        <div class="aside-logo" id="aside-logo">
            LOGO
        <p>Your slogan </p>
        
        </div>
        <div class="aside-logo" id="aside-logo-mb">
         <a href="#">&times</a>    
        </div>
        <hr>
        <a href="#" class="active-menu-link"><i class="fas fa-home"></i> Home</a>
        <a href="#" class="menu-link"><i class="far fa-address-book"></i> Item 1</a>
        <a href="#" class="menu-link"><i class="far fa-calendar-alt"></i> Item 2</a>
        <a href="#" class="menu-link"><i class="fas fa-users"></i> Item 3</a>
        <a href="#" class="menu-link"><i class="far fa-check-square"></i> Item 4</a>
        <a href="#" class="menu-link"><i class="far fa-map"></i> Item 5</a>
        <a href="#" class="menu-link"><i class="fas fa-expand"></i> Item 6</a>
        <a href="#" class="menu-link"><i class="fas fa-feather-alt"></i>Item 8</a>
    
</aside>
<main>
    <header>
        <div class="top-nav_left">
            <p>LOGO</p>
        </div>
        <div class="top-nav_right">
                <a href="#"><i class="fas fa-user-circle"></i>Profile</a>
                <a href="#"><i class="fas fa-cog"></i>Settings</a>
        </div>
        <div class="top-nav_right-sm">
                <a href="#" id="burguer-menu" onclick="openMenu"><i class="fas fa-bars"></i></a>
        </div>
    </header>
    <div class="content">

    </div>
    <footer>
        <p>Copyright 2018</p>
        <p>Terms & Conditions</p>

    </footer>


</main>