WordPressのグローバルメニューをスタイルシートでカスタマイズするのは結構大変です。
メニューは、見出しなどとは違って、<ul>と<li>との階層構造からできていて、自前で綺麗に作るには少しハードルが高くなっています。
そんな時は、わからないまま試行錯誤せず、良質なサンプルを公開しているページが沢山あるので、それをヒントにカスタマイズするのも良い手かもしれません。
というわけで、ULを使用したデザイン性の優れた水平メニューを公開しているページをまとめてみました。
photo by Alpha
目次
CSS Menu Generator
サンプルをダウンロードすることができ、簡単なメニューを作成してみてカスタマイズすることもできます。
CSS Horizontal Menus
CSS Horizontal Menus | CSS MenuMaker
有料のものもありますが、無料でソースをダウンロードできるものもあります。オンラインカスタマイズは、CSSを見るとき購入を促すダイアログが表示されます。
CSS Library
CSS Library Horizontal CSS Menus
CSSでダイナミックに動く水平メニューのサンプル集です。デモとコードが同時に見れるページ設計になっていて、動作を確かめながらコードを見ることができます。
CSS Menu Builder
黒基調のメニューを作成できるジェネレーターです。背景や、ホバー色を自分で選んで作成することができます。
IzzyMenu
IzzyMenu – Online Menu Generator
プレビュー画面で確認しながら、オンライン上で細かな設定ができるメニュービルダー。「Download」ボタンを押すことで15秒ほど待てば、ソースコードを取得することができます。
Online Menu Generator
シンプルな検索付きメニューを作成できるジェネレーター。
Blended Menu
Free Online HTML and CSS Menu Layout Generator | Blended Menu
サブメニューなども見ながら設定できるジェネレーター。「Build Export」からソースコードを表示することができます。ただ、Firefoxからだとソースコードが表示されなかったので、Firefox以外のブラウザの使用を推奨。
Listamatic
シンプルな水平メニューのサンプル集。
デザインサンプル
ソースコードは不要で、デザインのみを参考にするには、以下のようなサイトパーツの見本を集めたサービスもあります。
Croppy
グローバルナビ | Croppy
Webデザイナーのための「ソーシャルスクラップブックサービス」です。
ブブンデザインアーカイブ
サイトのコンセプトは 「Webデザイナーのアイデアインスピレーションを加速化する」とのことで、デザイン性の優れた部分をアーカイブしているサイトです。
まとめ
グローバルナビゲーション部分は、サイト上で最もクリックされる部分の一つです。
それ故に、デザインを最も凝りたい部分であるとともに、最もスタイルシートの設定がややこしい部分でもあると思います。
ですので「ナビゲーションメニューがどうもうまくスタイルできない」、「メニューをカスタマイズしたいけど良いデザインが思いつかない」なんて方は、紹介したサイトを利用してみると、良いインスピレーションを得られるかもしれません。
