WePuri
ワードプレス教室

WePuri
ワードプレス教室

MENU
[bogo]

liを1行ずつスライドさせながら遅らせて表示する方法

setTimeoutメソッドとfor文を使って「liを1行ずつスライドさせながら遅らせて表示する方法」をご紹介させていただきます。

まずは下記のDEMOレビュー画面の「MENU」をクリックしてみてください。
どんな動きになるのかわかると思います。

コードペンをお願いいたします。

ホームページではナビゲーションメニュー(ul)を表示すると、全てのメニュー(li)が同じタイミングで表示されることが多いと思います。この方法を使うことでメニュー(li)に表示時間を設定することができ、遅らせて表示することができます。

liを1行ずつスライドさせながら遅らせて表示する「サンプルコード」

<div id="switch">MENU</div>
<nav id="main_nav">
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">NEWS</a></li>
        <li><a href="">ABOUT</a></li>
        <li><a href="">CONTACT</a></li>
    </ul>
</nav>
#switch{
    position: fixed;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: #fff;
    font-size: 14px;
}
#main_nav{
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 999;
    width: calc(100% - 100px);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #075094;
    transition: .5s;
    ul{
        list-style: none;
        li{
            transform: translateX(-80px);
            opacity: 0;
            a{
                color: #fff;
                font-size: 20px;
                text-decoration: none;
            }
        }
    }
}
#main_nav.on{
    left: 0;
}
#main_nav{
    ul.on{
        li{
            transform: translateX(0);
            opacity: 1;
        }
    }
}
const $switch = document.getElementById('switch');//#switch要素を取得し変数として代入
const $main_nav = document.getElementById('main_nav');//#main_nav要素を取得し変数として代入
const $li = $main_nav.querySelectorAll('li');//li要素を配列にし、変数として代入

//li1つ1つにCSSを付与する
for (let a = 0; a < $li.length; a++) {
    let b = (a + 1) * 0.3;
    $li[a].style = 'transition: '+b+'s;';
}

//#switchをクリックしたら「class="on"」を付与
$switch.addEventListener("click", () => {

    //#main_navにonを付与
    $main_nav.classList.toggle('on');

    //ulに0.2秒後にonを付与
    setTimeout(()=>{
        $main_nav.querySelectorAll('ul')[0].classList.toggle('on');
    },200);
});

下記のような部分はテンプレートリテラル形式で書くと、さらにスッキリさせることができます!

//普通に書いた場合
$li[a].style = 'transition: '+b+'s;';

//テンプレートリテラルで書いた場合
$li[a].style = `transition:${b}s;`

テンプレートリテラルで書いた方がスッキリと簡単にいろんな処理ができるようになりますので、基本的にはこちらの書き方をお勧めします。

今回使用するJavaScriptのメソッド一覧

getElementById(”);id が一致するElement オブジェクトを取得
querySelectorAll(”);id、class、タグなどの情報をすべて取得し、
配列にしてくれる
addEventListener(‘click’ , () => {});クリックしたら
classList.toggle(”);classが無ければclassを付与する
classがあればclassを除去する
setTimeout((”) => {();}, );一定時間後に一度だけ特定の処理をおこなう

作り方を順番に解説

「liを1行ずつスライドさせながら遅らせて表示する」コードの書き方、解説を行っていきます!

処理の流れ、全体像

右上のMENU(#switch)をクリックしたら、左側からナビゲーションメニュー(#main_nav)が表示されます。その0.2秒後にメニューリスト(li)が表示されますが、そのメニュー(li)を0.3秒ずつ遅らせる!という仕組みになります。

※今回はJavaScriptの書き方のみを解説させていただきます。

STEP1:要素の情報を取得

今回は「クリックしたら(#switch)」→「ナビゲーションメニュー(#main_nav)を表示」→「1行ずつスライド、かつ遅らせてメニューを表示」という流れになりますので、取得するべき情報は下記の4つです。

  1. クリックするボタン(#switch)
  2. 表示するナビゲーションメニュー(#main_nav)
  3. スライドさせて表示するメニュー(li)
  4. 1行ずつ遅らせて表示するメニュー(li)

取得するためのコードはこちらになります↓

const $switch = document.getElementById('switch');  //#switch要素を取得し変数として代入
const $main_nav = document.getElementById('main_nav');  //#main_nav要素を取得し変数として代入
const $li = $main_nav.querySelectorAll('li');  //li要素を配列にし、変数として代入

今回はgetElementByIdを使って、取得したいid名を指定して情報を取得しています。

また、querySelectorAllを使って、li要素を指定しています。

最後に取得した情報をconstを使って変数に置き換えておきます。

STEP2:クリックしたらクラスを付与する

次にクリック処理を行なっていきます。

#switchをクリックしたら.onというクラスを#main_navとulに付与されるようにしたいと思います。

まずは結論ですが、クリックしたら.onを付与するには下記のコードになります。

//#switchをクリックしたら「class="on"」を付与
$switch.addEventListener("click", () => {

    //#main_navにonを付与
    $main_nav.classList.toggle('on');

    //ulに0.2秒後にonを付与
    setTimeout(()=>{
        $main_nav.querySelectorAll('ul')[0].classList.toggle('on');
    },200);
});