CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで作る！アニメーション付きの開閉可能なサイドナビゲーションメニューの実装方法

CSSとJavaScriptを組み合わせることで、スムーズなアニメーション効果を持つ開閉可能なサイドナビゲーションメニューを簡単に実装できます。本記事では、CSSのtransitionプロパティと少量のJavaScriptを使った具体的な手順を、サンプルコードとともに解説します。

実装のポイント

アニメーション付きのサイドナビゲーションを実現するために、押さえておきたいポイントは以下の4つです。

  • ナビゲーションにはposition: fixedを指定し、画面の左端に固定配置します。
  • 初期状態ではwidth: 0として非表示にし、overflow-x: hiddenで内容のはみ出しを隠します。
  • transitionプロパティを設定することで、幅の変化が滑らかなアニメーションになります。
  • JavaScriptでボタンのクリックに応じて、ナビゲーションの幅を「300px」（開く）と「0」（閉じる）の間で切り替えます。

サンプルコード

以下が、アニメーション付きで開閉できるサイドナビゲーションメニューの完全なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>サイドナビゲーションメニュー</title>
<style>
.sideNav {
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(46, 218, 195);
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}
.sideNav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #000000;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    display: block;
    transition: 0.3s;
}
.sideNav a:hover {
    color: #f1f1f1;
}
.sideNav .closeBtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
button {
    padding: 15px;
    background-color: rgb(0, 27, 145);
    color: rgb(255, 255, 255);
    font-size: 20px;
    border: none;
    border-radius: 2%;
}
</style>
</head>
<body>
<nav class="sideNav">
<a href="#" class="closeBtn">&times;</a>
<a href="#">ログイン</a>
<a href="#">新規登録</a>
<a href="#">ホーム</a>
<a href="#">私たちについて</a>
</nav>
<button class="openSideNav">サイドナビを開く</button>
<script>
    const openBtn = document.querySelector(".openSideNav");
    openBtn.addEventListener("click", () => {
        showNav();
    });
    const closeBtn = document.querySelector(".closeBtn");
    closeBtn.addEventListener("click", () => {
        hideNav();
    });
    function showNav() {
        document.querySelector(".sideNav").style.width = "300px";
    }
    function hideNav() {
        document.querySelector(".sideNav").style.width = "0";
    }
</script>
</body>
</html>

コードの解説

  • .sideNav：ナビゲーション本体のスタイルです。width: 0で初期状態を非表示にし、transition: 0.5sによって幅の変化が0.5秒かけてアニメーションします。
  • .sideNav a：メニュー内リンクのスタイルです。ホバー時には文字色が変わり、transition: 0.3sで滑らかに遷移します。
  • .closeBtn：閉じるボタン（×）をナビゲーションの右上に絶対配置しています。
  • showNav()／hideNav()：それぞれナビゲーションのwidthを300px・0に切り替えることで、メニューの開閉を行います。

実行結果

このコードを実行すると、以下のような画面が表示されます。

CSSで作る！アニメーション付きの開閉可能なサイドナビゲーションメニューの実装方法

初期状態では、「サイドナビを開く」ボタンだけが表示されています。

ボタンをクリックすると、左側からサイドナビゲーションメニューがスライドしながら開きます。

CSSで作る！アニメーション付きの開閉可能なサイドナビゲーションメニューの実装方法

メニュー右上の「×」ボタンをクリックすると、サイドナビゲーションは再びスライドして閉じます。

  1. CSSでカード型UIを作成する方法｜影とホバー効果を活用した実装例

    Webサイトやアプリのデザインにおいて、カード型のUIはプロフィール紹介や商品一覧など、さまざまな場面で活用される定番のレイアウトです。CSSを使えば、画像とテキストを組み合わせた洗練されたカードを簡単に作成できます。 この記事では、box-shadow（影）や :hover（ホバー時の変化）を組み合わせて、立体感のあるカードを実装する方法を解説します。 カード作成のサンプルコード 以下のコードは、画像と肩書き情報を持つシンプルなカードの例です。 <!DOCTYPE html> <html> <head> <meta name=viewport con

  2. CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {