离画布响应菜单-打开和关闭问题

Question

I'm developing an responsive menu that switches between a horizontal format for wider view ports and an off canvas menu for smaller view ports.

I completely understand that the two formats are meant to be viewed on devices with the specific view port widths, and that some may argue that people don't usually resize their browser window when viewing a website on desktop; however I need to resolve this since the client sees it as an issue.

Basically, when the browser width is diminished so that the menu is viewed in off canvas mode, and the menu is opened and closed, if the browser window width is then resized, the menu list items (in horizontal format) are hidden.

I'm assuming this is because of the 'closeNav' function which dictates that the width of 'mySidenav' is 0px. However, I've tried quite a few different solutions to this (including the window resize function, none of which have worked.

Please could anyone help me out with this.

Thanks.

 function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } 

 * { margin: 0; padding: 0; } html { font-size: 100%; } body { font-family: "Lato", sans-serif; margin: 0; padding: 0; } li { float: none; list-style-type: none; } #top-bar { display: block; width:100%; height: 53px; background-color: #fff400; } /* icon to open the navigation menu */ .burger { font-size: 2.3rem; color: #737171; cursor: pointer; position: absolute; z-index:1; top:8px; right:20px; display: block; } /* navigation menu container */ .sidenav { width: 0; height: 100%; position: fixed; z-index: 2; top: 0; right: 0; overflow-x: hidden; transition: 0.5s; } /* navigation menu anchor links */ .sidenav a { text-decoration: none; display: block; transition: 0.3s } /* close button */ a.closebtn { position: absolute; top: 3px; right: 20px; display: block; z-index: 3; } /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; } /* Dropdown Content list elements */ .dropdown-content li { float: none; } /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ .show {display:block;} @media screen and (max-height: 450px) { } @media screen and (min-width: 720px) { li { float: left; list-style-type: none; } /* icon to open the navigation menu */ .burger { display: none; } /* navigation menu container */ .sidenav { width: 790px; position: fixed; z-index: 1; top: 0; right: 0px; overflow-x: visible; } /* navigation menu anchor links */ .sidenav a { display: inline-block; transition: 0.3s; } /* close button */ a.closebtn { display: none; } } /* Dropdown Button .dropbtn { border: none; cursor: pointer; }*/ /* Links inside the dropdown .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } */ /* Change color of dropdown links on hover */ .dropdown-content a:hover {} /* Show the dropdown menu on hover*/ .dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content { display: block; } 

 <!--YELLOW TOP BAR--> <div id="top-bar"> <!--NAVIGATION MENU--> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li class="dropdown"><a href="#" class="dropbtn">Portfolio</a> <ul class="dropdown-content"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> </ul> </li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!--OPEN NAV BURGER--> <span class="burger ion-drag" onclick="openNav()"></span> </div> 

 function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } 

 * { margin: 0; padding: 0; } html { font-size: 100%; } body { font-family: "Lato", sans-serif; margin: 0; padding: 0; } li { float: none; list-style-type: none; } #top-bar { display: block; width:100%; height: 53px; background-color: #fff400; } /* icon to open the navigation menu */ .burger { font-size: 2.3rem; color: #737171; cursor: pointer; position: absolute; z-index:1; top:8px; right:20px; display: block; } /* navigation menu container */ .sidenav { width: 0; height: 100%; position: fixed; z-index: 2; top: 0; right: 0; overflow-x: hidden; transition: 0.5s; } /* navigation menu anchor links */ .sidenav a { text-decoration: none; display: block; transition: 0.3s } /* close button */ a.closebtn { position: absolute; top: 3px; right: 20px; display: block; z-index: 3; } /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; } /* Dropdown Content list elements */ .dropdown-content li { float: none; } /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ .show {display:block;} @media screen and (max-height: 450px) { } @media screen and (min-width: 720px) { li { float: left; list-style-type: none; } /* icon to open the navigation menu */ .burger { display: none; } /* navigation menu container */ .sidenav { width: 250px; position: fixed; z-index: 1; top: 0; right: 0px; overflow-x: visible; } /* navigation menu anchor links */ .sidenav a { display: inline-block; transition: 0.3s; } /* close button */ a.closebtn { display: none; } } /* Dropdown Button .dropbtn { border: none; cursor: pointer; }*/ /* Links inside the dropdown .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } */ /* Change color of dropdown links on hover */ .dropdown-content a:hover {} /* Show the dropdown menu on hover*/ .dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content { display: block; } 

 <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" type="text/css" media="all"> <!--YELLOW TOP BAR--> <div id="top-bar"> <!--NAVIGATION MENU--> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li class="dropdown"><a href="#" class="dropbtn">Portfolio</a> <ul class="dropdown-content"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> </ul> </li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!--OPEN NAV BURGER--> <span class="burger ion-drag" onclick="openNav()"></span> </div> 

Answer 1

You need to remove the styles that you have added when you clicked on menu bar in responsive while you resize the window. You can find the answer in this question.

jQuery $(window).resize(); equivalent event listener, that only fires on a specified axis change?