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

我开发更广泛的视口水平格式和更小的视口关闭帆布菜单之间进行切换的响应菜单。关闭帆布响应菜单 - 打开和关闭问题

我完全理解这两种格式都意味着要与特定视图端口宽度在设备上查看，而有些人可能会认为，人们通常不会调整观看桌面上的一个网站时，他们的浏览器窗口;不过，我需要解决这个问题，因为客户将其视为一个问题。

基本上，当浏览器宽度减小以便在非画布模式下查看菜单，并且打开和关闭菜单时，如果浏览器窗口宽度随后调整大小，菜单列表项（以横向格式）为隐。

我假定这是因为它决定了“mySidenav”的宽度是0像素的“closeNav”的功能。不过，我已经试过这个相当多的不同的解决方案（包括的窗口大小调整功能，其中没有工作过。

请任何人都可以帮我出这一点。

感谢。

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>

来源

2017-04-02 Marc

您需要删除，当您点击响应菜单栏上，同时调整窗口的大小，你所添加的样式。你可以在这个问题中找到答案。

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

来源

2017-04-02 15:25:44 edonbajrami

你好，很抱歉这么晚才回复，感谢您的回答，我还是设法解决这个问题到底。不过，我还有一个问题...我有一个固定的垂直点导航变淡在当用户滚动到网站上的某些部分，使他们可以看到有多少段过去这一点，并可以相应地导航。如果用户然后向上滚动回页面的顶部，则导航会再次淡出。 – Marc

我已经构建了该网站，以便在具有较小视口（小于1024px宽）的功能更改的设备上显示这些部分，以便手风琴中的部分存在，以便用户以该格式导航，并且固定点导航从此消失它不再是必需的。现在我的问题是设备方向的，换句话说，在iPad上测试这个时候，在纵向视图功能的工作原理，以便垂直点导航被隐藏， – Marc

然而，如果方向改变为横向它出现的地方你在页面上，甚至在顶部，正如我已经解释的那样，当用户滚动到某个部分时，它应该被隐藏。 – Marc

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

回答

相关问题