最終的には、ハンバーガーメニューを交差させてメニュー表示させたいのですが、うまくいきません。
CSSの該当部分はとりあえず、簡易的に背景を青にするだけになってます。
うまくjavascriptが動いていれば、ハンバーガーメニューは青に変化するはずですが、変化すらしないので困っています。
$('.hamburger').on('click', function() {
$('.hamburger, .hamburger span:nth-child(1), .hamburger span:nth-child(3)').toggleClass('active');
});
* {
margin: 0;
padding: 0;
}
.logo {
color: red;
vertical-align: bottom;
line-height: 25px;
}
.title {
text-align: left;
font-size: 45px;
font-weight: bold;
text-shadow: 0 4px 6px #fff;
}
#header {
padding: 40px 0 0 50px;
}
.logo span {
vertical-align: bottom;
font-size: 15px;
}
#navi {
z-index: 20;
opacity: 0;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.hamburger {
background-color: #ff2a2a;
position: fixed;
width: 100px;
height: 100px;
top: 0;
right: 0;
z-index: 30;
cursor: pointer;
transition: 0.3s;
}
.hamburger span {
width: 35px;
height: 2px;
position: absolute;
left: 33px;
background: white;
}
.hamburger.active {
background-color: blue;
}
.hamburger span:nth-child(1) {
top: 24px;
}
.hamburger span:nth-child(1).active {
transform: rotate(45deg);
background: blue;
}
.hamburger span:nth-child(2) {
top: 40px;
}
.hamburger span:nth-child(3) {
top: 55px;
}
.hamburger span:nth-child(3).active {
transform: rotate(45deg);
background: blue;
}
#mainvisual {
position: relative;
margin-bottom: 120px;
}
#mainvisual img {
width: 100%;
}
.text {
display: block;
z-index: 10;
position: absolute;
top: 280px;
left: 25%;
}
.btn {
background-color: #ff2a2a;
border-bottom: 6px solid #9a0413;
border-radius: 10px;
color: #fff;
font-size: 1.5rem;
display: block;
padding: 15px 40px;
margin-top: 20px;
text-align: center;
transition: 0.3s;
position: relative;
text-decoration: none;
}
.btn::after {
content: "";
width: 16px;
height: 16px;
border-top: solid 3px #fff;
border-right: solid 3px #fff;
transform: rotate(45deg);
position: absolute;
top: 26px;
right: 30px;
}
.btn:hover {
transform: scale(1.2);
}
main {
max-width: 860px;
margin: 0 auto;
text-align: center;
margin-bottom: 100px;
}
/*
.fade{
height: 300px;
margin-top: 10px;
position: relative;
}
.fade li {
width: 75%;
position: absolute;
top: 0;
right: 0;
opacity: 0;
animation: fade 1s infinite;
}
.fade li:nth-child(1) {
animation-delay: 0s;
}
.fade li:nth-child(2) {
animation-delay: 2s;
}
.fade li:nth-child(3) {
animation-delay: 4s;
}
@keyframes fade {
0% {
opacity: 0;
}
15% {
opacity: 1;
}
30% {
opacity: 1;
}
45% {
opacity: 0;
}
100% {
opacity: 0;
}
*/
.bg {
background: red;
overflow: hidden;
}
.section-title {
font-size: 2.25rem;
margin: 100px 0;
text-align: center;
position: relative;
}
.section-title::after {
content: "";
width: 100px;
height: 3px;
border-bottom: black solid;
display: block;
position: absolute;
bottom: -20px;
left: 0;
right: 0;
margin: 0 auto;
}
.inview-slide-left {
animation: slide-left 0.5s ease-out 0s 1 forwards;
margin-bottom: 40px;
}
.slide {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
padding: 5%;
border-radius: 20px;
position: relative;
}
.reason_title {
font-size: 46px;
font-weight: bold;
margin-bottom: 30px;
text-shadow: 0 4px 6px #fff;
}
.reason_text {
display: block;
z-index: 10;
}
.slide-right {
float: right;
animation: slide-right 0.5s ease-out 0s 1 forwards;
}
#voice {
max-width: 860px;
margin: 0 auto;
}
.student img {
width: 200px;
height: 200px;
}
.student div {
display: flex;
}
.student div:nth-child(2) {
flex-direction: row-reverse;
}
.student dd {
background: #e9f1fb;
padding: 20px;
width: 50%
}
.student dt {
text-align: center;
display: flex;
flex-direction: column;
}
#summary {
overflow: hidden;
background: rgb(17, 130, 242);
}
.summary-list div {
float: left;
width: 30%;
margin: 0 auto;
text-align: center;
background-color: pink;
border-radius: 20px;
padding: 30px;
margin-bottom: 32px;
}
.summary-list div:nth-child(1),
.summary-list div:nth-child(3) {
margin-right: 15px;
}
.menu-title {
font-weight: bold;
text-align: center;
margin-bottom: 30px;
}
.ja {
font-size: 24px;
margin-bottom: 15px;
}
.catchphrase {
margin-bottom: 40px;
text-align: center;
}
#entry .title {
text-align: center;
font-size: 32px !important;
margin-bottom: 5px;
}
#entry .btn {
border: #ff2a2a solid 2px;
border-radius: 40px;
}
#entry .btn:hover {
background: white;
color: red;
transform: scale(1.0);
}
.btn::after {
border: none;
}
footer {
padding: 60px 0 20px 0;
background: #e8e8e8;
}
footer .title {
font-size: 16px;
text-align: center;
}
.footmenu {
max-width: 860px;
margin: 0 auto;
display: flex;
}
.footmenu li {
margin: 0 22px;
list-style: none;
text-decoration: none;
margin-left: 30px;
}
.menu li {
list-style: none;
text-align: center;
}
.menu a {
font-size: 14px;
text-decoration: none;
color: black;
}
.copyright {
text-align: center;
font-size: 10px;
}
/* ウィンドウ幅が0〜479pxの場合に適用するCSS */
@media screen and ( max-width:640px) {}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>課題テンプレ</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<header id="header">
<div class="logo">
<h1 class="title">BBB</h1>
<span>英会話スクール</span>
</div>
<nav id="navi" class="">
<img class="logo" src="img/logo-w.svg" alt="BBB英会話スクール">
<ul class="menu">
<li><a href="#reason">BBBが選ばれる理由</a></li>
<li><a href="#voice">受講生の声</a></li>
<li><a href="#summary">スクールの概要</a></li>
</ul>
<a class="btn" href="#">無料体験に申し込む</a>
</nav>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</header>
<main>
<div id="mainvisual">
<img src="../web3/img/mainvisual1.jpg" alt="main1">
</div>
<div class="text">
<P class="title">話して学ぼう<br> BBB英会話スクール
</P>
<a class="btn" href="#">無料体験はこちらから </a>
</div>
<section id="reason">
<h2 class="section-title">BBBが選ばれる理由</h2>
<div class="bg">
<div class="slide inview-slide-left slide-left">
<img src="">
<p>
<span class="reason_title">オンライン対応</span>
<span class="reason_text">24時間いつでも受講できる!</span>
</p>
</div>
<div class="slide inview-slide-right slide-right">
<img src="">
<p>
<span class="reason_title">講師はネイティブ</span>
<span class="reason_text">お気に入りの行使が自由に選べる!</span>
</p>
</div>
</div>
</section>
<section id="voice">
<h2 class="section-title">受講生の声</h2>
<dl class="student">
<div> <dt><img src="../web3/img/profile_icon.png"><span>○○さん<br></span><大学生</dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</dd>
</div>
<div> <dt><img src="../web3/img/profile_icon.png"><span>○○さん<br></span>会社員</dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</dd>
</div>
<div> <dt><img src="../web3/img/profile_icon.png">○○さん<br></span>会社員</dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</dd>
</div>
</dl>
</section>
<section id="summary">
<h2 class="section-title">スクールの概要</h2>
<dl class="summary-list">
<div> <dt class="menu-title"><span class="ja">レッスン内容</span><br><span class="en">LESSON</span></dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</div>
<div> <dt class="menu-title"><span class="ja">料金プラン</span><span><br><span class="en">PRICE</span></dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</div>
<div> <dt class="menu-title"><span class="ja">講師の紹介</span></span><br><span class="en">TEACHER</span></dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</div>
<div> <dt class="menu-title"><span class="ja">BBBのQ&A</span><br><span class="en">Q&A</span></dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</div>
</dl>
</section>
<div id="entry">
<p class="title">まずは無料で、BBBの英会話を試してみませんか?</p>
<p class="catchphrase">今なら初月のレッスンを特別価格で受講できる割引クーポンをプレゼント!</p>
<a class="btn" href="#">無料体験に申し込む</a>
</div>
</main>
<footer>
<ul class="footmenu">
<li>
<p class="title">コース一覧</p>
<ul class="menu">
<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>
</ul>
</li>
<li>
<p class="title">講師紹介</p>
<ul class="menu">
<li><a href="#">講師について</a></li>
<li><a href="#">講師一覧</a></li>
<li><a href="#">講師を探す</a></li>
</ul>
</li>
<li>
<p class="title">会社概要</p>
<ul class="menu">
<li><a href="#">会社概要</a></li>
<li><a href="#">採用情報</a></li>
</ul>
</li>
<li>
<p class="title">BBBについて</p>
<ul class="menu">
<li><a href="#">よくあるご質問</a></li>
<li><a href="#">ご利用規約</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</li>
</ul>
<p class="copyright">© BBB English School</p>
</footer>
</body>
</html>