ハンバーガーメニューからリンクを選択しても自動で

Question

■実現したいこと
HTML、CSS、JavaScriptを使用してポートフォリオを作成しています。
ハンバーガーメニューを実装したのですがうまく動きません。

■要件
ハンバーガーメニューを作成。Gitにファイルをアップし自分の携帯端末iphone8で
ハンバーガーメニューを開き、リンクを選択した後メニューが消えません。

ただし、
ＰＣのデベロッパーツールを使用してiphone6/7/8の設定に変更。
ハンバーガーメニューからメニューを開きリンクを選択した後、メニューが消える。

リンク選択後メニューを消したいのですが、何か考えられることはありますでしょうか？

    <header id="header">
        <div class="container">
            <img src="img/bussines02.jpg">
            <!-- スマホ版ハンバーガーメニュー -->
            <div class="sp-menu">
                <span class="material-icons" style="color:white; background-color: gray;" id="open">menu</span>
            </div>

            <!-- ハンバーガーメニュー押下時のメニュー -->
            <div class="overlay">
                <span class="material-icons" style="color:white; background-color: gray;" id="close">close</span>
                <nav>
                <ul >
                    <li ><a href="#header" onclick="myFunction()">Top</a></li>
                    <li><a href="#profile" onclick="myFunction()">Profile</a></li>
                    <li onclick="myFunction()"><a href="#skillset">Skillset</a></li>
                    <li onclick="myFunction()"><a href="#works">Works</a></li>
                    <li onclick="myFunction()"><a href="#contact">Contact</a></li>               
                </ul>
                </nav>
            </div>
        </div>
    </header>

{
  // 開くのID取得
  const open = document.getElementById('open');
  const overlay = document.querySelector('.overlay');
  // 閉じるのID取得
  const close = document.getElementById(`close`);
  
  // メニューをクリックした場合
  open.addEventListener('click', () => {
    // メニュー画面を開く
    overlay.classList.add('show');
    // ハンバーガー三本を消す
    open.classList.add('hide');
  });


  // 閉じる押下時
  close.addEventListener('click', () => {
    overlay.classList.remove('show');
    // ハンバーガー三本を消す
    open.classList.remove('hide');
  });


  // メニューを選択した場合、閉じる押下と同じ処理を実行
  function myFunction() { 
    overlay.classList.remove('show');
    // ハンバーガー三本を消す
    open.classList.remove('hide');
  }

  }

コード

@charset "utf-8";

/* -------------------------------------- */
/* common 全体共通 */
/* -------------------------------------- */
body{
  width: auto;
  margin:0;
  background-color:whitesmoke;
  padding: 0;  
}
img{
  vertical-align:bottom;
}
h1,h2,h3,p{
  margin: 0;
  padding: 0;
  font-weight: normal;
  /* font-family: 'Osaka',sans-serif; */
}
h1{
  font-weight: bold;
  font-size: 64px;
  font-family: 'Caveat', cursive;
}
h3{
  font-weight: bold;
  font-size: 56px;
  font-family: 'Caveat', cursive;
  color:gray;
}
li{
  list-style: none;
}
/* -------------------------------------- */
/* header */
/* -------------------------------------- */
/* header */
header .Prof{
  color:gray;
}
header{
  background-color:whitesmoke;
  /* background-color: darkcyan; */

}
/* ヘッダ画像 */
header .container img{
  background-size:cover;
  width: 100%;
  height: auto;
}
header .container p{
  display: inline-block;
  width: 500px;
  color: black;
}
header h1{
  /* 下記は写真いっぱいのサイズになる */
  padding-top: 300px;
  color: black;
}

/* -------------------------------------- */
/* main（About）  */
/* -------------------------------------- */
main .container{
  width: 1000px;
  margin: 0 auto;
  text-align: center;
}
main .container .page01{
  /* width: 800px; */
  justify-content: space-between;
  padding: 32px 0px;
  display: flex;
  align-items: center;
}

main .image{
  display: block;
  margin: 0 auto;
}
main .Profile{
  text-align: left;
  font-size: 20px;
  padding-left: 64px;
}
main h1{
  text-align: center;
  padding: 60px 0px;
}
main h3{
  padding-top:60px;
  padding-bottom: 20px;
}

/* ----------------------------------------------- */
/* ページトップへ */
/* ----------------------------------------------- */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background:gray;
  /* opacity: 0.6; */
  border-radius: 5px;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/* ----------------------------------------------- */
/* ハンバーガーメニュー処理 */
/* ----------------------------------------------- */
/* ハンバーガーメニュー　アイコン */
header .sp-menu {
  margin: 0;
  /* margin-left: auto; */
  text-align: center;
}

.sp-menu #open {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 32px;
  line-height: 50px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  /* カーソル移動時固定する */
  position: fixed;
}

/* // ハンバーガー三本を消す
open.classList.add('hide'); */
.sp-menu #open.hide{
  display: none;
}

/*Menuの表示  */
  .overlay {
    font-size: 32px;
    color:black;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.95);
    text-align: center;
    padding: 64px;
    opacity: 0;
    pointer-events: none;
    /* transition:opacity 0.6s; */
    /* ふわっと表示させる */
    transition: opacity .6s;
  }

    /* // メニュー画面を開く
  overlay.classList.add('show'); */
  .overlay.show {
    opacity: 1;
    /* マウスを */
    pointer-events: auto;
    /* background-color:grey; */
  }

  /* 「×」を右上に */
  .overlay #close {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 32px;
    line-height: 50px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    /* カーソル移動時固定する */
    position: fixed;
  }

/* LISTの●を非表示 */
.overlay ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
  
/*  */
.overlay li {
  margin-top: 24px;
  /* 下からふわっと */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s, transform .3s;
}

/* 下からふわっと */
/* overlayがshowの場合 */
.overlay.show li {
  /* menuを表示 */
  opacity: 1;
  transform: none;
}

/* Menu1⇒ Menu2⇒ Menu3 の順に表示*/
.overlay.show li:nth-child(1) {
  transition-delay: .1s;
}

.overlay.show li:nth-child(2) {
  transition-delay: .2s;
}

.overlay.show li:nth-child(3) {
  transition-delay: .3s;
}
.overlay.show li:nth-child(4) {
  transition-delay: .4s;
}
.overlay.show li:nth-child(5) {
  transition-delay: .5s;
}

@media(min-width: 100px) and (max-width: 800px){
  h3{
    font-size: 40px;
  }
/* ----------------------------------------------- */
/* Top */
/* ----------------------------------------------- */
  header .container p{
    width: 300px;
  }
  header .container{
    background-position:30% 40%;
  }
  /* 「Portforio」フォント */
  header h1{
    padding-top: 140px;
  }
/* ----------------------------------------------- */
/* About */
/* ----------------------------------------------- */

main .container{
    width: auto;
    margin: 0
  }
  main .container .page01{
    display:block;
    margin: 0px  auto;
    padding: 0px 0px;
    width: 95%;
    /* background-color: burlywood; */
  }
  main .image{
    display: block;
    margin: 0;
  }
  main .Profile{
    text-align: left;
    font-size: 20px;
    padding-top: 16px;
    padding-left: 16px;
  }
  main h1{
    margin:0px;
    padding: 0px;
  }
  main h3{
    margin:0px;
  }
/* ----------------------------------------------- */
/* スキルBOX */
/* ----------------------------------------------- */
  main .page02 .slkillpanel{
    /* スキルBOXを縦並びにします */
    display: block;
    /* margin: 0 auto; */
  }
  main .page02 .skillbox{
    margin: 20px auto;
    padding: 10px 0px;
    box-sizing: border-box;
  }
  /* フロントエンド、DB、その他 */
  main .page02 span{
    font-size: 16px;
  }
  
/* -------------------------------------- */
/* 【WORK】 */
/* -------------------------------------- */
.page03 .copylp{
    display: block;
    /* float: left; */
    /* background-color: brown; */

    /* margin-bottom: 8px; */
  }
  .page03 img{
    margin-bottom: 16px;
  }

  .page03 .workpanel{
    font-size: 12px;
    /* height: 650px;
     */
     height: auto;
    margin-bottom: 30px;
  }
}

Comments

[175]

CSSも記載してください。

[Rabitttt]

ありがとうございます。
追加しました。

Answer 1

まず、現象が発生するのはiphoneというかsafariですよね。
私のmacのsafariでも再現しました。
以下、手探りで修正ポイント見つけ出しました。
・id'open'を'open2'等に変更
→この変更を行わないと、リンクをクリックした後にopenが消えてしまう
→エディタでopenだけ別の色がついていたので気になって調べてみたらwindowsでの予約後だったため、一応変更してみたら動くようになりました

・class="overlay"の要素にid="overlay"を付与する
→これでリンククリックによりメニューが閉じるようになります
→なぜこれで治るのか本当に謎
→idが"overlay"の場合しか動きません
→id付与でclassを消した場合も動きません
→getElementsByClassName("overlay")[0]で取得した場合も全く同様の挙動

どなたか理由説明できる方補足お願いします。

Comments

[Rabitttt]

回答ありがとうございます。
はい、safariです。
・id'open'を'open2'等に変更
・class="overlay"の要素にid="overlay"を付与する
上記対応でメニューは消えるようになりましたが、その後「ハンバーガー」ボタンが表示されません。

ＰＣのデベロッパーツールではメニューが消えた後でも「ハンバーガー」ボタンは表示します。。

[175]

多分「id'open'を'open2'等に変更」が何か修正漏れてるような気がします
一括置換で変更しましたか？

>ＰＣのデベロッパーツール
ブラウザについて情報を記載する際はブラウザ名も説明してください。
PCの何のブラウザの話ですか

[Rabitttt]

>一括置換で変更しましたか？
はい、一括で変えました。

>ブラウザについて情報を記載する際はブラウザ名も説明してください。
>PCの何のブラウザの話ですか
PCのツールはgooglechromeです。これだと正常。

id="overlay"を付与した場合css変更箇所は必要ですか？
.overlay.show ⇒#overlay.show　にする必要あり？

[175]

class="overlay"も残っているので指定方法の変更は不要です
また影響しているのはoverlayの方ではなくopen2の要素です
現状のソースコードを記載してください

[Rabitttt]

■HTML
<header id="header">
<div class="container">
<img src="img/bussines02.jpg">
<!-- スマホ版ハンバーガーメニュー -->
<div class="sp-menu">
<span class="material-icons" style="color:white; background-color: gray;" id="open2">menu</span>
</div>

<!-- ハンバーガーメニュー押下時のメニュー -->
<div class="overlay" id="overlay">
<span class="material-icons" style="color:white; background-color: gray;" id="close">close</span>
<nav>
<ul >
<li ><a href="#header" onclick="myFunction()">Top</a></li>
<li><a href="#profile" onclick="myFunction()">Profile</a></li>
<li onclick="myFunction()"><a href="#skillset">Skillset</a></li>
<li onclick="myFunction()"><a href="#works">Works</a></li>
<li onclick="myFunction()"><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>

■CSS
/* ----------------------------------------------- */
/* ハンバーガーメニュー処理 */
/* ----------------------------------------------- */
/* ハンバーガーメニュー　アイコン */
header .sp-menu {
margin: 0;
/* margin-left: auto; */
text-align: center;
}

/* ????のスタイリング */
.sp-menu #open2 {
position: absolute;
top: 0px;
right: 0px;
font-size: 32px;
line-height: 50px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
width: 50px;
height: 50px;
border-radius: 5px;
/* カーソル移動時固定する */
position: fixed;
}

/* // ハンバーガー三本を消す
/* ????のスタイリング 非表示*/
.sp-menu #open2.hide{
display: none;
}

/*Menuのスタイリング */
.overlay {
font-size: 32px;
color:black;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(255, 255, 255, 0.95);
text-align: center;
padding: 64px;
opacity: 0;
pointer-events: none;
/* transition:opacity 0.6s; */
/* ふわっと表示させる */
transition: opacity .6s;
}

/* メニュー画面を開く */
.overlay.show {
opacity: 1;
/* マウスを */
pointer-events: auto;
/* background-color:grey; */
}

/* 「×」を右上に */
.overlay #close {
position: absolute;
top: 0px;
right: 0px;
font-size: 32px;
line-height: 50px;
cursor: pointer;
width: 50px;
height: 50px;
border-radius: 5px;
/* カーソル移動時固定する */
position: fixed;
}

/* LISTの●を非表示 */
.overlay ul {
list-style-type: none;
margin: 0;
padding: 0;
}

/* */
.overlay li {
margin-top: 24px;
/* 下からふわっと */
opacity: 0;
transform: translateY(16px);
transition: opacity 0.3s, transform .3s;
}

/* 下からふわっと */
/* overlayがshowの場合 */
.overlay.show li {
/* menuを表示 */
opacity: 1;
transform: none;
}

/* Menu1⇒ Menu2⇒ Menu3 の順に表示*/
.overlay.show li:nth-child(1) {
transition-delay: .1s;
}

.overlay.show li:nth-child(2) {
transition-delay: .2s;
}

.overlay.show li:nth-child(3) {
transition-delay: .3s;
}
.overlay.show li:nth-child(4) {
transition-delay: .4s;
}
.overlay.show li:nth-child(5) {
transition-delay: .5s;
}

■Js
// 開くのID取得
const open = document.getElementById('open2');
const overlay = document.querySelector('.overlay');
// 閉じるのID取得
const close = document.getElementById(`close`);

// メニューをクリックした場合
open.addEventListener('click', () => {
// メニュー画面を開く
overlay.classList.add('show');
// ハンバーガー三本を消す
open.classList.add('hide');
});

// 閉じる押下時
close.addEventListener('click', () => {
overlay.classList.remove('show');
// ハンバーガー三本を消す
open.classList.remove('hide');
});

// メニューを選択した場合、閉じる押下と同じ処理を実行
function myFunction() {
overlay.classList.remove('show');
// ハンバーガー三本を消す
open.classList.remove('hide');
}

[175]

ん〜、mac版safariではそのソースコードで意図通り動くこと確認しました
リンククリックでメニューを閉じた後ボタンが消えてしまうのはiOS版safariでのみ発生しているようですね

[175]

一応const openもopen2に変更してみてください
（もともとこの変数名が予約語と重複する可能性があるため、一括置換してもらう意図で変更をお願いしました）

[Rabitttt]

なるほどです。。
一応携帯でsafari,chromeで動かしたのですが
同現象が発生してしまいます。

[Rabitttt]

>一応const openもopen2に変更してみてください
変更してみましたが改善しませんでした。(´；ω；`)ｳｯ…

[Rabitttt]

>一応const openもopen2に変更してみてください
すみません。上記対応で改善しました。(^^♪
うまく更新されてなかっただけでした。
ありがとうございました。

[175]

解決してよかったです
ただしなぜこれで直るのかはマジで謎なので分かる方おられたら補足ほしいです