CSSだけで折り畳みメニュー

Tuesday, Jul 11, 2006 - 01:33 +09:00

短期の案件で作る機会があったので、晒してみます。
もともとテスト用にサクっと作ったものなので、細部は粗いです。あしからず。

作っといてなんですが、折り畳みメニューはユーザビリティ低いです。ちゃんと選択するのは、マウスの扱いに慣れた人でないと意外と難しい。嘘みたいですが本当です。卒論でユーザテストまでやった俺が言うんだから、間違いない（ぉ

はい、前置き終わり。それでも「俺は俺の道を行くぜっ」てな剛毅な方々は、続きをどうぞ。食わず嫌いも良くないしっ

HTML

まぁ、普通サイズ。

<!-- navigation -->
<div id="navigation">
  <ul>
  <li id="n1"><a href="./">HOME</a></li>
  <li id="n2"><a href="./service/research.html" onmouseover="openMenu('fm1');return false;" onclick="closeMenu('fm1');return false;" onmouseout="closeMenu('fm1');return false;">サービス概要</a>
    <ul id="fm1" onmouseover="openMenu('fm1');return false;" onmouseout="closeMenu('fm1');return false;">
    <li><a href="./service/research.html">マーケティングリサーチ</a></li>
    <li><a href="./service/promotion.html">セールスプロモーション</a></li>
    <li><a href="./service/sport.html">スポーツ事業</a></li>
    <li><a href="./service/stuff.html">人材派遣</a></li>
    <li><a href="./service/video.html">映像制作</a></li>
    <li><a href="./service/goods.html">商品販売</a></li>
    </ul>
  </li>
  <li id="n3"><a href="./about.html">会社概要</a></li>
  <li id="n4"><a href="./policy.html">プライバシーポリシー</a></li>
  <li id="n5"><a href="./inquiry.html">お問い合せ</a></li>
  <li id="n6"><a href="./sitemap.html">サイトマップ</a></li>
  </ul>
</div>

2006年07月11日、onclickを削除。これでこの部分のリンク有効となる。

JS

ちょ～短い。5分で書いたテキトーコード。

function openMenu(a) {
	document.getElementById(a).style.display = 'block';
}
function closeMenu(a) {
	document.getElementById(a).style.display = 'none';
}

CSS

はい、本番。覚悟はOK？

/* navigation
-------------------------------------------------------------- */

#navigation {
	position: relative;
	z-index: 5;
	width: 766px;
	height: 40px;

	background: #fff url(../img/bg_navigation.gif) no-repeat top center;
}
#navigation ul {
	list-style-type: none;
}
#navigation li {
	position: absolute;
	top: 2px;
}
#navigation a {
	display: block;
	width: 123px;
	height: 36px;
	
	background: transparent url() no-repeat top right;
	text-indent: -12300px;
}
* html #navigation a {
	position: absolute; /* for IE-win */
}


/* --- hover --- */

#n1 a { width: 124px; }
#n6 a { width: 125px; }

#n1 { left: 5px;}
#n2 { left: 132px;}
#n3 { left: 258px;}
#n4 { left: 384px;}
#n5 { left: 510px;}
#n6 { left: 636px;}

#n1 a { background-image: url(../img/bg_n1.jpg); }
#n2 a { background-image: url(../img/bg_n2.jpg); }
#n3 a { background-image: url(../img/bg_n3.jpg); }
#n4 a { background-image: url(../img/bg_n4.jpg); }
#n5 a { background-image: url(../img/bg_n5.jpg); }
#n6 a { background-image: url(../img/bg_n6.jpg); }

#navigation a:hover,
.home #n1 a,
.service #n2 a {
	background: none !important;
}


/* --- foldingMenu --- */

#navigation li ul {
	display: none;
	position: absolute;
	top: 36px;
	left: 0px;
	width: 200px;
	
	/* 半透明画像を使用する指定（モダンブラウザ用） */
	background: transparent url(../img/transparent.png) repeat center !important;
	/* 半透明画像を使用する指定（IE用） */
	background: none;
}

#navigation li li {
	position: static;
	border: 1px solid #999;
	border-width: 0 0 1px 1px;
	padding: 0;
	margin: 0;
}
#navigation li ul a {
	position: static;
	width: auto !important;
	width: 200px; /* for IE */
	height: auto;
	border-right: 1px solid #ccc;
	padding: 2px 5px 2px 15px;
	margin: 0;
	
	color: #333;
	text-align: left;
	text-indent: 0;
	text-decoration: none;
	font-weight: bold;

	/* 半透明画像を使用する指定（IE用） ※絶対パスで指定しなければならない */
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://aaa.com/img/transparent.png", sizingMethod="scale");
}
#navigation li ul a:hover {
	color: #fff;
	background-color: #546a2e !important;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="false");
}



#navigation li:hover ul,
#navigation li ul:hover {
	display: block; 
}

備考

あ、ちなみに。
元は背景画像を利用したナビゲーションなんで、コピペしただけだと真っ白ですよ～、と。使いたい人は該当部分をカスタムしましょ？ もっとちゃんとしたものが作りたい人は、このへんを参考にすると良いでしょう。

posted in HTML/CSS Trackback (0)

Trackback

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

« Previous Entry - Next Entry »