WebToolsTweetLuxbarについてCSSのみで作成されたレスポンシブ対応のナビゲーションです。スクリプトを使用せずに滑らかなアニメーションで動作します。サイト上記公式ページがデモページも兼ねています。使用方法Luxbarはファイルをダウンロードしサーバー内に設置する方法とCDNを利用する方法があります。ファイルをダウンロードして使用する場合は、公式サイトからLuxbarをダウンロードしてください。ファイルを解凍するとLuxbarフォルダが作成され、CSS本体はbuildフォルダに入っています。自分の環境に合わせて、head要素内に下記コードを追加してください。href="luxbar.min.css">CDNを使用する場合は、head要素内に下記コードを追加してください。公式ページでオプションを指定すると、ページ下部にオプションで指定されたコードが自動生成されます。生成されたコードを自分のページにコピーして使用してください。Style:4つのナビゲーションスタイルから1つを指定Defaultコードを記述した位置にナビゲーションが表示されます。Staticブラウザの上部にナビゲーションが表示されますが、画面スクロールするとスクロールアウトします。Fixedブラウザの上部にナビゲーションが固定表示され、画面スクロールしてもそのままです。Bottomブラウザの下部にナビゲーションが固定表示され、画面スクロールしてもそのままです。Alignement:メニューの表示位置を指定Left左寄せでメニューが表示されます。ロゴを表示しない場合は、ナビゲーションの左端からメニューが表示されます。Right右寄せでメニューが表示されます。Visibility:ロゴの表示・非表示を指定Showロゴがナビゲーションの左端に表示されます。Hideロゴがナビゲーションに表示されなくなります。Animation:ハンバーガーアイコンのアニメーションを指定Spinハンバーガーアイコンの罫線が1回転しクローズアイコンが表示されます。DoubleSpinハンバーガーアイコンの罫線が2回転しクローズアイコンが表示されます。テーマカラーを指定テーマカラーを右側の9色の中から指定できます。簡単に実装でき動作も軽快で見た目もばっちりです。Bootstrapのメニューバーも簡単でいいですが、Luxbarもちょっと試してみてはどうでしょうか。次の記事へBlog:サイトの環境更新ABOUTこのホームページでは、Bootstrap・WordPress・Design等の情報を発信しています。マイペースな更新ではありますが、GreenApple-Roomをよろしくお願いいたします。GreenApple-Room。