#サイトのスライドメニューが稼働せずどうしたらいいのかわかりません。h1
クリックによってボタンが「三」から「☓」になるアニメーションは稼働するのですが、上か降りてくるスライドが稼働しません。
もしよろしければ教えていただけると嬉しいです。
コードはこちらになります。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wp-test</title> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <script src="script.js"></script> </head> <body> <header> <div class="slide"> <h1>wp-test</h1> <p class="btn-menu"> <span></span> <span></span> <span></span> </p> <nav class="menu"> <ul> <li><a href="">ホーム</a></li> <li><a href="">企業紹介</a></li> <li><a href="">慈善活動</a></li> <li><a href="">アクセス</a></li> <li><a href="">お問い合わせ</a></li> <li> <form class="search-form" role="search" method="GET" action=""> <div class="search-box"> <input type="text" class="search-input" name="" placeholder="キーワードを入力してください"> <button type="submit" class="button-submit">????</button> </div> </form> </li> </ul> </nav> </div> <div class="image"> <img src="" alt="photo"> <h1 class="main-title">HELLO WORLD</h1> </div> </header>
CSS
header { text-align: center; } header h1 { margin: 5px; } .btn-menu { display: block; width: 42px; height: 51px; margin: auto 7px auto auto; cursor: pointer; z-index: 3; text-align: center; } .btn-menu span { display: block; position: absolute; width: 30px; border-bottom: solid 3px #eee; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; } .btn-menu span:nth-child(1) { top: 9px; } .btn-menu span:nth-child(2) { top: 18px; } .btn-menu span:nth-child(3) { top: 27px; } .btn-menu.active span:nth-child(1) { top: 18px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .btn-menu.active span:nth-child(2), .btn-menu.active span:nth-child(3) { top: 18px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } nav.menu { position: fixed; z-index: 2; top: 0; left: 0; background: rgb(0, 0, 0, 0.4); color: rgb(255, 255, 255); text-align: center; transform: translateY(-100%); transition: all 0.8s; width: 100%; } nav.menu ul { background: rgb(0, 0, 0, 0.4); margin: 0 auto; padding: 0; width: 100%; display: block; } nav.menu ul li { font-size: 1.1em; list-style-type: none; padding: 0; width: 100%; border-bottom: 1px dotted rgb(255, 255, 255); color: white; } nav.menu ul li:last-child { padding-bottom: 0; border-bottom: none; } nav.menu ul li a { display: block; color: rgb(255, 255, 255); padding: 1em 0; } .menu ul li a:link { color: rgb(255, 255, 255); } .menu ul li a:visited { color: rgb(255, 255, 255); } .menu ul li a:hover { color: rgb(6, 250, 197); border-bottom: 2px black solid; } .menu ul li a:active { color: rgb(255, 255, 255); } nav .menu .active { transform: translateY(0); }
Javascript
$(function() { $('.btn-menu').click(function() { $(this).toggleClass('active'); if($(this).hasClass('active')) { $('.menu').addClass('active'); } else { $('.menu').removeClass('active'); } }); });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/17 04:19