授業ではjqueryを使ってハンバーガーメニューを作成しましたが、jqueryを使わずにcssのみでも作成出来ます。ただ要素の使い方が非常に癖があり、これはこれで解り辛さがあります。
また、細かい要素の指定方法が必要になるので、
「~」で同じ階層の後ろに並ぶ要素に適用
<p>適用されない</p> <p class="example">適用されない</p> <p>適用される</p> <p>適用される</p>
example ~ p { color: red; }
「+」で同じ階層のすぐ後の要素にのみ適用
<p>適用されない</p> <p class="example">適用されない</p> <p>適用される</p> <p>適用されない</p>
.example + p { color: red; }
などを覚えておきましょう。
cssだけでハンバーガーメニュー作例
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <meta name="viewport" content="width=device-width"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <style> html,body,h1,h2,p,ul,li{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; } img{ vertical-align: bottom; } .box{ width:300px; height:500px; background:#336699; transform:translate(-400px,0); transition:0.5s; } #check:checked ~ .box{ transform:translate(0,0); } body{ overflow-x: hidden; } /*ヘッダー部分*/ header{ width:100%; height:60px; background:#222; display:flex; justify-content: space-between; position: fixed; top: 0; left: 0; } h1{ color:#FFF; height: 60px; padding: 12px 0 0 14px; box-sizing: border-box; } .btn{ width:50px; height:50px; background:#FFFFFF; margin: 5px 10px 0 0; position: relative; } #check{ display: none; } /*ナビゲーション部分*/ .g-nav{ width:100%; height:calc(100vh - 60px); position:fixed; top: 60px; left: 0; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; /*transform: translate(-100%,0);*/ transition: 0.5s linear; } #check:checked ~ .g-nav{ opacity: 1; visibility: visible; /*transform: translate(0,0);*/ } .g-nav a{ color: #FFF; } .menu{ width: 80%; background: #000; margin-left: 20%; padding: 40px; box-sizing: border-box; } .menu>li{ border-bottom: 1px solid #FFF; margin-bottom: 20px; } .menu a{ display: block; padding: 10px 20px; } .sns{ width: 80%; background: #000; margin-left: 20%; padding:20px; box-sizing: border-box; display: flex; justify-content: space-around; border-top:1px solid #FFF; } .sns a{ font-size: 30px; } h2{ text-align:center; padding:20px 0; font-size:30px; } .key-visual>img{ max-width:100%; } /*ハンバーガー部分*/ .bar{ display: block; width: 30px; height: 2px; background: #000; position: absolute; top: -15px; right: 0; bottom: 0; left: 0; margin: auto; transition: 0.2s; } .bar::after{ content: ""; display: block; width:20px; height: 2px; background: #000; position: absolute; top: 0; right: 0; bottom: -30px; left: 10px; margin: auto; transition: 0.2s; } #check:checked+label .bar{ top: 0; transform: rotate(45deg); } #check:checked+label .bar::after{ width: 30px; bottom: 0; left: 0; transform: rotate(-90deg); } </style> <link rel="icon" href="favicon.svg" type="image/svg+xml"> <link rel="icon alternate" href="favicon.png" type="image/png"> </head> <body> <header> <h1>タイトル</h1> <input type="checkbox" id="check"> <label for="check"> <p class="btn"><span class="bar"></span></p> </label> <nav class="g-nav"> <ul class="menu"> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li> <li><a href="#">ボタン3</a></li> <li><a href="#">ボタン4</a></li> </ul> <ul class="sns"> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i> </a></li> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i> </a></li> <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i> </a></li> </ul> </nav> </header> <div class="main"> <h2>サブタイトル</h2> <p class="key-visual"> <img src="https://placehold.jp/5bba54/ffffff/640x640.jpg" alt=""> </p> </div> </body> </html>
コメント