RE:スクリプト無しで実装する、タブが重なり合うナビゲーション

タブが重なり合うナビゲーション

コリスさんというブログで「スクリプト無しで実装する、タブが重なり合うナビゲーション」っていう紹介記事があった。
ちなみに紹介先はコチラ→henryhoffman.com

なんか"span"がもっさり

「へぇ～」と思ってみてたんだけど、なんか"span"が二重になってて、"class"がポコポコ貼り付いてるんで、どーにも落ち着かない。
なので、"span"を使わない方法を考えてみた。

ゼロにはできませんでした。。。

[選択済みなし]

[選択済みあり]

けっこー考えたんだけど、やっぱ IE6以下が "a"タグの":hover" にしか反応してくれないので、"span"を一個使っちゃいました。残念です。
一応、下記のブラウザで正常に表示されるのは確認しました。 (IE5.5/IE6/IE7/IE8bata1/Firefox2/Safari3.1/Opera9.26)

ソースコード

汚いですが、CSSコードとHTMLコードです。
肝は ":hover" 擬似クラスに定義してある "border: 0;" です。
これがないとIEで ":hover" による "z-index" の値が反映されません。

[CSS]

.tab-menu {
	display: inline-block;
	list-style-type: none;
	height: 32px;
	margin:0 0 0 20px;
	paddin:0;
	font-size: 12px;
}
html[xmlns] .tab-menu {
	display: block;
	padding: 0;
}
* html .tab-menu {
	height: 1%;
}
.tab-menu:after {
	display: block;
	visibility: hidden;
	height: 0;
	content: ".";
	clear: both;
}

.tab-menu li {
	float: left;
	height: 32px;
	margin:0 0 0 -20px;
	padding:0;
}
.tab-menu a {
	cursor: hand;
	display: inline-block;
	height: 32px;
	outline: none;
	padding-right: 31px;
	color: #555555;
	text-decoration: none;
	background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_right_off.gif);
	background-repeat: no-repeat;
	background-position: right top;
	position: relative;
	z-index: 0;
}
html[xmlns] .tab-menu a {
	display: block;
}

.tab-menu a span {
	display: inline-block;
	height: 32px;
	line-height: 32px;
	padding: 0 1em;
	background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_back_off.gif);
	background-repeat: no-repeat;
	background-position: left top;
	white-space: nowrap;
	position: relative;
	z-index: 0;
}
html[xmlns] .tab-menu a span {
	display: block;
}

.tab-menu a.active {
	color: #FFFFFF;
	background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_right_on.gif);
	z-index: 500;
}
.tab-menu a.active span {
	background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_back_on.gif);
	z-index: 500;
}

.tab-menu a:hover {
	color: #FFFFFF;
	background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_right_on.gif);
	border: 0;
	height: 32px;
	z-index: 1000;
}

.tab-menu a:hover span {
	background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_back_on.gif);
	border: 0;
	z-index: 1000;
}

[HTML]

<!-- 選択済みなし -->
<ul class="tab-menu">
	<li><a href="#"><span>メニュー</span></a></li>
	<li><a href="#"><span>なが～いメニューです</span></a></li>
	<li><a href="#"><span>Menu</span></a></li>
	<li><a href="#"><span>メニュー</span></a></li>
</ul>

<!-- 選択済みあり -->
<ul class="tab-menu">
	<li><a href="#"><span>メニュー</span></a></li>
	<li><a href="#" class="active"><span>なが～いメニューです</span></a></li>
	<li><a href="#"><span>Menu</span></a></li>
	<li><a href="#"><span>メニュー</span></a></li>
</ul>

まとめ

直感では"span"全部消せる！と思ったんだけど、気のせいでした。
やっぱ、1つの要素に複数の背景を指定できる機能(Safari3.xにはあるらしい)がないと、"span"使わざるを得ないよね(？)。

--
絶対、もっといい方法があるはず

About this entry

Title

RE:スクリプト無しで実装する、タブが重なり合うナビゲーション

Archive type

Individual archive

Published

2008/04/10 16:25

Xlune::Blog