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

CSSだけで作る！ホバーするとスライドインするSidenav（サイドナビゲーション）の実装方法

CSSを使えば、画面の端に隠れているサイドナビゲーションボタンを簡単に作成できます。ボタンにマウスカーソルを合わせると、滑らかなアニメーションとともにスライドインして表示される「ホバー可能なSidenav」の実装方法を、実際に動くサンプルコード付きで解説します。

仕組みのポイント

  • position: fixed … ナビゲーションボタンを画面上の固定位置に配置します。
  • left: -120px … 通常時はボタンの大部分を画面の左側の外に隠しておきます。
  • transition: 0.3s … 位置が変化する際に0.3秒かけて滑らかにアニメーションさせます。
  • :hover { left: 0 } … マウスを乗せたときだけボタン全体を画面内にスライドインさせます。

実装例

以下は、CSSのみでホバー可能なサイドナビゲーションボタンを作成するコード例です。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
nav a {
    position: fixed;
    left: -120px;
    transition: 0.3s;
    padding: 10px;
    width: 140px;
    text-decoration: none;
    font-size: 20px;
    color: black;
    font-weight: bolder;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav a:hover {
    left: 0;
}
#Info{
    top: 20px;
    background-color: #6de2f7;
}
#Social{
    top: 80px;
    background-color: #71fc71;
}
#Address {
    top: 140px;
    background-color: #c4f553;
}
#Home {
    top: 200px;
    background-color: rgb(225, 115, 240);
}
</style>
</head>
<body>
<nav>
<a href="#" id="Home">Home</a>
<a href="#" id="Address">Address</a>
<a href="#" id="Social">Social Links</a>
<a href="#" id="Info">More Info</a>
</nav>
</body>
</html>

出力結果

上記のコードを実行すると、各ボタンは画面の左端に一部だけ見える状態で縦に並んで表示されます。

CSSだけで作る！ホバーするとスライドインするSidenav（サイドナビゲーション）の実装方法

いずれかのボタンにマウスカーソルを合わせると、そのボタンだけが以下のようにスライドして展開されます。

CSSだけで作る！ホバーするとスライドインするSidenav（サイドナビゲーション）の実装方法

まとめ

このように、position: fixed で要素を固定し、left の値を :hover で切り替え、transition でアニメーションを加えるだけで、JavaScript不要のシンプルなホバータイプSidenavが実装できます。色や位置、幅を変えれば、さまざまなデザインのサイトに応用できるので、ぜひ試してみてください。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>