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

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

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

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

戻るで閉じる

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

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

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

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

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

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

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

作例

上と同じもの。　こちら

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

CSS5による　アメブロPCサイト

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

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

長い横スクロール主にスマホ こちら

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

PCマウスオーバーJavascript　こちら

jQueryによるドロワー、幅広時プルダウンメニューIE不可　こちら。

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

2020年限りのFLASH　こちら