茨の道も一歩から

インフラ構築からプログラミング(Python・JavaScript)までITに関するブログです。

CSS：固定サイドメニュー

CSS Web

f:id:sireline:20200728232650p:plain

  • スクロールしても、サイドメニューが常時表示されます。

サンプルコード (index.html)

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Fixed Sidemenu</title>
        <link href="public/css/index.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <main class="main">
                <h1>Main area</h1>
            </main>
            <aside class="sidebar">
                <div class="fix-area">
                    <section class="side-menu">
                        <h2>Sidemenu1</h2>
                        <ul>
                            <li>Menu1</li>
                            <li>Menu2</li>
                        </ul>
                    </section>
                    <section class="side-menu">
                        <h2>Sidemenu2</h2>
                        <ul>
                            <li>Menu1</li>
                            <li>Menu2</li>
                        </ul>
                    </section>
                </div>
            </aside>
        </div>
    </body>
</html>

サンプルコード (public/index.css)

@charset "utf-8";

.container {
    display: flex;
    height: 1600px;
}

.main {
    flex: 3;
    background-color: darkgrey;
}

.sidebar {
    flex: 1;
    background-color: darkolivegreen;
}

.fix-area {
    background-color: steelblue;
    top: 10px;
    position: sticky;
    z-index: 1;
}