0
広いビューポート用の水平フォーマットと小さいビューポート用のオフキャンバスメニューを切り替えるレスポンシブメニューを開発しています。オフキャンバス応答メニュー - 開いていると閉じる問題
私は、2つのフォーマットが特定のビューポート幅を持つデバイスで表示されることを完全に理解しています。また、デスクトップ上でWebサイトを表示するときに通常ブラウザーウィンドウのサイズを変更しないと主張する人もいます。しかし私はクライアントが問題としてそれを見ているので、これを解決する必要があります。
基本的に、ブラウザの幅が縮小されてメニューがオフキャンバスモードで表示され、メニューが開いたり閉じたりすると、ブラウザウィンドウの幅がリサイズされると、メニューリスト項目（水平形式）は隠された
これは、 'mySidenav'の幅が0pxであることを指示する '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
小さいビューポート（1024ピクセル以下）のデバイスでは、セクションがアコーディオン内に存在するように機能が変更され、ユーザーがそのフォーマットでナビゲートしやすくなり、固定ドットナビゲーションが消えるようにサイトを構築しましたそれはもはや必要ではない。 私の問題は今ではデバイスの向きです。言い換えれば、これをiPadでテストすると、ポートレート表示では、機能は機能し、縦のドットナビゲーションは非表示になります。 – Marc
しかし、私が説明したように、ユーザーがその特定のセクションにスクロールするまで非表示にする必要があります。 – Marc