ハンバーガーメニューの挙動を同じにしたいです。

http://demo.themegraphy.com/write-ja/
こちらのレスポンシブ化されたサイトのようなハンバーガーメニュー時にクリックするとモーダルのように画面全体をナビゲーションリストにしてスクロール出来なくするレイアウトは、cssだけでは厳しいですか？

フェードインならcssだけで実現できたのですが、こちらのサイト模写しているので同じ挙動にしたいです。

hatena19

2020/04/19 12:10

body に overflow: hidden を付加することになるので、CSSだけでは無理かと。 JSはクラスを付加するだけの簡単なものにして、あとはCSSで設定すれば実現できます。

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

回答2件

このサイトのようにスマホ版でしかハンバーガーメニューを使わないのであれば不可能ではないです。
どう考えても無駄な労力ですけど。

html
1<div class="hidden_box" style = "height: 2000px;">
2  <label for="label1">クリック</label>
3  <input type="checkbox" id = "label1">
4  <div class="hidden">
5    <div>ホーム</div>
6  </div>
7</div>

css
1.hidden_box {
2  margin: 2em 0;
3  padding: 0;
4}
5
6
7.hidden_box label {
8  padding: 15px;
9  font-weight: bold;
10  border: solid 2px black;
11  z-index: 100;
12  position: absolute;
13  touch-action: none;
14}
15
16.hidden_box input {
17  display: none;
18}
19
20.hidden_box .hidden {
21  display: none;
22}
23
24.hidden_box input:checked ~ .hidden {
25  width: 100vw;
26  height: 100vh;
27  touch-action: none;
28  background-color: #fff;
29  display: block;
30  position: absolute;
31  top: 0;
32  text-align: center
33}