CSSのみのハンバーガーメニュー実装

サルワカさんのサイト
https://saruwakakun.com/html-css/reference/nav-drawer

このサイトにあるように、CSSでハンバーガーメニューを作っているのですが、
ページを開いたときに、メニューの中身が左側へ移動してるのが表示されてしまいます。

サルワカさんのデモでは、最初から左側へ隠れているのですが、
自分のエディタにコピペして表示させると、上記の不具合が生じます。

回答よろしくお願いします。

【追加】

ページを更新した時の表示です。（２回更新ボタン押しています）

windows10のChromeをつかっています。

該当のソースコード

HTML
<header>
  <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">ここに中身を入れる</div>
  </div>
</header>



CSS
header {
  padding:10px;
  background: skyblue;
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

Lhankor_Mhy

2020/04/06 09:36

当方の環境でご提示のコードで試してみましたが、ハンバーガーメニューは隠れていました。つまり、「ページを開いたときに、メニューの中身が左側へ移動してるのが表示されてしまいます」という問題が再現しません。 Re0922さんの環境では、ご提示のコード*だけ*で問題が再現しますか？再現するのであれば、環境の問題だと思います。問題が再現するであろう環境をご提示ください。再現しないのであれば、ご提示いただいていない部分に問題があると思います。問題が再現するコードをご提示ください。

Re0922

2020/04/06 11:27

htmlに関しては <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> </body> </html> といった具合で、ほとんど余計なものはない状態です。 CSSは上記そのままです。よろしくお願いします。

Lhankor_Mhy

2020/04/07 01:29

上記のHTMLと質問文のCSSのコードで試してみましたが、やはり問題が再現しません。可能性としては二つあります。・特定の状況でないと再現しない問題である。 →　特定のブラウザやOSの時だけ問題が起きる、など。・問題の認識に齟齬がある。 →　私の環境でも問題が再現しているが、私がそれを問題だと認識していない、など。前者であれば、当方の環境は win10 の Chrome と Firefox でテストしています。環境が大きく違うようであればお知らせください。後者であれば、問題の部分をスクリーンショットや動画などで提示していただければ、解決するかもしれません。

Lhankor_Mhy

2020/04/07 03:59

質問の変更を拝読。やはり、問題が再現していないようです。コピペでサンプルを書いてみました。 https://jsfiddle.net/Lhankor_Mhy/bftry415/ ↑このページで問題は再現しますか？

Re0922

2020/04/07 11:50

そちらのページでは、問題は発生せずうまくいきました。なぜでしょうか？

Lhankor_Mhy

2020/04/08 02:59

うーん、当方としては、ご提示のコードをコピペしただけなので、逆に「実際のコードとは何が違うのですか？」とお聞きしたいぐらい…… HTMLもCSSも、ご提示されているもの以外に一切ないのであれば、考えられそうなのは、・JavaScriptの影響・ユーザースタイルシートが効いている・キャッシュが効いているなどして、最新のコードが読み込まれていない。などでしょうか。

Lhankor_Mhy

2020/04/08 03:03

ああ、あとは、pjaxだともしかしたらそんな現象が起きるかもしれないですね。

Re0922

2020/04/09 04:04

同じコードをFireFoxで表示してみたら、うまくいきました！よって、恐らくChromeに問題があるのだと思うですが、初心者ですので原因わかりません。是非、ご教授の程よろしくお願いします。

Lhankor_Mhy

2020/04/09 04:27 編集

まず、当方で問題が確認できないので、これ以上のことはどうしようもありません。 Chromeで問題を再現できるコードをご提示ください。

Re0922

2020/04/09 07:16

コードは、上述したのと同じです。 Chromeの設定をデフォルトに戻すなど、疑わしいことは全て試しましたが、うまくいかなかったのであきらめようと思います。親切な対応、ありがとうございました。

storm3

2020/04/09 11:04

私の環境では(バージョン: 81.0.4044.92（Official Build）（64 ビット）)は再現します。ただすぐには解決方法がわかりません。今わかっているのは再現するパターンとしないパターンがあり。 HTMLに直接CSSを<script>タグなどで書くと再現しません。このスレッド内に記載されたようにcssを外部ファイルにして<link>で読み込むと再現します。分っているのはそれだけです。

storm3

2020/04/09 12:54 編集

追記。ちょっとwebサーバに乗せて表示してみました。サーバにファイルがある場合ではリフレッシュではこの現象は再現しませんでした。ただ、スパーリフレッシュでは再現しますね。元にしたサルワカさんのSANGOというサイトでは外部ファイルで読み込んでいても再現しないのでそこと比較してみても良いかと思います。

Re0922

2020/04/09 14:45

確かに、私の環境でもHTMLに直接CSSを書き込んだ場合では、問題は再現しませんでした。正直、この問題は初心者の私には重すぎるので、別の方法でハンバーガーメニューを作ろうと思っています。ご回答ありがとうございました。ただ、解決方法が分かった方は、いつでもよいのでご教授いただけるとありがたいです。

Lhankor_Mhy

2020/04/10 00:21 編集

storm3さんのコメントを見て、ローカルサーバではなく、ローカルのfileスキームで実行してみたところ、Chromeで問題が再現しました。なるほど…… ただ、ローカルサーバの場合、スーパーリロードをかけても再現しませんでした。普通に考えて、CSSの読み込み中はレンダリングブロックがかかるはずですよね。これは、何なんだろう？

行動規範の内容に同意します

回答1件

ベストアンサー

どうやら、Chromeのバグの様です。

とりあえず、対処法を先に。

html
1<link rel="stylesheet" href="css/style.css">
2<script> </script>

↑のように、半角スペース一つだけのダミーのJavaScriptタグをCSSの後に入れると、解決します。

SOにこのような質問がありました。

html - Stop CSS transition from firing on page load - Stack Overflow

この内容とリンク先のバグレポートを総合すると、以下のようなことらしいです。

問題の現象：

ページロード時に、CSS transition が動作してしまう。
デフォルトと異なるプロパティについて、変化があったと判別している？
CSS読み込みによる、レンダリングブロックも無視している？

再現条件：

ローカルファイルのHTMLで、link要素を経由してCSSを読み込んでいること
link要素の後に、script要素がないこと
form要素があると、ローカルではなくても問題が再現する？

大変興味深い現象でした。
良質問ありがとうございました。

投稿2020/04/10 01:05

編集2020/04/10 01:10

Lhankor_Mhy

総合スコア36960

Re0922

2020/04/10 05:18

とりあえず、解決方法がわかってよかったです。みなさんの回答を完全に理解できるよう、これからも勉強していきたいと思います。 Lhankor_Mhyさん、storm3さん、本当にありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

CSSのみのハンバーガーメニュー実装

該当のソースコード

関連した質問