JavaScriptが高機能になり、有効であるのが当たり前になるとちょっとしたアクションであってもJavaScriptで実現したくなります。しかし無効になっている場合やブラウザ間の動作誤差によってうまく動かない場合もあるでしょう。 そういった不具合を防止するにはスタイルシートだけで実装するのがベストです。今回はCSSだけでナビゲーションバーを実装したLuxbarを紹介します。

Luxbarの使い方

こちらはデスクトップ版での表示。

レスポンシブなので幅を縮めるとハンバーガーメニューになります。

メニューを表示したところ。

Luxbarはよくあるナビゲーションバーですが、CSSだけで実装した点が驚きです。CSS3を使っていますが、JavaScriptが無効であっても動作します。モダンなWebブラウザであれば問題なく動作するでしょう。

LuxbarはCSS3製のオープンソース・ソフトウェア（MIT License）です。

balzss/luxbar: Featherweight, Responsive, CSS Only Navigation Bar