ナビゲーション。メニューやボタン類。すべてCSSで作成






メニュー類はパソコン向けとスマホ向けではずいぶん異なる。スマホはマウスがないのでちょっとマウスを乗せてみるということがない。モバイルが主流となりPC風のものは流行らなくなった。またSEO的にテキストがよいということになり画像も使われない傾向にある。カテゴリーがわかりやすいドロップダウン(プルダウン)メニューは横長でもあり、スマホでは縦長のドロワーメニューがよく使われる。
CSS学習がてら、CSSだけでなんとか頑張ろうとしたが、いずれもCSSだけだと限界があり、scriptを使うのが普通らしい。下の方にその使用作例ものせた。

とりあえずドロップダウンだが色々おかしいな。





いちおうレスポンシブにも対応したボタン

「a」タグに直接スタイルを指定したもの。横に並べているだけなので、スマホなどで画面が狭くなったら改行され二行になるということで、どの幅のスマホでも一応レスポンシブ。文字数が異なると少しボタンらしくなくなる。



上に同じレスポンシブ。画像を使わずになるべくボタンらしく。「リスト」タグでスタイルを指定したもの。「リスト」というブロックレベル要素と「リンク=a」というインライン要素に異なったスタイルを記述する。



文字だけのボタンです。改行されないので、レスポンシブではありませんが、文字数が少なければスマホでも大丈夫。


スマホを中心に考えたレスポンシブボタン

以下はレスポンシブ対応。 ブラウザの幅が狭くなると自動改行でスマホでも横四列でみられる。ただし色の変化などは長押しのみ。


次も応用。スマホ専用です。文字にあわせてあるので元ボックスの幅が広いと不恰好になる、計算が必要。



作例

上と同じもの。 こちら

マウスを乗せると上にレイヤーが表示される こちら

CSS5による こちらのアメブロ

タブの形が変わる。 こちら。

常に上に表示される。 こちら。 

以上はCSSのみで作った。以下はスクリプトなどを借用。

マウスオーバーJavascript こちら

jQueryによるドロワー、プルダウンメニュー こちら。

横スクロールメニュー(CSSのみ) こちら

縦長1ページスクロール こちら





以下は作成中




なお、CSSファイルに注釈や意味をつけてあります。