Young Tecnic Person

コンテンツ

HTMLタグについて

いろいろな経験のため、コーディングを学んでいます。

コード

今回、ハンバーガーメニューのJavaScriptコードはこのように書きました。

// ハンバーガーメニューの設定
const menuButton = document.getElementById('menuButton');

const nav = document.querySelector('nav');

menuButton.addEventListener('click', () => {
    nav.classList.toggle('active');
    menuButton.classList.toggle('active');
});

CSSはこんな感じ、

/* ハンバーガーメニューここから */
#menuButton {
    position: absolute;
    background-color: black;
    cursor: pointer;
    top: 5px;
    right: 10px;
    width: 50px;
    height: 55px;
    display: block;
    border-radius: 5px;
    z-index: 1;
}
#menuButton:hover {
    background-color: #723825;
    box-shadow: 2px 2px 3px 3px black;
}
#menuButton div {
    position: absolute;
    top: 15px;
    left: 5px;
    width: 40px;
    height: 3px;
    border-radius: 8px;
    background-color: #fff;
    color: #fff;
    transition: .4s;
}
#menuButton div:nth-of-type(1) {
    transform: translateY(-10px);
}
#menuButton div:nth-of-type(2) {
    transform:none;
    transition: .5s;
}
#menuButton div:nth-of-type(3) {
    transform: translateY(10px);
}
#menuButton div:nth-of-type(4) {
    margin-top: 18px;
    height: 20px;
    background-color: transparent;
    font-size: 15px
}
#menuButton.active div:nth-of-type(1) {
    transform: rotate(30deg);
}
#menuButton.active div:nth-of-type(2) {
    opacity: 0;
    transform: translateY(100vh);
}
#menuButton.active div:nth-of-type(3) {
    transform: rotate(-30deg)
}
/* ハンバーガーメニューここまで */

ちなみに、ブレイクポイントを786pxにして、出したり消したりしています。

@media screen and (min-width:768px) {
    #menuButton {
        display: none;
    }
}

としています。

HTMLはこうです。

<!-- ハンバーガーメニュー -->
<div id="menuButton">
    <div></div>
    <div></div>
    <div></div>
    <div>menu</div>
</div>

意外とコード書きますね。