[ CSS ] 横方向ナビゲーションメニューのサンプル

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

CSS を使った横方向ナビゲーションメニューのサンプルを書いてみました。

テキストだけのメニューサンプル

画像を使っていないテキストのみのサンプルです。

https://codepen.io/darucub/pen/GgZZegz

テキスト＋背景画像のメニューサンプル

文字はテキストで背景画像を使ったサンプルです。 

https://codepen.io/darucub/pen/myPPoPv

画像を直接配置したサンプル

サンプル制作中。

画像置換を使ったサンプル

サンプル制作中。
Firefox でクリックした時に点線が出る事も書きたい。

懸案事項

• UL 要素を横に並べる時、float する時は幅の指定が必須なので、画像メニューなどの幅が確定している時に使う。

• 反対に幅の確定しないテキストメニューなどは、display:inline; を使う。

• DL の時はどうするの？

• スナップショット画像を掲載する

• クリアフィックスを使う

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。