HTML、CSS、JavaScriptでマジックナビゲーションバーを作ろう【WEBチュートリアル】

HTML&CSS

　こんにちは。かじです。

　今回はHTML、CSS、JavaScriptでマジックナビゲーションバーを作成していきたいと思います。

　下のようなものを作成していきたいと思います。

1.基本的なレイアウトの作成

　まずは基本的なレイアウトの作成です。

　下記のコードで基本的なレイアウトを作成しましょう。

　特筆することはありませんが、最初は各項目のメニューは非表示にするためopacityは0にしておきます。また、項目を示すIndicatorも現状はスタイリングせず、非表示となっております。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="navigation">
        <ul>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
                    <span class="text">Home</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
                    <span class="text">Profile</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="chatbubble-outline"></ion-icon></span>
                    <span class="text">Message</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="camera-outline"></ion-icon></span>
                    <span class="text">Photos</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="settings-outline"></ion-icon></span>
                    <span class="text">Settings</span>
                </a>
            </li>
            <div class="indicator"></div>
        </ul>
    </div>

    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>

</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

:root {
    --clr: #222327;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--clr);
}

.navigation {
    position: relative;
    width: 400px;
    height: 70px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.navigation ul {
    display: flex;
    width: 350px;
}

.navigation ul li {
    position: relative;
    list-style: none;
    width: 70px;
    height: 70px;
    z-index: 1;
}

.navigation ul li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
    font-weight: 500;
}

.navigation ul li a .icon {
    position: relative;
    display: block;
    line-height: 75px;
    font-size: 1.5em;
    text-align: center;
    transition: 0.5s;
    color: var(--clr);
}


.navigation ul li a .text {
    position: relative;
    color: var(--clr);
    font-weight: 400;
    font-size: 0.75em;
    letter-spacing: 0.05em;
    transition: 0.5s;
    opacity: 0;
    transform: translateY(20px);
}

2.Indicatorを作成する

　次にIndicatorを作成します。Indicatorが当たっているアイコン少し浮き上がり、テキストが表示される仕様です。Indicatorは一旦最初のアイコンであるHomeを指しておくこととします。

　一旦最初の<li>要素にactiveクラスを追加します。

<div class="navigation">
        <ul>
            <li class="list active"> <!-- 修正-->
                <a href="#">
                    <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
                    <span class="text">Home</span>
                </a>
            </li>
          <!--... 省略 ... -->
        </ul>
    </div>

　ポイントとしては、Indicatorの前と後ろはナビケーションバーが丸みを帯びた形状になっています。

　それについては.indicator::beforeと.indicator::afterでそれぞれ設定していきます。丸みの表現はborder-top-right-radiusとborder-top-left-radiusで四分円を描画し、背景と同じ色でbox-shadowを設定することで表現できます。

/* 追加ここから */
.navigation ul li.active a .icon {
    transform: translateY(-32px);
}

.navigation ul li.active a .text {
    opacity: 1;
    transform: translateY(10px);
}
.indicator {
    position: absolute;
    top: -50%;
    width: 70px;
    height: 70px;
    background: #29fb53;
    border-radius: 50%;
    border: 6px solid var(--clr);
    transition: 0.5s;
    transform: translateX(calc(70px * 0));
}
.indicator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-right-radius: 20px;
    box-shadow: 1px -10px 0 0 var(--clr);
}

.indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-left-radius: 20px;
    box-shadow: -1px -10px 0 0 var(--clr);
}
/* 追加ここまで */

　ここまでできたら下の感じになります。

3.クリックしたらactiveクラスを移動させる

　そうしたら、クリックしたらIndicatorを移動させましょう。

　下記のように、HTML内にJavaScriptを書きます。

　各listクラスに対してクリックイベントを設定します。イベントの内容としては、listクラスの中でactiveクラスを持っている場合は、activeクラスを取り除き、クリックしたlistクラスにはactiveクラスを付与するというものです。

<!-- 追加 -->
<script>
        const list = document.querySelectorAll('.list');
        function activateLink() {
            list.forEach((item) =>
                item.classList.remove('active'));
            this.classList.add('active');
        }

        list.forEach((item) =>
            item.addEventListener('click', activateLink));
</script>

　ついでにCSSにも修正を加えておきます。

.navigation ul li a .text{
    position: absolute; /* 変更 */
    color: var(--clr);
    font-weight: 400;
    font-size: 0.75em;
    letter-spacing: 0.05em;
    transition: 0.5s;
    opacity: 0;
    transform: translateY(20px);
}

4.Indicatorを移動させるようにする

最後にIndicatorをクリックに併せて移動させます。

これは疑似クラスのnth-childを使用してアクティブクラスが何番目にあるかによってIndicatorのX座標を変更します。

一つの項目の横幅が70pxであるので、何番目-1 * 70pxとして横幅を決めます。

これで完成になります。

.navigation ul li:nth-child(1).active ~ .indicator{
    transform: translateX(calc(70px * 0));
}

.navigation ul li:nth-child(2).active ~ .indicator{
    transform: translateX(calc(70px * 1));
}

.navigation ul li:nth-child(3).active ~ .indicator{
    transform: translateX(calc(70px * 2));
}

.navigation ul li:nth-child(4).active ~ .indicator{
    transform: translateX(calc(70px * 3));
}

.navigation ul li:nth-child(5).active ~ .indicator{
    transform: translateX(calc(70px * 4));
}

ソースは下記になります。

GitHub - kaji-rundevlog/magicNavbar
Contribute to kaji-rundevlog/magicNavbar development by creating an account on GitHub.
github.com

タイトルとURLをコピーしました