CSSで入れ子のドロップダウンメニュー

CSS(とJS)でシンプルなドロップダウンメニュー - 2ではシンプルな構造のメニューを前提にしていましたが、入れ子が存在する場合どの程度複雑になるのか試してみました。

今回はCSSだけで作っています。検証はFirefox1.5、Safari2、Opera8.5で行いました。
取りあえずHTMLはこんな感じ。

htmlのサンプル


<div id="items">
<h3>items</h3>
<ul id="foo">
	<li>Alpha</li>
	<li>Alpha</li>
	<li>Alpha</li>
	<li class="bar">Alpha!
		<ul>
			<li>Bravo</li>
			<li>Bravo</li>
			<li class="bar">Bravo!
				<ul>
					<li>Charlie</li>
					<li class="bar">Charlie!
						<ul>
							<li>Delta</li>
							<li>Delta</li>
							<li class="bar">Delta!
								<ul>
									<li>Echo</li>
									<li class="bar">Echo!
										<ul>
											<li>Foxtrot</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>Charlie</li>
					<li>Charlie</li>
				</ul>
			</li>
			<li>Bravo</li>
			<li>Bravo</li>
		</ul>
	</li>
	<li>Alpha</li>
	<li>Alpha</li>
	<li>Alpha</li>
	<li class="bar">Alpha!
		<ul>
			<li>Bravo</li>
			<li>Bravo</li>
			<li>Bravo</li>
			<li>Bravo</li>
			<li>Bravo</li>
		</ul>
	</li>
	<li>Alpha</li>
</ul>
</div>
<p>Alpha Bravo Charlie Delta Echo Foxtrot</p>

試しなので長めのメニューにしています。
メニューを構成するタグの要素は何でも良いですが、Javascriptで操作する場合divだけで作ったりすると面倒になりそうです。
次はCSSです。

CSSのサンプル


#items
	{
	width: 80px;
	}
h3
	{
	margin: 0;
	padding: 0;
	}
h3:hover
	{
	background: #ccc;
	}
ul
	{
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid #000;
	}
li
	{
	list-style: none;
	margin: 0;
	padding: 3px 5px;
	}
li:hover
	{
	background: #ccc;
	}
#foo
	{
	display: none;
	width: 80px;
	position: absolute;
	margin: 0;
	}
#items:hover #foo
	{
	display: block;
	}
.bar ul{
	display: none;
	position: absolute;
	width: 80px;
	margin: -1em 0 0 30px;
	}
.bar:hover > ul{
	display: block;
	}

ドロップダウンメニューのサンプル

以上のHTMLとCSSの組み合わせで次の様なメニューになります。

items

  • Alpha
  • Alpha
  • Alpha
  • Alpha!
    • Bravo
    • Bravo
    • Bravo!
      • Charlie
      • Charlie!
        • Delta
        • Delta
        • Delta!
          • Echo
          • Echo!
            • Foxtrot
      • Charlie
      • Charlie
    • Bravo
    • Bravo
  • Alpha
  • Alpha
  • Alpha
  • Alpha!
    • Bravo
    • Bravo
    • Bravo
    • Bravo
    • Bravo
  • Alpha

これで"Alpha,Bravo…Zulu"どころか際限なく入れ子に出来ます。
CSSの最後の部分にある

#items .bar:hover > ul
で「barの直接の子のul」を指定しています。これが無いと一斉にメニューが開いてしまいます。解釈としては間違ってると思うのですがSafariだと>が無くても目的に沿った挙動をしました。
CSSだけで作っているのでIEでは動きません。 IE7にかなり期待していたのですが…対応していないのかベータ故か機能しませんでした。

Javascriptで処理すると…

今回は割愛しましたが、 javascriptで処理する場合は入れ子メニューの親に当たるliとh3にonmouseover/outイベントを設定。
getElementsByTagNameを使って、最初に出現するul要素のdisplayを切り替える処理を作ります。

CSS(とJS)でシンプルなドロップダウンメニュー - 2ではIE用にdisplaypositionをJavascriptで書き出せば何とかなると書いていましたが、階層構造の無いメニューならともかく、入れ子リストのメニューでコレをやると、Javascript無効、CSS有効のIEで表示した場合、レイアウトへの影響甚大です。
比較的影響の少ないページの最下部にメニューを記述し、CSSで使い易い位置に配置し直すか、最悪、サイトマップへのリンクを表示してお茶を濁す方がマシかも知れません。
それと、この手のメニューは縦のサイズに気を使わないと解像度によってはとんでもなく使い難そうですね…


コメント
コメントする








   
この記事のトラックバックURL
トラックバック
入れ子のポップアップメニューを実現する。windowsのメニュー風のポップアップメニューを作ってみる。
  • Eblog
  • 2006/12/13 3:49 PM

selected entries

categories

archives

recent comment

recent trackback

links

profile

search this site.

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM