チェックボックスボタンを押してもナビゲーションが表示されない

前提・実現したいこと

HTML,CSSのみでハンバーガーメニューの実現に取り組んでいます。
行いたいのはchekoxを押すと隠れていたナビゲーションが表示されるようにしたいです。

最終的にcheckboxをFontawsomeの三本線と重ね合わせてopacityで表示を消す予定です。

発生している問題・エラーメッセージ

768px以下の時に常に表示されているナビゲーションをハンバーガーメニューとしたいんですが、
その実現の為、input checkboxでボタンを作り、translateで表示を上部へ隠すことはできたのですが、チェックボタンを押してもナビゲーションが出てこない状態です。

ご教示お願い致します。

該当のソースコード

【HTML】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <title>あいうえおく</title> </head> <body> <div class="wrap"> <header class=header></header> <main> <div class="back"></div>

        <nav class=nav>
            <ul>
                <li><a href=#info>info</a></li>
                <li><a href=#menu>menu</a></li>
                <li><a href=#access>access</a></li>
                <li><a href=#aboutus>aboutus</a></li>
                <li><a href=#goods>goods</a></li>
            </ul>
        </nav>

        <div class="logoback"></div>
        <div class="logo">
            <img src="images/logo.png">
        </div>

        <div class="logologo">
            <img src="images/logo_left.png">
        </div>

        <div class="icon">
            <ul>
                <li><i class="fab fa-facebook-square facebook"></i></li>
                <li><i class="fab fa-twitter-square twitter"></i></li>
                <li><i class="fab fa-youtube-square youtube"></i></li>
            </ul>
        </div>

        <div class="message">
            <h5>あいうえお</h5>
            <p>
                あいうえおあいうえお
            </p>
        </div>
        <div id="info">

        </div>

        <div id="menu">

        </div>

        <div id="access">

        </div>

        <div id="aboutus">

        </div>

        <div id="goods">

        </div>

        <!--スマホ用バーガーメニュー-->
        <input type="checkbox" class="btn">
        

        <div class="sphone">
           <i class="fas fa-bars"></i>
        </div>
        
       
</div>

</main>
</div>


<script>
    $(function(){
      $('a[href^="#"]').click(function(){
        var speed = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
      });
    });
    </script>

</body> </html>

---【CSS】---

*{
margin: 0;
padding: 0;
}

body{
font-family: "游ゴシック","YuGothic","ＭＳＰゴシック","MS PGothic",Sans-Serif;
}

a{
color: #fff;
}

.back{
width: 100%;
height: 100vh;
background-image: url("images/top2.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

.nav{
position:fixed;
top:100px;
left:30px;
height: 100%;
}

.nav li{
font-family: 'Rock Salt', cursive;
color: rgb(252, 252, 252);
font-size: 20px;
list-style: none;
padding-left: 30px;
}

.message{
position: absolute;
top:57%;
right:5%;
}

.message img{
width: 70%;
height: auto;
position: absolute;
top:-20%;
right:-40%;
}

.message P{
font-size: 19px;
}

.message p small{
font-size: 12px;
}

.messageback{
width:35%;
height: 45%;
opacity: 0.1;
background-color: black;
position: absolute;
top:55%;
right:2%;
}

.logoback{
width:100%;
height:50px;
background-color: white;
position: absolute;
top:0;
}

.logo{
position: absolute;
top:0%;
}

.logo img{
height: 14%;
width: 29%;
padding-left: 10%;
}

.logologo{
position: absolute;
top:-1%;
left:1%;
}

.logologo img{
width:23%;
}

.logoright{
position: absolute;
top:2%;
left:11%;
}

.icon{
width: 12%;
position: absolute;
top:2%;
right: 0%;
}

.icon li{
display: inline;
padding-left:5%;
font-size:1.5em;;
}

.facebook{
color:#315096;
}

.twitter{
color:#55acee;
}

.youtube{
color:#ff0000;
}

.message{
position: absolute;
top:60%;
}
.message p {
color: white;
}

#info{
background-image: url("images/back2.jpg");
width: 100%;
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

#menu{
background-image: url("images/menu2.jpg");
width: 100%;
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

#access{
background-image: url("images/access1.jpg");
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

#aboutus{
background-image: url("images/about.jpg");
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: 0% 70%;
}

#goods{
background-image: url("images/goods1.jpg");
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position:0% 50%;
}

/スマホ用/
@media screen and (max-width:768px) {
.logo img{
margin-left: 50px;
padding-top:1%;
}

.logologo img{
    margin-left: 56px;
    width:21px;
}

.icon{
    width:30%;
}


.btn{
    position: absolute;
    top:3%;
    left:5%;
}

.nav{
    background-color: black;
    height: 91%;
    position: absolute;
    top: 50px;
    left:1px;
    transform: translateY(-100%);
}

.btn:checked ~ .nav{
    transform: translateY(0%);
 }

.nav ul{
    width:100px;
}

.message{
    width: 80%;
    position: absolute;
    top:70%;
}

.message p{
    font-size: 85%;
}

.message h5{
   background-color: blanchedalmond;
   font-size: 70%;
}

.nav li{
    color: rgb(252, 252, 252);
    font-size: 15px;
    list-style: none;
    padding-left:15px;
}


.sphone{
    position: absolute;
    top:3%;
    left:10%;
}

}

試したこと

translateで表示を上部へ隠すことはできたのですが、チェックボタンを押しても
ナビゲーションが出てこない状態です。

.nav{
background-color: black;
height: 91%;
position: absolute;
top: 50px;
left:1px;
transform: translateY(-100%);
}

.btn:checked ~ .nav{
    transform: translateY(0%);
 }

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

回答2件

表示させるのにチェックボックスなんていりません。

ハンバーガーボタン（三本線）をクリックしたら表示するようにイベントハンドラを用意すればいい

チェックボックスを使っていた時もそうですが
・チェックボックスなら、チェックするためにクリックするイベントを
処理してなかったから表示する処理に続かなかった

　　・ハンバーガーボタン（三本線）なら、ハンバーガーボタン（三本線）のクリックするイベントを
処理して表示・非表示を切り替えればいい

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5<meta charset="UTF-8">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<meta name="viewport" content="width=device-width, initial-scale=1.0">
8<link rel="stylesheet" type="text/css" href="style.css">
9<link rel="preconnect" href="https://fonts.googleapis.com">
10<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11<link href="https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap" rel="stylesheet">
12<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
13<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
14<title>あいうえおく</title>
15</head>
16
17<body>
18<div class="wrap">
19<header class="header"></header> <!-- クラス名をダブルクオーテーションで囲んでなかったのを修正 -->
20<main>
21<div class="back"></div>
22
23<nav class="nav"> <!-- クラス名をダブルクオーテーションで囲んでなかったのを修正 -->
24<ul>
25<li><a href=#info>info</a></li>
26<li><a href=#menu>menu</a></li>
27<li><a href=#access>access</a></li>
28<li><a href=#aboutus>aboutus</a></li>
29<li><a href=#goods>goods</a></li>
30</ul>
31</nav>
32
33<div class="logoback"></div>
34<div class="logo">
35<img src="images/logo.png">
36</div>
37
38<div class="logologo">
39<img src="images/logo_left.png">
40</div>
41
42<div class="icon">
43<ul>
44<li><i class="fab fa-facebook-square facebook"></i></li>
45<li><i class="fab fa-twitter-square twitter"></i></li>
46<li><i class="fab fa-youtube-square youtube"></i></li>
47</ul>
48</div>
49
50<div class="message">
51<h5>あいうえお</h5>
52<p>
53あいうえおあいうえお
54</p>
55</div>
56<div id="info">
57info position
58</div>
59
60<div id="menu">
61menu position
62</div>
63
64<div id="access">
65access position
66</div>
67
68<div id="aboutus">
69about us position
70</div>
71
72<div id="goods">
73goods position
74</div>
75
76<!--スマホ用バーガーメニュー-->
77<!-- <input type="checkbox" class="btn"> -->
78<!-- チェックボックスなんていらない。直接 sphoneクラスの付いたdivがクリックされたら表示・非表示を切り替えればいいだけのこと-->
79
80<div class="sphone">
81<i class="fas fa-bars"></i>
82</div>
83
84</div>
85
86</main>
87</div>
88
89<script>
90$(function() {
91    $('.sphone').on('click', function () {
92        $(".nav").slideToggle(); //ハンバーガーボタンが押されるたびにスライドしながら表示・非表示が切り替わる
93    });
94
95    $('a[href^="#"]').on('click', function() {
96        var speed = 500;
97        var href= $(this).attr("href");
98        var target = $(href == "#" || href == "" ? 'html' : href);
99        var position = target.offset().top;
100        $("html, body").animate({scrollTop:position}, speed, "swing");
101    return false;
102    });
103});
104</script>
105</body>
106
107</html>
108
109

css
1@charset "UTF-8";
2
3*{
4    margin: 0;
5    padding: 0;
6}
7    
8body{
9    font-family: "游ゴシック","YuGothic","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
10}
11    
12a{
13    color: #fff;
14}
15    
16.back{
17    width: 100%;
18    height: 100vh;
19    background-image: url("images/top2.jpg");
20    background-position: center;
21    background-repeat: no-repeat;
22    background-attachment: fixed;
23    background-size: cover;
24}
25    
26.nav{
27    position:fixed;
28    top:100px;
29    left:30px;
30    height: 100%;
31    background-color: black;
32    display: block; /* PCでは表示する */
33}
34    
35.nav li{
36    font-family: 'Rock Salt', cursive;
37    color: rgb(252, 252, 252);
38    font-size: 20px;
39    list-style: none;
40    padding-left: 30px;
41}
42    
43.sphone{
44    position: absolute;
45    top:3%;
46    left:10%;
47    display: none; /* PCではハンバーガーアイコンは非表示 */
48}
49
50.message{
51    position: absolute;
52    top:57%;
53    right:5%;
54}
55    
56.message img{
57    width: 70%;
58    height: auto;
59    position: absolute;
60    top:-20%;
61    right:-40%;
62}
63    
64.message P{
65    font-size: 19px;
66}
67    
68.message p small{
69    font-size: 12px;
70}
71    
72.messageback{
73    width:35%;
74    height: 45%;
75    opacity: 0.1;
76    background-color: black;
77    position: absolute;
78    top:55%;
79    right:2%;
80}
81    
82.logoback{
83    width:100%;
84    height:50px;
85    background-color: white;
86    position: absolute;
87    top:0;
88}
89    
90.logo{
91    position: absolute;
92    top:0%;
93}
94    
95.logo img{
96    height: 14%;
97    width: 29%;
98    padding-left: 10%;
99}
100    
101.logologo{
102    position: absolute;
103    top:-1%;
104    left:1%;
105}
106    
107.logologo img{
108    width:23%;
109}
110    
111.logoright{
112    position: absolute;
113    top:2%;
114    left:11%;
115}
116    
117.icon{
118    width: 12%;
119    position: absolute;
120    top:2%;
121    right: 0%;
122}
123    
124.icon li{
125    display: inline;
126    padding-left:5%;
127    font-size:1.5em;;
128}
129    
130.facebook{
131    color:#315096;
132}
133    
134.twitter{
135    color:#55acee;
136}
137    
138.youtube{
139    color:#ff0000;
140}
141    
142.message{
143    position: absolute;
144    top:60%;
145}
146.message p {
147    color: white;
148}
149    
150#info{
151    background-image: url("images/back2.jpg");
152    width: 100%;
153    height: 100vh;
154    background-size: cover;
155    background-repeat: no-repeat;
156    background-attachment: fixed;
157}
158    
159#menu{
160    background-image: url("images/menu2.jpg");
161    width: 100%;
162    height: 100vh;
163    background-size: cover;
164    background-repeat: no-repeat;
165    background-attachment: fixed;
166}
167    
168#access{
169    background-image: url("images/access1.jpg");
170    width: 100%;
171    height: 100vh;
172    background-repeat: no-repeat;
173    background-attachment: fixed;
174    background-size: cover;
175}
176    
177#aboutus{
178    background-image: url("images/about.jpg");
179    width: 100%;
180    height: 100vh;
181    background-repeat: no-repeat;
182    background-attachment: fixed;
183    background-size: cover;
184    background-position: 0% 70%;
185}
186    
187#goods{
188    background-image: url("images/goods1.jpg");
189    width: 100%;
190    height: 100vh;
191    background-repeat: no-repeat;
192    background-attachment: fixed;
193    background-size: cover;
194    background-position:0% 50%;
195}
196    
197/*スマホ用*/
198@media screen and (max-width:768px) {
199    .logo img{
200        margin-left: 50px;
201        padding-top:1%;
202    }
203    
204    .logologo img{
205        margin-left: 56px;
206        width:21px;
207    }
208    
209    .icon{
210        width:30%;
211    }
212    
213    /*.btn{
214        position: absolute;
215        top:3%;
216        left:5%;
217    }*/
218    
219    .nav{
220        background-color: black;
221        height: 91%;
222        position: absolute;
223        top: 50px;
224        left:1px;
225        /*transform: translateY(-100%);*/
226        display: none; /* スマホでは初期状態は非表示 */
227    }
228    
229    /*.btn:checked ~ .nav{
230        transform: translateY(0%);
231    }*/
232    
233    .nav ul{
234        width:100px;
235    }
236    
237    .message{
238        width: 80%;
239        position: absolute;
240        top:70%;
241    }
242    
243    .message p{
244        font-size: 85%;
245    }
246    
247    .message h5{
248        background-color: blanchedalmond;
249        font-size: 70%;
250    }
251    
252    .nav li{
253        color: rgb(252, 252, 252);
254        font-size: 15px;
255        list-style: none;
256        padding-left:15px;
257    }
258    
259    .sphone{
260        position: absolute;
261        top:3%;
262        left:10%;
263        display: block; /* スマホではハンバーガーアイコンを表示する */
264    }
265    
266}
267    
268

コードブロックの右上のアイコンをクリックするとコード全体をコピーできるので、ご自分の環境に張り付けて、動作確認してみてください。

投稿2021/07/07 16:47

nekora

総合スコア501

nekora

2021/07/07 16:48

回答が役になったなら回答の横の数字をポイントすると回答の評価の増減ができます。また解決につながった回答はベストアンサーに指定できます。この設定は個別に指定できます。

Genki1999

2021/07/08 01:02

nekoraさん、回答ありがとうございます。細かな修正すべき点を教えていただきありがとうございます。私も気づいていなかったので、次回に活かしてまいります。回答についても非常にわかりやすく回答通りに行い解決しました。今後ともよろしくお願いいたします。

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

ベストアンサー

第一に

<input type="checkbox" class="btn"> これの位置が悪いです。これを切り取って下記のようにして下さい。 ```html <main> <div class="back"></div>  <input type="checkbox" class="btn"> <nav class=nav> ```

あとは.btn に z-index:1を付けましょう。

css
1            .btn {
2                position: absolute;
3                top: 3%;
4                left: 5%;
5                z-index: 1;
6            }