Q&A
このままではコードが見づらいので、質門を編集し、<code>ボタンで、出てくる’’’の枠の中にコードを貼り付けてください
ハンバーガーメニューのをクリックした後の「三本線」から「×」に変化した後の「×」印が、
不格好でうまく「×」になりません。
「transform: translateY(-10px) rotate(65deg)の「65deg」を変えたりしたのですが、
うまくいきません。
何がいけないのかご教示お願いいたします。
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 href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js" integrity="sha512-UyX8JsMsNRW1cYl8BoxpcamonpwU2y7mSTsN0Z52plp7oKo1u92Xqfpv6lOlTyH3yiMXK+gU1jw0DVCsPTfKew==" crossorigin="anonymous"></script> <title>あいうえお</title> </head> <body> <div class="wrap"> <div class="container"> <section class="section01 scrollify"> <nav id="nav"> <ul> <li><a href="#menu">menu</a></li> <li><a href="#aboutus">aboutus</a></li> <li><a href="#access">access</a></li> <li><a href="#goods">goods</a></li> </ul> </nav> <div id="hamburger"> <span class="inner_line" id="line1"></span> <span class="inner_line" id="line2"></span> <span class="inner_line" id="line3"></span> </div> </section> <div id="menu"> <section class="section02 scrollify"> </section> </div> <div id="aboutus"> <section class="section03 scrollify"> </section> </div> <div id="access"> <section class="section04 scrollify"> </section> </div> <div id="goods"> <section class="section05 scrollify"> </section> </div> </div> </div> <script> $.scrollify({ section:'.scrollify', //対象要素を指定 easing: 'swing', // イージングを指定 scrollSpeed: 600, // スクロール時の速度 updateHash: false, // スクロール時アドレスバーのURLを更新 afterRender:function(){ var pagenation = '<ul class="page_wrap">'; $('.scrollify').each(function(i){ pagenation += '<li><a></a></li>'; }); pagenation += '</ul>'; $('.container').append(pagenation); $('.page_wrap a').each(function(i){ $(this).on('click',function(){ $.scrollify.move(i); }); }); $('.page_wrap li:first-child').find('a').addClass('active'); }, before:function(i){ $('.page_wrap .active').removeClass('active'); $('.page_wrap').find('a').eq(i).addClass('active'); }, }); function hamburger() { document.getElementById('line1').classList.toggle('line_1'); document.getElementById('line2').classList.toggle('line_2'); document.getElementById('line3').classList.toggle('line_3'); document.getElementById('nav').classList.toggle('in'); } document.getElementById('hamburger').addEventListener('click' , function () { hamburger(); } ); $(function(){ $('a[href^="#"]').click(function() { // スクロールの速度 let speed = 400; // ミリ秒で記述 let href= $(this).attr("href"); let target = $(href == "#" || href == "" ? 'html' : href); let position = target.offset().top; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script> </body> </html>
CSS
* { margin: 0; padding: 0; } body { font-family: "游ゴシック", "YuGothic", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif; } .section01{ background-image: url("images/top.jpg"); background-size: cover; background-position: 40% 0%; } .section02{ background-image: url("images/menu.jpg"); background-size: cover; background-position: 40% 0%; } .section03{ background-image: url("images/back.jpg"); background-size: cover; background-position: 40% 0%; } .section04{ background-image: url("images/access.jpg"); background-size: cover; background-position: 70% 0%; } .section05{ background-image: url("images/about.jpg"); background-size: cover; } #nav{ position: absolute; height: 100vh; width: 40%; left: -40%; top: 0; background: #ffffff; transition: .7s; } #nav ul{ padding-top: 80px; } #nav ul li{ list-style-type: none; font-size: 20px; font: 400 18px/1 'Kaushan Script', cursive; } #nav a{ display: block; text-decoration: none; color: #000000; margin: 0 15px; padding: 10px; transition: .5s; } #nav li a:hover{ color: #ffffff; background: #cd5c5c; border-bottom: none; } #hamburger { display: block; position: absolute; top: 20px; left: 30px; width: 20px; height: 30px; cursor: pointer; transition: 1s; } .inner_line { display: block; position: absolute; left: 0; width: 30px; height: 4px; background-color: #ffffff; transition: 1s; border-radius: 4px; } #line1 { top: 0; } #line2 { top: 8px; } #line3 { bottom: 10px; } .in{ transform: translateX(100%); } .line_1,.line_2,.line_3{ background: #000000; } .line_1 { transform: translateY(10px) rotate(-10deg); top: 0; } .line_2 { opacity: 0; } .line_3 { transform: translateY(-10px) rotate(65deg); bottom: 0; } .section01 h4{ padding-top:90%; font-size: 95%; color:white; }
回答2件
0
ベストアンサー
このような形でどうでしょうか？
(デモ: https://codepen.io/anozon/pen/poPweyY)
css
1.line_1 { 2 transform-origin: center center; 3 transform: translateY(8px) rotate(-45deg); 4 top: 0; 5} 6.line_2 { 7 opacity: 0; 8} 9.line_3 { 10 transform: translateY(-8px) rotate(45deg); 11 bottom: 0; 12}
diff
1.line_1 { 2- transform: translateY(10px) rotate(-10deg); 3+ transform: translateY(8px) rotate(-45deg); 4 top: 0; 5} 6.line_2 { 7 opacity: 0; 8} 9.line_3 { 10- transform: translateY(-10px) rotate(65deg); 11+ transform: translateY(-8px) rotate(45deg); 12 bottom: 0; 13}
投稿2021/07/19 00:11
総合スコア662
回答いただき誠にありがとうございます。回答通り行ってみたのですが追加した画像通りうまくいかず、引き続き自分で調べてみたいと思いますが何か考えられる要因がございましたらご教示お願い致します。
デモの CodePen からいじって比較などしてみてください。実際に適用されているCSSは Chrome Developer Tools から確認できます。
anozonさん、失礼しました、デモのURLを見落としていました。比較して修正してみます。ご教示ありがとうございます。
0
diff
1 .line_1 { 2- transform: translateY(10px) rotate(-10deg); 3+ transform: translateY(10px) rotate(-45deg); 4 top: 0; 5 } 6 .line_2 { 7 opacity: 0; 8 } 9 .line_3 { 10- transform: translateY(-10px) rotate(65deg); 11+ transform: translateY(-10px) rotate(45deg); 12 bottom: 0; 13 14 }
上記修正で試してみてください。
それぞれの角度を45度に修正することで綺麗な✖️になると思われます。
translateYの中身は状況に応じて微調整してください。
投稿2021/07/19 00:21
総合スコア191
回答いただき誠にありがとうございます。回答通り行ってみたのですが追加した画像通りうまくいかず、引き続き自分で調べてみたいと思いますが何か考えられる要因がございましたらご教示お願い致します。
あなたの回答
tips
プレビュー
