【JacvaScript】【CSS】たった4行のJavaScriptで作るハンバーガーメニュー 作り方
三本線をクリック!
HTML <div class="Hbg">
<a class="MenuBtn" id="MenuBtn">
<div></div>
<div></div>
<div></div>
</a>
<div id="nav">
<ul>
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
</ul>
</div>
</div>
CSS
.Hbg{
position: absolute;
}
.Hbg a{
border: none;
}
.MenuBtn {
display: block;
height: 60px;
width: 60px;
position: absolute;
top: 0;
left: 0;
padding: 0;
z-index: 5;
}
.MenuBtn div {
height: 4px;
width: 60%;
background-color:black;
position: absolute;
border-radius: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
}
.MenuBtn div:nth-of-type(1) {
transform: translate(-50%, -17px);
}
.MenuBtn div:nth-of-type(3) {
transform: translate(-50%, 14px);
}
.MenuBtn.active div:nth-of-type(1) {
transform: rotate(45deg) translate(-50%, 0px);
transform-origin: 0% 50%;
background: #fff;
}
.MenuBtn.active div:nth-of-type(2) {
opacity: 0;
}
.MenuBtn.active div:nth-of-type(3) {
transform: rotate(-45deg) translate(-50%, 0px);
transform-origin: 0% 50%;
background: #fff;
}
.MenuBtn.active{
transform: rotate(720deg);
}
#nav {
width: 150px;
height: 300px;
padding: 20px 20px 20px 80px;
position: absolute;
background: rgb(12, 12, 80);
opacity: 0;
transform: translateX(-100%);
transition: .3s ease-in-out;
}
#nav ul{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0;
top: 0;
left: 0;
}
#nav ul li{
padding: 10px 0;
}
#nav ul li a{
color: white;
font-size: 25px;
}
#nav.active {
opacity: 1;
position: absolute;
transform: translateX(0%);
z-index: 1;
}
JavaScript
document.getElementById("MenuBtn").addEventListener("click", function(){
this.classList.toggle("active");
document.getElementById("nav").classList.toggle("active");
});
上記JavaScriptのコードを参照
三本線をクリックしたら、MenuBtnとnavにクラスを追加し、三本線をアニメーションさせ、ナビゲーションバーを表示させる。
.MenuBtn div { //三本線の共通CSS
height: 4px;
width: 60%;
background-color:black;
position: absolute;
border-radius: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
}
.MenuBtn div:nth-of-type(1) { //一番目のdiv
transform: translate(-50%, -17px);
}
.MenuBtn div:nth-of-type(3) { //三番目のdiv
transform: translate(-50%, 14px);
}
.MenuBtn.active div:nth-of-type(1) { //一番目のdivは45度回転
transform: rotate(45deg) translate(-50%, 0px);
transform-origin: 0% 50%; //← ポイント
}
.MenuBtn.active div:nth-of-type(2) { //二番目のdivは消える
opacity: 0;
}
.MenuBtn.active div:nth-of-type(3) { //三番目のdivは-45度回転
transform: rotate(-45deg) translate(-50%, 0px);
transform-origin: 0% 50%; //← ポイント
}
.MenuBtn.active{
transform: rotate(720deg);
}
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク