子育て中の主婦のためのアフィリエイトブログ入門 アフィリエイト＊レシピ　ブログで稼ぐ子持ち主婦

挑戦！ダメ主婦アフィリブログさんのブログにあるプルダウンがうらやましかったので
プルダウンメニューの設置の仕方を 参考にやってみることにしました。

以下、挑戦！ダメ主婦アフィリブログさんより抜粋させていただきます。

---

HEAD〜/HEADの間に挿入
<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>

BODY内、設置したい場所へ
<div class="menu"> <div id="menu1" onmouseover="MenuOn(1)" onmouseout="MenuOff(1)"> <a href="cate01.html" class="menuhead">メニュー１</a> <div class="submenu" id="submenu1"> <a href="1.html">１</a><span>|</span> <a href="2.html">２</a><span>|</span> <a href="3.html">３</a><span>|</span> <a href="4.html">４</a> </div> </div> <div id="menu2" onmouseover="MenuOn(2)" onmouseout="MenuOff(2)"> <a href="cate02.html" class="menuhead">メニュー２</a> <div class="submenu" id="submenu2"> <a href="1.html">１</a><span>|</span> <a href="2.html">２</a><span>|</span> <a href="3.html">３</a><span>|</span> <a href="4.html">４</a> </div> </div> <div id="menu3" onmouseover="MenuOn(3)" onmouseout="MenuOff(3)"> <a href="cate03.html" class="menuhead">メニュー３</a> <div class="submenu" id="submenu3"> <a href="1.html">１</a><span>|</span> <a href="2.html">２</a><span>|</span> <a href="3.html">３</a> </div> </div> <div id="menu4" onmouseover="MenuOn(4)" onmouseout="MenuOff(4)"> <a href="cate04.html" class="menuhead">メニュー４</a> <div class="submenu" id="submenu4"> <a href="1.html">１</a><span>|</span> <a href="2.html">２</a><span>|</span> <a href="3.html">３</a> </div> </div> </div>
＜a href="--.html"＞〜＜/a＞内は任意で
ＵＲＬの指定とメニューを決めて下さい。

CSSに追加
/* プルダウンメニュー */ div.menu { font-size: 12px; background: #cccccc; height: 2em; text-align:center; position:relative; top:0; left:0; } div.menu a{ color:#ffffff; text-decoration: none; display: block; line-height: 2em; width: 100px; } div.menu a:hover{ color:#ffffff; background: #666666; text-decoration: none; } div.menu a:visited{ color:#ffffff; text-decoration:none; } div.submenu a{ background-color: #cccccc; border-top: 1px solid #ffffff; } #menu1{ position:absolute; top:0; left:0; } #menu2{ position:absolute; top:0; left:101px; } #menu3{ position:absolute; top:0; left:202px; } #menu4{ position:absolute; top:0; left:303px; } div.menu span{ display:none; } div.submenu { visibility: hidden; position: absolute; left: 0px; }
ココでは横幅100で設定していますが、
好きな幅に変えることは可能です。
但し、各メニューのleftも全て変えて
いく必要があります。

ここではメニューは４つですが、
ＨＴＭＬとＣＳＳ両方を増やして設定する
こともできます。
自分で使いやすいようにカスタマイズ
して下さい。

---

このような記事は大変参考になります。
私も、教えられるようになりたいです。。。

（追記）何だかうまくいかないです。あれれ？
というか、私がやりたかったのは「プルダウン」はなく
「ナビゲーションの折りたたみ」でした。あいたたた･･･

この記事はどなたかの役に立つかもしれないので
残しておきます。

1. [便利]アフィリエイトカスタマイズ|
2. トラックバック：0|
3. コメント：3｜
4. 人気ブログ順位
5. |up↑|

記事に取り上げて頂き、有難うございました。
折りたたみも私のブログに組み込んでますけど
相当重くなるし、タグの書き換えなどはかなり
面倒ですね。
次にリニュするなら、もうやりたくない気すら
しています（¨；

1. 2005/05/28(土) 12:07:20 |
2. |
3. ダメ子＠ayase
4. [ 編集]

*** ダメ子さん
検索して調べてみたんですけど
本当に大変そうなカスタマイズですよね。
「相当重くなる」となると
これ以上、このブログを重くするわけにもいかないので
やっぱり保留かなぁ。

1. 2005/05/28(土) 20:32:07 |
2. |
3. キティ＠管理人
4. [ 編集]

今までドリームウェーバーのポップアップメニューを使用して作成していたのですが、背景の設定やhover時のアンダーライン表示など細かな作業が出来ないのでCSSに乗り換えました。大変分かりやすい説明で良かったです。ありがとうございました。

1. 2007/01/18(木) 13:27:58 |
2. |
3. ひでひで
4. [ 編集]