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

デスクトップ、タブレット、スマホに対応した、通常のスタティックなヘッダやスクロールしても常に上部・下部に固定表示されるバーとして配置できるナビゲーションを実装するスタイルシートを紹介します。

スクリプトは一切無し、アニメーションも快適な超軽量のスタイルシートです。

デモのキャプチャデモのアニメーション

Luxbar -GitHub

Luxbarのデモ

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

デモのキャプチャ

デモページ

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

デモのキャプチャ

カスタマイズ

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

デモのキャプチャ

テーマ「Light」に変更

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

  • Default: 上部に表示される通常のスタイル
  • Static: スタティックに表示されるスタイル
  • Fixed: 常に上部に表示されるスタイル
  • Fixed Bottom: 常に下部に表示されるスタイル
デモのキャプチャ

スタイル「Default」に変更

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

デモのキャプチャ

スタイル「Fixed Bottom」に変更

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

デモのキャプチャ

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

Luxbarの使い方

Step 1: 外部ファイル

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

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

Step 2: HTML

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

コードが面倒、という人も安心です。
デモページではオプションで変更したコードを生成することもできます。

デモのキャプチャ

デモページの下の方

sponsors

top of page

©2024 coliss