wp-Vicunaのグローバルナビゲーションをドロップダウンメニューにする（前編）

Web制作 wordpress

前置き

実は今、趣味のサイトをWordPressで作っています。

いろんなプラグインを入れたりテンプレートを弄ってアレコレしているのですが、中身がどう考えてもヘッポコ確定なのに入れ物だけ立派にしてどうするんだ、と自分にツッコミ入れつつ、日々新たな発見でかなり楽しいです。

そんな訳でしばらくの期間、自分がWordPressで経験したあんなコトやこんな事を、素人まるだしで備忘録としてまとめていこうと思います。

ページを開いてくださった方の、何がしかのお役に立てれば何よりです。

まずはともあれ、ドロップダウンメニューを作ってみる

お手軽にジェネレーターを使う

最初はプラグインで何かいいのないかなー、と探した結果、「PixoPoint Menu Plugin」ってのを入れてみたのですが…

使い方がさっぱり分かりません＼(^o^)／

で、そのサイトを調べていたらこんな物が…


Dropdown Menu CSS Generator

Suckerfishという、CSSとHTMLだけでできるドロップダウンメニューのジェネレーターであります。

いろいろ項目を弄って「Submit Design」をクリックすると、上のナビゲーションが変化します。これでオッケー、なら、下に表示されるCSSをコピーしてテキストエディタの新規ファイルに貼付け保存します。

一例：navistyle.css 直

メニューの構成を決める

この「はてなダイアリー」でもいいですし、各種Wikiでも、WordPressでもいいので、お手軽に「番号なしリスト」を作れるもので構成を考えていきます。

はてな記法ならこうですね。

-top
--page1
--page2javascript:;
--page3
---page3-1
---page3-2
---page3-3
-works
--page-a
--page-b
--page-c
-contact
-link
-blog
--category

実際に表示させると

  • top
    • page1
    • page2
    • page3
      • page3-1
      • page3-2
      • page3-3
  • works
    • page-a
    • page-b
    • page-c
  • contact
  • link
  • blog
    • category

構成が決まったら編集画面からプレビューで表示して、さらにその「ソース」を表示させ、該当部分の

<ul>〜</ul>

をコピーしてhtmlファイルとして保存します。（idやclassが付いていたら削除しておきます）

（別に必要ないかもだけど）Javascriptでアニメーション効果も付けよう

あとはaタグで各ページへのリンクを張り、〜など付け加えてやれば一丁上がり…なはずなのですが、Javascriptでアニメーション効果もつけてみます。

まず「Superfish」からzipをダウンロードして展開、右記サイトのExampleやOptionsのページ、example.htmlを参考にして先程保存したhtmlファイルに色々付け加えていきます。

今回Javascriptの設定は以下のようにしてみました。

<script type="text/javascript">
$(document).ready(function(){ 
        $("ul.sf-menu").superfish({ 
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation  
            dropShadows: false                            // disable drop shadows 
        }); 
	});
</script>

デフォルトは「ふわりとした表示」だけですが、オプションで「下に向かってスルッと伸びる」アニメーションも加えています。dropShadowsは今回シャドウ画像を使わないのでtrueのままでもシャドウ効果はでないのですが一応falseで。

<ul>〜</ul>

のあたりはこんな感じ。id="suckerfishnav"は先ほど作ったCSSで指定されてるIDです。class="sf-menu"でSuperfishが適用されます。

<ul id="suckerfishnav" class="sf-menu">
	<li><a href="http://hogehoge.com">top</a>
	<ul>
		<li><a href="http://hogehoge.com/page1">page1</a></li>
		<li><a href="http://hogehoge.com/page2">page2</a></li>
		<li><a href="http://hogehoge.com/page3">page3</a>
		<ul>
			<li><a href="http://hogehoge.com/page3-1">page3-1</a></li>
			<li><a href="http://hogehoge.com/page3-2">page3-2</a></li>
　　　　　　　　　　　（中略）
	<li><a href="http://hogehoge.com/blog">blog</a>
	<ul>
		<li><a href="http://hogehoge.com/category">category</a></li>
	</ul>
	</li>
</ul>

んで、出来上がったのがこちら↓

globaldemo.html 直　

※ソースを見たい場合はブラウザでソース表示かファイルをダウンロードで。

※デモのリンク先はすべてこのブログになっております。


あとはこれをWordPressのheader.phpに組み込めばいいんじゃネーノ、といきたいとこですが実はwp-Vicunaは…

後半へ続く!!




…今回WordPressもwp-Vicunaも絡んでない…

追記（…なのか？）

「はてなロゴTシャツ＆ステッカー欲しい！」

只今キャンペーン実施中(2010/08/04まで）

さらに追記

すみません。続きが中々書けません（泣）

もしこの続きを書く時は、違う所で改めてちゃんとした記事にしたいと思います

…できるといいな(´・ω・｀)