スマホ用のスライドメニューを作り方

スマホサイズのサイトではスライドメニューがよく見かけます。

カンタンなJava Scriptで実装していきます。

[html部分]

　　<nav>
        <button class="btn-menu">Menu</button>
        <ul class="main-nav">
            <li><a href="#about">About</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#works">Works</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

[CSS部分]

/*メニューボタン*/
.btn-menu {
    position: absolute;
    top: 12px;
    right: 12px;
    border: 1px solid rgba(255,255,255,.5);
    color: var(--white);
    padding: .5rem 1rem;
}

/*ナビゲーション*/
.main-nav {
    background: #000;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 50px;
    right: 0;
    overflow: hidden;
    transition: .5s;
}
.main-nav li {
    
    text-align: center;
    margin: 2rem 0;
}
.main-nav a {
    display: block;
}
.main-nav.open-menu {
    width: 100%;
}

script.jsファイルを作成し、ＨＴＭＬファイルの</body>タグの直前に読み込ませます。

//btn-menu classのついたボタンを「btn」という変数に入れる
const btn = document.querySelector('.btn-menu');
//main-nav classのついたボタンを「nav」という変数に入れる
const nav = document.querySelector('.main-nav');

//ボタンをクリックすると
btn.addEventListener('click', () => {
  //main-nav classにopen-menuを追加する　既にある場合はCloseを追加する
  nav.classList.toggle('open-menu');
  if (btn.innerHTML === 'Menu') {
    btn.innerHTML = 'Close';
  } else {
    btn.innerHTML = 'Menu';
  }
});

main-navに幅を持たせずに０にしておいて、open-menuのclassが追加されたときだけwidthを100%にcssで書き込みます。

.main-nav {
    /*幅を0にする*/
    width: 0;
    
}
/*open-menuになったときだけ*/
.main-nav .open-menu{
    width:100%;
}

innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。

 if (btn.innerHTML === 'Menu') {
    btn.innerHTML = 'Close';
  } else {
    btn.innerHTML = 'Menu';
  }

もしボタンが「Menu」と書いてあったらテキストを「Close」に変更して、そうでなかったら「Menu」に変えるということです。