ナビゲーション。メニューやボタン類。






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

1、レスポンシブに対応しないパソコン専用ボタン

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





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



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

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



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




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

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


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



作例

上と同じもの。 こちら

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

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

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

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

長い横スクロールメニュー こちら

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

マウスオーバーJavascript こちら

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

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





なお、CSSファイル