左から開くドロワーメニューを実装しようと思っていて、
そこまではコピー等でできましたが、
そこで、画像のような見せ方をしたいです(画像部分左の赤丸)。
「remon」の部分をpng画像で挿入し、
ハンバーガーメニューだけ動くというイメージです。
png画像を入れるところとしては、<div class="hamburger">
と思い、下記のようにスタイルも使って挿入には成功しましたが、
三本線とくっついてwidthもかえれないのでマージンがなく、ピチピチです。
<img src="assets/remon.png" alt="remon" style="padding-bottom:30px;">
もっと良い方法があると思い、投稿した次第です。
.hamburger のcssにpaddingを入れてみましたが、
三本線の間が変わるだけででうまく行きません。。。
何か良い方法ありましたら、ご教授いただければ幸いです。
どうぞよろしくお願いします。
※尚、ドロワーメニューはjQueryを用いて作成しています。
下記にコードを記入します。
<body> <div class="wrapper"> <div class="hamburger"> <img src="assets/remon.png" alt="remon" style="padding-bottom:30px;"> <span></span> <span></span> <span></span> </div> <nav class="menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> <li>メニュー5</li> </ul> </nav> </div> <script type="text/javascript"> $(function(){ $('.hamburger').click(function(){ $('.hamburger').toggleClass('active'); $('.menu').toggleClass('open'); }); }); </script> </body>
<Style> .wrapper { position: relative; background: #f5f5f5; } /* ハンバーガーメニュー↓ */ .hamburger { width: 30px; height: 30px; background: #000; padding: 10px; display: flex; justify-content: center; align-items: center; position: absolute; z-index: 999; } .hamburger:hover { cursor: pointer; } .hamburger span { background: #fff; width: 25px; height: 2px; position: absolute; transition: 0.3s ease-out; } .hamburger span:nth-of-type(1) { top: 15px; } .hamburger span:nth-of-type(3) { bottom: 15px; } .hamburger.active span:nth-of-type(1) { transform: translateY(9px) rotate(-45deg); transition: 0.3s ease-out; } .hamburger.active span:nth-of-type(3) { transform: translateY(-9px) rotate(45deg); transition: 0.3s ease-out; } .hamburger.active span:nth-of-type(2) { opacity: 0; } /* メニュー */ .menu { width: 300px; background: #000; color: #fff; position: absolute; padding-top: 40px; transform: translate(-300px); transition: 0.3s ease-out; } li { margin-bottom: 10px; } .menu.open { transform: translate(0); transition: 0.3s ease-out; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/16 01:37