今流行りのChatGPTを使って、JSの勉強をしてみたいと思います。
目次
ChatGPTを使って、JSの勉強をしてみる
ChatGPTに以下のプロンプトを与えるだけです。
スマホのヘッダーにハンバーガーメニューがあるときのHTMLとCSSとハンバーガーメニューをクリックした時に、メニューがでてくるJSも教えて
<header class="header">
<nav class="nav">
<ul class="nav-list">
<li class="nav-item"><a href="#">Menu item 1</a></li>
<li class="nav-item"><a href="#">Menu item 2</a></li>
<li class="nav-item"><a href="#">Menu item 3</a></li>
</ul>
</nav>
<button class="menu-toggle">
<span class="menu-toggle__icon"></span>
</button>
</header>.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #333;
color: #fff;
}
.nav {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #333;
display: none;
}
.nav-list {
margin: 0;
padding: 0;
list-style: none;
}
.nav-item {
padding: 10px;
}
.nav-item a {
color: #fff;
text-decoration: none;
}
.menu-toggle {
position: relative;
z-index: 1;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
}
.menu-toggle__icon {
display: block;
width: 100%;
height: 2px;
background-color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: transform .3s, opacity .3s;
}
.menu-toggle__icon:before,
.menu-toggle__icon:after {
content: '';
width: 100%;
height: 100%;
background-color: #fff;
position: absolute;
left: 0;
transition: transform .3s, opacity .3s;
}
.menu-toggle__icon:before {
transform: translateY(-8px);
}
.menu-toggle__icon:after {
transform: translateY(8px);
}
.open .menu-toggle__icon {
transform: rotate(45deg);
}
.open .menu-toggle__icon:before {
transform: translateY(0) rotate(45deg);
}
.open .menu-toggle__icon:after {
transform: translateY(0) rotate(-45deg);
}
.open + .nav {
display: block;
}const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.nav');
menuToggle.addEventListener('click', function() {
menu.classList.toggle('open');
});上記のコードでは、menu-toggle ボタンがクリックされたときに、nav 要素の open クラスをトグルするようにイベントリスナーを登録しています。open クラスが付与された nav 要素は表示され、クラスが削除された場合は非表示になります。ハンバーガーメニューのアイコンは、CSSアニメーションを使って回転させることで開閉の状態を表現しています。
JavaScriptのコードの解説は以下の通りです。
querySelectorメソッドを使って、ハンバーガーメニューのアイコンを表す.menu-toggle要素と、メニューを表す.nav要素を取得します。addEventListenerメソッドを使って、.menu-toggle要素にclickイベントのリスナーを登録します。クリックされたときに実行する関数を引数として渡します。- 関数内で、
menu要素に対してclassList.toggle()メソッドを呼び出し、openクラスの有無をトグルします。openクラスが付与されたnav要素は表示され、クラスが削除された場合は非表示になります。
以上が、スマホのヘッダーにハンバーガーメニューを実装するためのHTML、CSS、JavaScriptの例になります。
これをVSCodeに挿入することで、簡単に実装ができます。
コメント