Next/Prev & Back to Top をまとめたナビゲーションの CSS デザインアイディア

Category : CSS

mlog を作るときに、Next/Prev と Back to Top をまとめた、下の画像のようなナビゲーションを作ったんですが、これを応用すれば色々作れそうだと思って、5種類ほど作ってみました。

mlog で使っているナビゲーションのスクリーンショット

画像を使わなくてもそれなりに色々できるというデモです。
ただし、そのまま使えばもちろん非対応ブラウザでは表示が崩れますし、コードも長いです。
実用するなら素直に画像を使ったほうが早いし安心だと思います。
前置き終わり。

Google Chrome 12 dev だと以下のように表示されます。

デモページのスクリーンショット

Next/Prev & Back to Top Navigation Design Idea

デモファイルをダウンロード

各ブラウザの最新版なら、どれも同じように見えると思います。
IE8 は3番目と4番目以外は崩れますが、使えなくはない……と思います。
:before, :after 擬似要素が使えない IE7 以下はかなり悲惨です。
Firefox 3.6 は2番目の真ん中の三角がダメでした。

どれもこれも指定が長いので、CSS コードは省略します。
Firebug とかのデバッグツールで見たりダウンロードしたりしてご確認ください。
ポイントは :before, :after, box-shadow, border です。
text-indent:-9999px; みたいなのはスパムがどうこうありますが、ここでは考えてません。

何でわざわざ「Back to Top」を見えなくしてボーダーで三角形を作ってるのかというと、そこのテキストが「▲」だと CSS 切られたときに分かりづらいかなーと思ったからです。
それと、フォントで「▲」作ると環境によっては崩れる可能性があるので、ボーダーで作りました。

また、見た目だけを考えるなら、CSS3 Patterns Gallery などを見ても分かるように、Multiple backgrounds, background-size, gradient() が使えれば、もっと自由度はアップします。:before, :after も使わずに済みます。
IE9 が gradient() に対応していないので、今回は使いませんでした。

デモで使っている CSS を使いたい方がいましたらご自由にどうぞ。
でもまあ、最初に書いたように画像で指定したほうが安全だとは思います。

Leave a Reply