WordPressグローバルナビゲーションのCSSカスタマイズに最適な横並びメニューサンプルまとめ

menu

WordPressのグローバルメニューをスタイルシートでカスタマイズするのは結構大変です。

メニューは、見出しなどとは違って、<ul>と<li>との階層構造からできていて、自前で綺麗に作るには少しハードルが高くなっています。

そんな時は、わからないまま試行錯誤せず、良質なサンプルを公開しているページが沢山あるので、それをヒントにカスタマイズするのも良い手かもしれません。

というわけで、ULを使用したデザイン性の優れた水平メニューを公開しているページをまとめてみました。

photo by Alpha

スポンサーリンク
レクタングル(大)広告

CSS Menu Generator

CSS Menu Generator

CSS Menu Generator

サンプルをダウンロードすることができ、簡単なメニューを作成してみてカスタマイズすることもできます。

CSS Horizontal Menus

CSS Horizontal Menus

CSS Horizontal Menus | CSS MenuMaker

有料のものもありますが、無料でソースをダウンロードできるものもあります。オンラインカスタマイズは、CSSを見るとき購入を促すダイアログが表示されます。

CSS Library

CSS Library Horizontal CSS Menus

CSS Library Horizontal CSS Menus

CSSでダイナミックに動く水平メニューのサンプル集です。デモとコードが同時に見れるページ設計になっていて、動作を確かめながらコードを見ることができます。

CSS Menu Builder

CSS Menu Builder

Horizontal menus

黒基調のメニューを作成できるジェネレーターです。背景や、ホバー色を自分で選んで作成することができます。

IzzyMenu

IzzyMenu - Online Menu Generator - Build Website CSS-DHTML Menu Easily!

IzzyMenu – Online Menu Generator

プレビュー画面で確認しながら、オンライン上で細かな設定ができるメニュービルダー。「Download」ボタンを押すことで15秒ほど待てば、ソースコードを取得することができます。

Online Menu Generator

Online Menu Generator

Online Menu Generator

シンプルな検索付きメニューを作成できるジェネレーター。

Blended Menu

Blended Menu

Free Online HTML and CSS Menu Layout Generator | Blended Menu

サブメニューなども見ながら設定できるジェネレーター。「Build Export」からソースコードを表示することができます。ただ、Firefoxからだとソースコードが表示されなかったので、Firefox以外のブラウザの使用を推奨。

Listamatic

Listamatic

Horizontal lists

シンプルな水平メニューのサンプル集。

デザインサンプル

ソースコードは不要で、デザインのみを参考にするには、以下のようなサイトパーツの見本を集めたサービスもあります。

Croppy

グローバルナビ  Croppy

グローバルナビ | Croppy

Webデザイナーのための「ソーシャルスクラップブックサービス」です。

ブブンデザインアーカイブ

グローバルナビゲーションのブブンデザイン

グローバルナビゲーションのブブンデザイン

プライマリナビゲーションのブブンデザイン

サイトのコンセプトは 「Webデザイナーのアイデアインスピレーションを加速化する」とのことで、デザイン性の優れた部分をアーカイブしているサイトです。

まとめ

グローバルナビゲーション部分は、サイト上で最もクリックされる部分の一つです。

それ故に、デザインを最も凝りたい部分であるとともに、最もスタイルシートの設定がややこしい部分でもあると思います。

ですので「ナビゲーションメニューがどうもうまくスタイルできない」、「メニューをカスタマイズしたいけど良いデザインの思いつかない」なんて方は、紹介したサイトを利用してみると、良いインスピレーションを得られるかもしれません。