ハンバーガーメニューの表示/質問
解決したいこと
ハンバーガーメニューの三本線を押したら画面上にメニューが表示されるようにしたいのですが、
うまく表示がされません。
https://www.asobou.co.jp/blog/web/css-menu
上記ページを参考に作成しててのですが行き詰ってしまい、ご指摘をいただきたいです。
該当するソースコード
HTML
<div class="hamburger-menu">
<input type="checkbox" id="check">
<label for="check" id="h_menu"><span></span></label>
</div>
<div id="menu">
<ul>
<a href="#login"><li id="under">サインイン</li></a>
<a href="#access"><li>はじめに</li></a>
<a href="#cafe"><li>体験</li></a>
<a href="#toiawase"><li>お問い合わせ</li></a>
</ul>
</div>
</div>
CSS
#h_menu {
position: fixed;
top: 10px;
right: 10px;
display: flex;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
z-index: 90;
background-color: darkslategrey;
border-radius: 50px;
margin-right: 4%;
}
#h_menu:hover {
background-color:rgba(47,79,79,0.7);
cursor: pointer;
}
#h_menu span,
#h_menu span:before,
#h_menu span:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: #ffffff;
position: absolute;
}
#h_menu span:before {
bottom: 8px;
}
#h_menu span:after {
top: 8px;
}
#check {display: none;}
/*メニュー*/
#menu {
width: 150px;
height: 180px;
border-radius: 20px;
background-color: white;
z-index: 80;
position: fixed;
right: 100%;
}
#menu ul li {
height: 15px;
width: auto;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#menu ul a {
text-decoration: none;
color: black;
}
#menu ul a:hover{color: darkslategrey;}
#under {border-bottom: solid 0.5px darkslategrey;}
#check:checked ~ #menu {
margin-right: 4%;
}
自分でもほかの方の投稿や記事を見て修正を試みましたがなかなか改善されないため、
勉強を始めたばかりで見づらく初歩的な部分にはなると思いますがご指摘をいただきたいです。
0
