CSSでナビゲーション（一枚絵）

Wednesday, Oct 12, 2005 - 01:28 +09:00

CSS背景切り替えのサンプルとして動作検証終わったので、晒してみます。

上記で確認済み。ただしIE-win 5.0では:hoverで切り替わりません。あと少し長いので、もう少し最適化したいですね。とはいえ、CSSを使ったナビゲーションでここまでクロス・ブラウザにできたのは、個人的には大満足です。

HTML

<ul id="navi">
<li id="home">     <a href="./" class="active">Home</a></li>
<li id="portfolio"><a href="./">Portfolio</a></li>
<li id="articles"> <a href="./">Articles</a></li>
<li id="examples"> <a href="./">Examples</a></li>
<li id="also">     <a href="./">Also</a></li>
<li id="bbs">      <a href="./">bbs</a></li>
</ul>

CSS

/* --- navi --- */

#navi {
	background: transparent url(/img/menu_back.gif) no-repeat top right;
	padding: 0 0 0 8px;
	height: 42px;
}
#navi li {
	float: left;
	list-style-type: none;
	padding: 8px 3px 0 0;

	width: 95px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 92px;
}
html>body #navi li {
	width: 92px;
}

#navi li a {
	background: url(/img/tab_back.gif);
	text-decoration: none;
 
	display: block;
	width: 92px;
	height: 25px;
	text-indent: -20000px;
	/*\*/position: absolute;/**/
}
 
 
/* --- タブ・メニューのhover処理 --- */

#home a      { background-position: 0 0; }
#portfolio a { background-position: -99px 0; }
#articles a  { background-position: -192px 0; }
#examples a  { background-position: -286px 0; }
#also a      { background-position: -380px 0; }
#bbs a       { background-position: -474px 0; }
 
#home a.active, #home a:hover           { background-position: 0 -26px; }
#portfolio a.active, #portfolio a:hover { background-position: -99px -26px; }
#articles a.active, #articles a:hover   { background-position: -192px -26px; }
#examples a.active, #examples a:hover   { background-position: -286px -26px; }
#also a.active, #also a:hover           { background-position: -380px -26px; }
#bbs a.active, #bbs a:hover             { background-position: -474px -26px; }

Note

テキスト・リンクをCSSで画像に置き換えるナビゲーション。hover時の画像切り替えあり。ナビゲーション画像は管理優先の一枚絵。li.activeは「you are here」効果用。

仕事で作ったものを名前だけ置き換えたモノ。なので細かいところは調整されたし。

posted in HTML/CSS Trackback (0)

Trackback

このエントリーのトラックバックURL
http://rospear.info/other/mt-tb.cgi/80

« Previous Entry - Next Entry »