FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

縦メニューの階層化

先日は縦メニューの設置方法を紹介しました。
今回はこの縦メニューを階層化する方法を紹介します。

HTMLを編集します。
第２階層は赤い部分、第３階層はオレンジ部分のようにしてください。

<div id="menu_length">
<ul>
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ１</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ２</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ３</a></li>

<li class="menu_len" onmouseover="this.className='menu_len_on'" onmouseout="this.className='menu_len'"><a href="#">第１階層</a>
<ul>
<li><a href="#">第２階層</a></li>
<li><a href="#">第２階層</a></li>
<li><a href="#">第２階層</a></li>
<li class="menu_len" onmouseover="this.className='menu_len_on'" onmouseout="this.className='menu_len'"><a href="#">第２階層</a>
<ul>
<li><a href="#">第３階層</a></li>
<li><a href="#">第３階層</a></li>
<li><a href="#">第３階層</a></li>
</ul>
</li>
</ul>
</li>

</ul>
</div>

そしてスタイルシートの末尾に以下を加えてください。
既に縦メニューを設置している場合は赤い部分を加えてください。

/* ▼ 縦メニュー ▼ */

#menu_length ul {
margin:0;
padding:0;
}

#menu_length li {
list-style: none;
margin:0;
padding:0;
}

#menu_length li a {
display:block;
text-align:left;
padding-left: 20px;
text-decoration:none;
width:150px; /* 幅 */
line-height:30px; /* 高さ */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
border-left:10px solid #c0c0c0; /* 左飾り線 */
border-bottom:1px solid #333333; /* 下線 */
}

/* ▽マウスが乗ったとき▽ */
#menu_length li a:hover{
background-color:#222222; /* メニューボタンの背景 */
border-left:10px solid #ff0000; /* 左飾り線 */
}
/* △マウスが乗ったとき△ */

/* ▲ 縦メニュー ▲ */

/* ▼ 縦メニュー（階層化）▼ */

#menu_length {
height: 300px; /* メニュー全体の縦の長さ */
}

#menu_length ul {
position:absolute;
}

#menu_length li {
position:relative;
}

#menu_length li.menu_len ul,
#menu_length li.menu_len ul li.menu_len ul,
#menu_length li.menu_len_on ul li.menu_len ul {
display:none;
}

#menu_length li.menu_len_on ul,
#menu_length li.menu_len_on ul li.menu_len_on ul {
position:absolute;
display:block;
top:0;
left:100%;
}

/* ▽IE6バグ対応▽ */
* html #menu_length li li,
* html #menu_length li li li {
font-size:1px;
line-height:0;
}
* html #menu_length li li a,
* html #menu_length li li li a {
display:block;
font-size:10pt;
line-height:30px;
}
/* △IE6バグ対応△ */

/* ドロップダウンリストの透過（IEは透過しません） */
#menu_length > ul > li > ul {
-moz-opacity: 0.9;
opacity: 0.9;
}

/* ▲縦メニュー（階層化）▲ */

これで縦メニューを階層化できます。
縦メニューを階層化するとメニュー全体の縦の長さを設定する必要があります。適当な数値を設定してください。

【2009/12/08 追記】IEではドロップダウンリストは透過しませんが、「第３階層を使わない」という条件で第２階層を透過することができます。スタイルシートに赤い一行を加えてください。

/* ドロップダウンリストの透過（IEは透過しません） */
#menu_length > ul > li > ul {
-moz-opacity: 0.9;
opacity: 0.9;
filter:alpha(opacity=90); /* IEで第２階層のみならば透過 */
}

関連記事

[ 2009/12/06 23:16 ] カスタマイズ共通カスタマイズ | TB(0) | CM(26)

≪ 横カレンダーに背景画像を表示 | HOME | 縦メニューの設置 ≫

[ 7310 ]

いつもお仕事がお早いですね！
参考にさせていただきます。

[ 2009/12/06 23:20 ] [ 編集 ]

[ 7313 ] > tipslabさん

どうぞ参考にしてください。カテゴリを親子関係にしたときはこの階層化の記事がきっと役に立ちますよ＾＾

[ 2009/12/06 23:30 ] [ 編集 ]

[ 7314 ] やはり

おはようございます。
まってました！ですが、

/* ▼ 縦メニュー（階層化）▼ */
　　　　　　～
/* ▲縦メニュー（階層化）▲ */
をいれると、tableタグの中に上手く収まらなくなりますが、なにか良い方法はありますでしょうか？
ブログのアドレスもいれておきます。
もしくは、table使わずにタイトルの横に置く方法があるようでしたら教えてください。

[ 2009/12/07 08:07 ] [ 編集 ]

[ 7316 ] それから

line-height と透過が上手く作動しないようですが？

[ 2009/12/07 11:11 ] [ 編集 ]

[ 7319 ] > さくらいさん

Firefoxだと問題ないのですが、IEだと変ですね。私も一応Windows環境を持っているのですが、スペックが低すぎて動かないためにIEの確認はほとんどしていません＾＾；

スタイルシートの末尾にこれを設定してみてください。

#menu_length {
width: 150px;
}

これでもtableに上手く収まらないようであれば、縦メニューが収まっているtdに幅を設定してみてください。

第２階層が第１階層よりも高さが多く見えるのはline-heightのせいではなく、第２階層にpaddingを設定しているためだと思います。これを削除してみてください。

透過が上手くいかないのはまだ解らないので調べてみます。

[ 2009/12/08 01:33 ] [ 編集 ]

[ 7323 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/12/08 12:17 ] [ 編集 ]

[ 7324 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/12/08 14:18 ] [ 編集 ]

[ 7415 ] 後は、右に寄らない

はい、コメントまでいただきありがとうございました。
返事が遅くなってすいませんでした。

で、TABLE は諦めました。スタイルシートにしました。
それで画像はくっつきましたが、縦メニューがIEのみ左に寄りません。
何かお知恵をお借りしたいのですが。

[ 2009/12/14 11:27 ] [ 編集 ]

[ 7424 ] > sakuraiさん

私のIE環境は貧弱なので、sakuraiさんのサイトを開くとフリーズしてしまいました__;

IEで確認できないので自信はないのですが、スタイルシートの末尾にこれを加えてみてはどうでしょうか。

#menu_length {
left:0;
}

うまくいかなければ申しわけありませんがFC2ユーザーフォーラムに聞いたほうが早いと思います＾＾；

[ 2009/12/14 22:41 ] [ 編集 ]

[ 7431 ] はい

解りました。
縦メニューは当分休憩します。

[ 2009/12/15 15:58 ] [ 編集 ]

[ 7436 ] > sakuraiさん

お役に立てず申しわけありません。
いつかどんなサイト表示にも耐えるIE環境を用意しようと思います＾＾；

[ 2009/12/15 23:59 ] [ 編集 ]

[ 8434 ] 第1階層のクリック時の動作

第2階層まで使用の透過使用で使わさせて頂いています。

デフォルトでは第1階層をクリックするとサイトの一番上に行くのですが、クリックしても何も起こらないようにするにはどのようにすればいいでしょうか？

それと、第1階層、第2階層ともに記事数を表示したいのですが可能でしょうか？

[ 2010/02/16 17:07 ] [ 編集 ]

[ 8436 ] 補足です。

少し抜けていた箇所があったので補足します。

＞それと、第1階層、第2階層ともに記事数を表示したいのですが可能でしょうか？
この縦メニューをブログのプラグインにカテゴリとして使っています。
一つ一つリンクを設定し作成したのですが、カテゴリごとの記事数を表示しようと思いました。

と、このコメントを書いている途中に「メニューバーのドロップダウンにカテゴリを表示」という記事を見つけました。まさにこのブログのメニューバーのカテゴリのようにしたいのです。
縦メニューバーにカテゴリを設置することは可能でしょうか？

[ 2010/02/16 21:25 ] [ 編集 ]

[ 8507 ]

＞8434
＞8436について

自己解決いたしました。

[ 2010/02/21 10:47 ] [ 編集 ]

[ 8524 ] マウスオーバーでテキストを変える方法

第1階層、第2階層ともにマウスオーバーでテキストを変えることは可能でしょうか？
可能でしたらご教授お願いします。

[ 2010/02/22 19:51 ] [ 編集 ]

[ 8528 ] [ 8524 ]はつさんへ

「マウスオーバーでフォント・テキストを変える」
でググってみてください。参考になるサイトが色々あります。

[ 2010/02/22 23:13 ] [ 編集 ]

[ 8531 ] [ 8524 ]はつさんへ

<span onmouseover="this.innerText='マウスオーバー時'" onmouseout="this.innerText='マウスオフ時'">最初に表示</span>
で、私のところでは動いてます。
たぶん最初は'マウスオフ時'と「最初に表示」は同じ言葉がよいと思います。

[ 2010/02/23 07:10 ] [ 編集 ]

[ 8534 ]

＞sakuraiさん
ご回答ありがとうございます。

この記事で言うとどの位置に挿入すればよろしいでしょうか？

[ 2010/02/23 11:27 ] [ 編集 ]

[ 8535 ] [ 8534 ]はつさんへ

<a href="#"><span onmouseover="this.innerText='マウスオーバー時'" onmouseout="this.innerText='マウスオフ時'">最初に表示</span></a>
で、良いと思います。

[ 2010/02/23 12:14 ] [ 編集 ]

[ 8537 ]

＞sakuraiさん
ご回答ありがとうございます。

仰る通りに挿入したのですが、マウスオフ時、マウスオーバー時共「最初に表示」になります。
どこか間違っている箇所がありましたらご指摘お願いします。

[ 2010/02/23 12:47 ] [ 編集 ]

[ 8538 ] [ 8537 ]はつさんへ

http://kowaza.boo.jp/06mouse/onm-01font.html
あたりが参考になると思いますが…
後は、はつさんのブログを見て見ないと解りません。

[ 2010/02/23 13:15 ] [ 編集 ]

[ 8539 ]

＞sakuraiさん
ご回答ありがとうございます。

当方の環境はFirefoxなのですが、IEでは表示されましたが、Firefoxでは正常に表示されませんでした。
Firefox環境での方法を検索してみたのですが、私の力では見つけることができませんでした。
どなたかお分かりになられる方いましたら、ご教授お願いします。

[ 2010/02/23 14:38 ] [ 編集 ]

[ 8540 ] [ 8539 ]　はつさんへ

私のところのfirefoxでも動きませんでした(^_^;)
で、ググったら
何でもfirefoxだとinnerTextの部分をinnerHTMLに変える必要があるらしいです。
これで私のところでは動いてます。
はつさんのところでも動くことを祈ってます。

ところで、私が紹介してるのは、文字にマウスオーバー時ですので、もしかしてはつさんが思ってるのと動作が違うかも知れません。

[ 2010/02/23 15:01 ] [ 編集 ]

[ 8541 ]

＞sakuraiさん
ご回答ありがとうございます。

innerTextをinnerHTMLに変えると正常に動作しました！！
が、お察しの通り文字ではなくメニューバーの「ボックス？」でマウスオーバー時に動作する方法はないでしょうか？

[ 2010/02/23 15:49 ] [ 編集 ]

[ 8550 ]

いろいろ調べた結果したのようなものを見つけました。

<html>

<head>

<title>マウスが重なったら文字のスタイルを変える</title>

<script Language="JavaScript"></script>

</head>

<body bgcolor="white">

<a href="#" id="myText" onMouseover="change(this,'Hello World !!')" onMouseout="change(this,' マウスを乗せて')">マウスを乗せて</a>

</body>

</html>

この方法で私の思うようにできたのですが、
やり方として間違っていないか、おかしな所はないかご教示お願いします。

[ 2010/02/25 21:17 ] [ 編集 ]

[ 8568 ]

検索して調べた結果↓ような方法を見つけました！

<a href="#" id="myText" onmouseover="this.innerHTML='Hello World !!'" onmouseout="this.innerHTML='マウスを乗せて'">マウスを乗せて</a>

この方法でなにか問題等ないでしょうか？
お分かりになられる方ご教授お願いします。

[ 2010/02/28 10:17 ] [ 編集 ]

コメントの投稿