プルダウン式メニューバーになりました : 今日の覚え書き Tickler’s bunkum days

HOME 　»　design , Firefox , JavaScript , MovableType , tips , tutorials , web 　»　プルダウン式メニューバーになりました

プルダウン式メニューバーになりました

2005/02/18　|　Comments & Trackbacks : 27

今朝、いつものように各サイトさんへのお散歩をしていると、すっごいオサレなメニューバーの作り方を発見。
企業サイトチックでかっこよくないですか？
これは、ずっと前からやってみたかった形だったので、即マネっこしたくなり午後中頑張ってしまいました。
もっと他の事を頑張れとか、そういうツッコミは禁止で。

以下導入の際の覚え書きです。

参考記事

「ボムガール」さん：プルダウンメニューテンプレート（テスト版）

ボムガールさんではサイト全体のテンプレートごと配布されていますが、今回はナビゲーションメニューに関する事のみ参考にさせて頂きました。
以下自分用の覚え書き。

メニューを置きたいページの<head>～</head>内に以下のJava Scriptを記述。

<script type="text/javascript">
<!--
function MenuOn(x){
obj=document.getElementById("submenu"+x).style.visibility="visible";
}
function MenuOff(x){
obj=document.getElementById("submenu"+x).style.visibility="hidden";
}
//-->
</script>

スタイルシートに以下の記述を追加。「.menu」のリンク要素で決めたwidthの値により「#menuX」のleftの数値を変化させる。
なお「#menuX」は親要素（ぱっと見てメニューバーに表示される部分）の個数分だけ用意する。

※left：(width+1)×(X-1)px

/* menu */
.menu {
font-size: 11px;
width: 800px;
font-family:"Osaka",Verdana, Arial,"ＭＳ Ｐゴシック",sans-serif;
margin-top: 1px;
padding: 0px;
background: #d1d1d1;
color:#5C7554;
height: 1.9em;
text-align: center;
position: relative;
top: 0;
left: 0;
}

.menu a{
color: #e7e7e7;
background: #d1d1d1;
text-decoration: none;
display: block;
padding: 0px;
line-height: 1.9em;
width: 90px;
}
.menu a:visited {color:#5C7554;}
.menu a:hover{color:#5C7554; background-color: #f1f1f1; text-decoration: none;}
.menu a:active {color: #5C7554;}

.submenu a{
color:#5C7554;
background: #d1d1d1;
font-weight: normal;
border-top: 1px solid #5C7554;
}
.submenu a:visited {color:#5C7554;}
.submenu a:hover{color:#5C7554; background-color: #f1f1f1;}
.submenu a:active {color: #5C7554;}

#menu1{
position: absolute;
top: 0;
left: 0;
}

#menu2{
position: absolute;
top: 0;
left: 91px;
}

～（中略）～

#menu8{
position: absolute;
top: 0;
left: 637px;
}

div.menu span{ display: none;}

div.submenu {
visibility: hidden;
position: absolute;
left: 0;
}

このサイトはモジュール化しているので、新たにメニュー用のモジュールテンプレートを作成し、以下のように記述。
子要素を表示させる場合、オレンジ色の部分の数字は必ず各要素で統一する事。数字が違うと正しい動きをしません。

<div class="menu">

<div id="menu1" onmouseover="MenuOn(1)" onmouseout="MenuOff(1)">
<a href="<$MTBlogURL$>introduction.php" title="このサイトについて" class="menuhead">Introduction</a><span>|</span>
<div class="submenu" id="submenu1">
<a href="<$MTBlogURL$>profile.php" title="管理人プロフィール" >Profile</a><span>|</span>
<a href="<$MTBlogURL$>about.php" title="コメント・トラバ・リンクについて">Policy</a><span>|</span><a href="<$MTBlogURL$>search.php" title="検索ページ">Search</a><span>|</span>
</div>
</div>

<div id="menu2" onmouseover="MenuOn(2)" onmouseout="MenuOff(2)">
<a href="<$MTBlogURL$>categories.php" title="記事のカテゴリー・前半" class="menuhead">Categories1</a><span>|</span>
<div class="submenu" id="submenu2">
<a href="<$MTBlogURL$>archives/cat_01_MovableType.php" title="Movable Type">Movable Type</a><span>|</span>
<a href="<$MTBlogURL$>archives/cat_02_Customize.php" title="ブログカスタマイズ">Blog customize</a><span>|</span>
<a href="<$MTBlogURL$>archives/cat_03_diary.php" title="今日のボヤキ">Diary</a><span>|</span>
<a href="<$MTBlogURL$>archives/cat_04_itouke.php" title="裏ワザクッキング">itouke</a><span>|</span>
<a href="<$MTBlogURL$>archives/cat_05_cooking.php" title="料理教室のレシピ">Cooking</a><span>|</span>
<a href="<$MTBlogURL$>archives/cat_06_favoritenews.php" title="気になる情報">Anxious news</a><span>|</span>
<a href="<$MTBlogURL$>archives/cat_07_trip.php" title="おでかけしました">Trip</a><span>|</span>
<a href="<$MTBlogURL$>archives/cat_08_book.php" title="最近読んだもの">Reading</a><span>|</span>
</div>
</div>

～（中略）～

<div id="menu7">
<a href="<$MTBlogURL$>mail.php" title="メールはこちらから" class="menuhead">Mail</a><span>|</span>
</div>

<div id="menu8">
<a href="http://moso.upper.jp/bbs/apeboard_plus.cgi" title="掲示板はこちらから" class="menuhead">BBS</a><span>|</span>
</div>

</div>

このモジュールをメニューを表示させたいテンプレートに張り込んで再構築をかける。

これでできあがりです。

このメニューバーはJava Scriptを使用して表示制御を行っているため、Javaを無効化しているブラウザでは親要素しか表示されません(デザイン崩れは特に起こらないようなのでご安心を)。

サブカテゴリーを使用しているサイトさんで、親要素にメインカテゴリ、子要素にサブカテゴリを表示させたいなんて時は、親要素のページのサイドバーあたりにに子要素へのリンクを表示させる小細工を仕込んでおけばOKなのですが、私のように各メニューをまとめて表示させる場合、親要素の所に専用の案内ページなどを作ってあげる必要があると思われます。
実はメニューバーを作る作業よりも、そのページを作る作業に時間を取られてしまいましたorz
なおWinXP＆IE6.0、Firefox1.0、NN7.1、Opera 7.53、Lynxで動作確認されているそうです。

ちなみに、元記事はsb対応で記述されているので、sb使いの方は元記事を参考にされた方がわかりやすいかも知れません。
この方法を紹介してくださっためけ。さん、本当にありがとうございました。

Popularity: 26% [?]

Tags : design , Firefox , JavaScript , MovableType , tips , tutorials , web　|　TrackBack URL
Prev : 最近導入したプラグイン　|　Next : 料理教室のレシピ16　【いかの炒め物・海鮮スープ】

Comments & Trackbacks : 27

Response from miaow2005 年 2 月 19 日　3時42分

おほほ、美しい仕上がりですね。
こちらの雰囲気にピッタリ合ってて良いと思います。(￣+∇￣)b
機能的だし　スマート。　流石ですねー　うん。
ワタシもさっそくボムカールさんのサイトを拝見してきました。

ワタシのところには合わないかな、、どかな。(笑)

Response from miaow2005 年 2 月 19 日　3時43分

ありゃ、ボムカールさんじゃなくて　ボムガールさんです。ごめんなさい。

Response from めけ。2005 年 2 月 19 日　9時17分

はじめまして。
実はテンプレ全体よりプルダウンメニューの導入の仕方のほうが需要が
あると思ったんですが説明がめんどくさいので
そのままソース見て自分で導入してちょ！というふうにしました（笑
参考にしてくださりありがとうございました＾＾

Response from もそ2005 年 2 月 19 日　10時24分

■miaowさま
ねぇ、これすごく綺麗ですよねぇ。
シンプルで使いやすくて、これは（･∀･）ｲｲ!!って思いましたって。
でもmiaowさんの所は今のままのメニューバーの方が確かに似合ってるかも知れませんね。
のほほーんとした感じを壊さない方がよさそう。

■めけ。さま
いえいえ、本当にこちらこそありがとうございました。
ずっとこういうメニューってどうやったら作れるのかなぁ？と思っていたので、記事を見つけた時は思わずガッツポーズしちゃいました。
でも確かに説明するとなるとちと面倒かも知れないですよねぇ（苦笑）。
年中カスタマイズをやっているような人間なら、ソース見れば一発なんですけど、そうでない人に説明するとなると…。

Response from 【Ｓ．Ａ．Ｄ．】2005 年 2 月 19 日　23時14分

プルダウン式メニューバー導入。

ネットサーフをしていると、「今日の覚え書き」さんというサイトを発見。色々とlo…

Response from ☆Full Tilt Boogie☆2005 年 3 月 16 日　2時28分

スキンカスタマイズ

もう、どうしたいのか分からなくなって来ちゃった…

と言う事で。カスタマイズ、とりあえず終了！右上に設置している『音ログ×POQUE』に合わせた雰囲気にして…

Response from [cc*]CECiLE*2005 年 3 月 22 日　20時59分

メニューの表示

今日の覚え書き様で知ったプルダウンメニューを導入しました。表立っては稼動させ…

Response from さえら2005 年 5 月 5 日　12時35分

こんにちは～。
プルダウンメニューに挑戦してます。
変更しなくちゃいけないテンプレートがたくさんあるので　時間かかりそう。
全てきりかえることができたら、ご報告にまいります。

Response from やむやむ2005 年 5 月 5 日　17時02分

プルダウン式メニューバー

今日の覚え書きもそさんのところでとてもかっこいいメニューバーにされてるのをお…

Response from さえら2005 年 5 月 5 日　17時59分

やっとできましたぁ。☆⌒（＊＾∇゜）v ありがとう!
これだけの記事仕上げるの大変だったでしょう？おかげですごーくわかりやすくて
助かりましたけど。いつも助けていただいて゛v(^_^ v)=アリガトウ＝（v ^_^)v゛

Response from もそ2005 年 5 月 6 日　10時39分

■さえらさん
いえいえ、私は元記事を参考に、手順を書き出しただけなので大したことはしてないです（笑）。
お役に立てて幸いでした。
これ、結構テンプレートをいじらなくちゃいけない部分が多くて面倒なんですよねぇ。
お疲れ様でした。

Response from LM * The Letters about a MOVIE.2005 年 5 月 19 日　3時07分

プルダウンメニュー

プルダウンメニューを付けてみました。参考にしたのは、こちらの記事です。■今日の覚書：プルダウン式メニューバーになりました。

Response from yas02332005 年 5 月 19 日　3時15分

こんにちは。あら、おでかけ中ですね。

プルダウンメニューをこちらの真似して、付けさせていただいたので、トラックバックしました。手違いでトラックバックが２重になってしまい申し訳ありません。不要分は削除してください。

これで、サイドバーに表示しなくちゃならないものが減って、スッキルできる！
かと思ったらそうでもありません。
そもそもセンスが無いんですね、僕には。

こちらのサイトにはいつも感心させられます！

Response from もそ2005 年 5 月 23 日　9時35分

■yas0233さん
はい、お出かけ中でした（笑）。

私、yas0233さんのサイトのデザイン好きですよ？
すっきりしていていいじゃないですか。
このサイトは色が少ないからごてごて見えないだけだと思います。

Response from Ui-ed2005 年 5 月 28 日　16時07分

最近のカスタマイズ

■縦メニューだったカテゴリ一覧をメニューバーに配置、プルダウン式にしました。ボ…

Response from Whasssup?2005 年 6 月 1 日　21時06分

Movable Type戦記

　結局htmlのままでは再構築することができずにPHP化しました。記事の数は90ほどで、最初は一度に再構築する数を変更したり、タイムアウトになる時間を変更したり…

Response from azuretit2005 年 6 月 3 日　5時31分

もそさん!　先日はコメントありがとうございました…。設置した時は「ま、いっかー」だったメニューの配置が気になりだして、CSSまた修正しちゃいました。そのうちまた触るかもしれません..そんな予感が…。動きのあるもののデザインって目立つのでやっぱり気になるものですね。また勉強させてくださいませ…。いつもありがとうございます!

Response from もそ2005 年 6 月 3 日　22時19分

■azuretitさん
こんばんはー＾＾。
デザインってほんのちょっとだけずれていても全然印象が違ってみえるのが困りものなんですよねぇ（苦笑）。
そんなわけで、ブラウザによって見え方が違うのが非常に気にくわないという…。
私もいじり始めると止まらないです。

Response from ＣＵ＊Ｃｈｕ！2005 年 7 月 6 日　4時41分

出来たぁ！！！！！！！

ようやく、”ブルダウン式メニューバー”完成しました。ヽ(ﾟ▽ﾟ*)乂(*ﾟ▽ﾟ)…

Response from Hiimi2005 年 7 月 10 日　15時45分

はじめまして。
以前こちらを拝見したときから完成度の高さに驚かされっぱなしでした。
MovableTypeを導入することになり、ずいぶんと参考にさせていただきました（ちょっと参考のつもりがどんどん…汗）
このプルダウン式のメニューバーはステキですよね（＾＾）
これからもちょくちょく覗かせていただきますのでよろしくお願いいたします。
ありがとうございました。

Response from もそ2005 年 7 月 11 日　12時43分

■Hiimiさん
どもども、はじめまして。
このサイトは単純に見た人が使いやすいようにと言う事だけに気を使って作っています。
褒めて頂けたという事は、それを感じ取って頂けたという事なんでしょうね。
有り難い事です。

あー、メニューバー導入されたみたいですね。
もし良かったらトラバとかで教えてください（笑）。そしたら見に行けますので。

Response from Tea Time Lover2005 年 7 月 11 日　23時43分

カスタマイズ参考サイト様

カスタマイズもいいけれど、中身を充実させなきゃね。とりあえずおおまかなカスタマ…

Response from [嘘]Liar's web2005 年 10 月 13 日　8時51分

■プルダウン式メニューとcss切り替え

やむやむさんのプルダウン式メニューバーと今日の覚え書きさんのプルダウン式メニュー…

Response from WingMemo2006 年 2 月 2 日　19時57分

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

１カラムにすると悩むのがナビゲーション部分。カテゴリーがたくさんあると横並びじゃ入りきらなくてレイアウトに困りますよね。そこでネットで見かけて「いいな」と…

Response from 亜風瑠2006 年 3 月 8 日　15時42分

もそさま。こんにちわ。はじめまして。
ずーっとプルダウン式メニューバーにしたくてお気に入りに入れていました。
挫折挫折で設置する事が出来ました♪
参考にさせてもらい本当にありがとうございました。
TBさせて頂きます。

Response from 弁慶の舞台裏2006 年 3 月 8 日　15時46分

プルダウン式メニューバー

ブログアクセサリーが段々と多くなりそしてまだまだ設置したいものはいっぱい。それ…

Response from もそ2006 年 3 月 17 日　1時27分

■亜風瑠さん
遅レスですいません！
さっき気付いたです・・・orz

わざわざコメントありがとうございます。
確かに手順がのみこめるまでは、こういうのってやってもやっても失敗しちゃうんですよねぇ。
お役に立てたようで良かったです。

プルダウン式メニューバーになりました

参考記事

Related Posts

Comments & Trackbacks : 27