top

プルダウンメニューを導入する

1カラムにすると悩むのがナビゲーション部分。カテゴリーがたくさんあると横並びじゃ入りきらなくてレイアウトに困りますよね。そこでネットで見かけて「いいな」と思ったプルダウン式メニューを導入してみることにしました。

今日の覚え書きさんのプルダウン式メニューバーになりました経由で知ったボムガールさんで紹介されていたスタイルシート スタンダード・デザインガイドという本に載っているカスタマイズです。私も購入しました♪

以下はこの本を参考にしてプルダウンメニューに取り組んでみた人(取り組んでみたい人)向けの覚え書きです。

■基本→応用

060202_1.gif

060202_2.gif

この本の通りにすると左のような感じのメニューになると思います。これが基本形かと。企業のサイトみたいなイメージですね。まずは本の通りにセットしてみて無事動作確認が出来たら、その後で少しずつ色とかデザインを自分流に変えていくのがいいと思います。いきなり自己流で適当にやると失敗の確立高し(経験者は語る…)。慣れてきたらいろいろ変えてみて自分だけのオリジナルデザインにすると楽しいです。うちでは右のにしてみました。

■注意事項
3.2のデフォルトテンプレを使っている方は、base-weblog.css内の以下の赤字の部分を削除して下さい。

#pagebody { position: relative; width: 100%; }
#alpha, #beta, #gamma, #delta
{
display: inline; /* ie win bugfix */
position: relative;
float: left;
min-height: 1px;
}
.entry,
.trackbacks,
.comments,
.archive
{
position: static;
overflow: hidden;
clear: both;
width: 100%;
margin-bottom: 20px;
}

060202_3.gif

←これを残したままだとサブメニューがエントリーの下に潜ってしまい、かつ正常に動作しなくなります。リンクは一部しかきかないし、まだマウスがサブメニューの上にあるのに何故かメニューがするっと消えてしまうし、最下部のメニューは選択すら出来ないし、もう何がどうなってんだか…(涙状態)。デフォcssが原因だと分かるまでに4日間も費やしてしまいましたよもうう。これに気がつかなかったらあきらめていたところでした。想像以上に手強し、3.2のデフォテンプレ…!(というか、なんでそんな記述があるんですか? この部分ってどういう意味があったんだろ? なくてもちゃんと見えてるし。cssはいまだによく分からない部分多々…)。

おかげですっごい苦労しましたが、なんとか無事に設置出来ました。情報をいただけた方々、ありがとうございました!

(2月6日記事修正)

 

トラックバックURL

トラックバックされる際にはこの記事へのリンクをお願い致します

コメントを投稿

 


 <注意>
 ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。
 コメント投稿の際はお手数ですがjavascriptをオンにして下さい。
 *javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。