0
我開發更廣泛的視口水平格式和更小的視口關閉帆布菜單之間進行切換的響應菜單。關閉帆布響應菜單 - 打開和關閉問題
我完全理解這兩種格式都意味着要與特定視圖端口寬度在設備上查看，而有些人可能會認爲，人們通常不會調整觀看桌面上的一個網站時，他們的瀏覽器窗口;不過，我需要解決這個問題，因爲客戶將其視爲一個問題。
基本上，當瀏覽器寬度減小以便在非畫布模式下查看菜單，並且打開和關閉菜單時，如果瀏覽器窗口寬度隨後調整大小，菜單列表項（以橫向格式）爲隱。
我假定這是因爲它決定了「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()">×</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()">×</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>
你好，很抱歉這麼晚纔回復，感謝您的回答，我還是設法解決這個問題到底。 不過，我還有一個問題...我有一個固定的垂直點導航變淡在當用戶滾動到網站上的某些部分，使他們可以看到有多少段過去這一點，並可以相應地導航。 如果用戶然後向上滾動回頁面的頂部，則導航會再次淡出。 – Marc
我已經構建了該網站，以便在具有較小視口（小於1024px寬）的功能更改的設備上顯示這些部分，以便手風琴中的部分存在，以便用戶以該格式導航，並且固定點導航從此消失它不再是必需的。現在 我的問題是設備方向的，換句話說，在iPad上測試這個時候，在縱向視圖功能的工作原理，以便垂直點導航被隱藏， – Marc
然而，如果方向改變爲橫向它出現的地方你在頁面上，甚至在頂部，正如我已經解釋的那樣，當用戶滾動到某個部分時，它應該被隱藏。 – Marc