[CSS]超軽量で快適！スクリプト無しで実装されたレスポンシブ対応のナビゲーション -Luxbar

サイト構築 -CSS

Post on:2017年2月22日

Luxbarのデモ

デモでは実際の動作、ナビゲーションのカスタマイズが行えます。

デモページ

カスタマイズは、デモページの下の方。

カスタマイズ

9つのテーマが用意されており、選択するとデモのナビゲーションに反映されます。

テーマ「Light」に変更

ナビゲーションのスタイルは、4種類。

Default: 上部に表示される通常のスタイル
Static: スタティックに表示されるスタイル
Fixed: 常に上部に表示されるスタイル
Fixed Bottom: 常に下部に表示されるスタイル

スタイル「Default」に変更

Fixedの2つのスタイルは、スクロールしても常に表示されています。

スタイル「Fixed Bottom」に変更

ロゴの有無、アイテムの配置なども変更できます。

ロゴ有り、アイテム右寄せ

Luxbarの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

<head>
  <link rel="stylesheet" href="luxbar.min.css">
</head>

<head>

</head>

スタイルシートは、CDNでも用意されています。

<head>
  <link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css">
</head>

<head>

</head>

Step 2: HTML

ナビゲーションはリスト要素で実装します。

<header id="luxbar" class="luxbar-fixed">
    <input type="checkbox" id="luxbar-checkbox"/>
    <div class="luxbar-menu luxbar-menu-right luxbar-menu-material-cyan">
        <ul class="luxbar-navigation">
            <li class="luxbar-header">
                <a href="#" class="luxbar-brand">ロゴ</a>
                <label class="luxbar-hamburger luxbar-hamburger-doublespin" 
                id="luxbar-hamburger" for="luxbar-checkbox"> <span></span> </label>
            </li>
            <li class="luxbar-item"><a href="#">アイテム 1</a></li>
            <li class="luxbar-item"><a href="#">アイテム 2</a></li>
            <li class="luxbar-item"><a href="#">アイテム 3</a></li>
            <li class="luxbar-item"><a href="#">アイテム 4</a></li>
        </ul>
    </div>
</header>