サイドメニューのプルダウンメニューを作ってみた

最近作ったサイトでサイドメニューで子メニューをドロップダウンで表示するものを作ってみた。
ドロップダウンで表示するメニューはグローバルメニューでは良くあるのだが、今回はサイドメニューで作りたかった。
JavaScriptは出来るだけ使わないでCSSだけで作ってみました。

サンプルページはこちら 実際に設置したサイトはこちら→コミュニケーションツールでコミュニケーションを企画する?ちよだ
ファイルのダウンロードはこちら→menu.zip

XHTMLはこんな感じ

<div id="sidebar-left">
	<div class="menu">
	<div class="title">●Menu●</div>
	<ul id="left-menu">
		<li class="pnk" onmouseover="this.className='pnk1'" onmouseout="this.className='pnk'"><a href="#">会社案内</a>
			<ul class="sub">
				<li><a href="#">経営理念・概要・沿革</a></li>
				<li><a href="#">アクセスマップ</a></li>
				<li><a href="#">お問い合わせ</a></li>
				<li><a href="#">サンプル・資料請求</a></li>
				<li><a href="#">採用情報</a></li>
				<li><a href="#">スタッフ紹介</a></li>
				<li><a href="#">特定商取引に関する記述</a></li>
				<li><a href="#">個人情報保護方針</a></li>
			</ul>
		</li>
		<li class="orang" onmouseover="this.className='orang1'" onmouseout="this.className='orang'"><a href="#">商業ツール</a>
			<ul class="sub">
			<li><a href="#">はがき</a></li>
			<li><a href="#">インプレッション名刺</a></li>
			</ul>
		</li>
		<li class="gren" onmouseover="this.className='gren1'" onmouseout="this.className='gren'"><a href="#">コミュニケーション</a>
			<ul class="sub">
				<li><a href="#">出版</a></li>
				<li><a href="#">心の心髄</a></li>
				<li><a href="#">心理劇</a></li>
			</ul>
		</li>
		<li class="yelow" onmouseover="this.className='yelow1'" onmouseout="this.className='yelow'"><a href="#">社長ブログ</a></li>
		<li class="yelow" onmouseover="this.className='yelow1'" onmouseout="this.className='yelow'"><a href="#">スタッフブログ</a></li>
		<li class="blu" onmouseover="this.className='blu1'" onmouseout="this.className='blu'"><a href="#">ちよだのチャレンジ</a></li>
		<li class="blu" onmouseover="this.className='blu1'" onmouseout="this.className='blu'"><a href="#">お客様の声</a></li>
		<li class="blu" onmouseover="this.className='blu1'" onmouseout="this.className='blu'"><a href="#">リンク</a></li>
	</ul>

	</div>
</div>

CSSはこれ

/* サイドメニュー全体の設定 */
div#sidebar-left {
	float: left;
	margin-left: 20px;
	width: 185px;
}
/*サイドメニューのタイトルの部分の設定*/
div#sidebar-left div.menu div.title{
	width:172px;
	height: 37px;
	border: 1px solid #ccc;
	line-height: 37px;
	text-align: center;
	background: url(images/side-menu/gray.jpg);
}
/*メニュー本体部分の設定*/
div#sidebar-left ul#left-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
/*メニューのリストの設定*/
ul#left-menu li {
	display: block;
	width:172px;
	height: 37px;
	border: 1px solid #ccc;
	line-height: 37px;
	text-align: left;
	margin: 0;
	padding: 0;
}

/*リストのリンクの設定*/
ul#left-menu li a {
	font-size: 14px;
	color: #000;
	display: block;
	text-align: left;
	text-decoration: none;
	width: 162px;
	_width:172px;
	padding-left: 10px;
}

/*子メニューのulの設定*/
ul#left-menu ul.sub{
	position: relative;
	left: 50px;
	margin: 0;
	padding: 0;
}
/*子メニューのliの設定*/
ul#left-menu ul.sub li{
	display: block;
	width: 162px;
	height: 27px;
	background: url(images/side-menu/gray-s.jpg);
	padding: 0;
	margin: 0;
	line-height: 0;
}

/*子メニューのリンクの設定*/
ul#left-menu ul.sub li a {
	color: #000;
	font-size: 12px;
	font-weight: normal;
	width: 152px;
	_width: 162px;
	height: 27px;
	padding-left: 10px;
	background: url(images/side-menu/gray-s.jpg);
	line-height: 27px;
}

ul#left-menu ul.sub li a:hover {
	color: #000;
}

/*子メニューの初期値では表示しない*/
ul#left-menu li.pnk ul,
ul#left-menu li.orang ul,
ul#left-menu li.yelow ul,
ul#left-menu li.gren ul,
ul#left-menu li.blu ul{
	display: none;
}

ul#left-menu li.pnk1 ul,
ul#left-menu li.orang1 ul,
ul#left-menu li.yelow1 ul,
ul#left-menu li.gren1 ul,
ul#left-menu li.blu1 ul{
	display: block;
}


/*親メニューのデフォルトの設定*/
ul#left-menu li.pnk {
	background: url(images/side-menu/pink.jpg) no-repeat;
}
ul#left-menu li.gren{
	background: url(images/side-menu/green.jpg) no-repeat;
}
ul#left-menu li.yelow{
	background: url(images/side-menu/yellow.jpg) no-repeat;
}
ul#left-menu li.orang{
	background: url(images/side-menu/orange.jpg) no-repeat;
}
ul#left-menu li.blu{
	background: url(images/side-menu/bule.jpg) no-repeat;
}

/*親メニューのa要素の設定*/
ul#left-menu li.pnk1 a{
	background: url(images/side-menu/pink.jpg) no-repeat;
}
ul#left-menu li.gren1 a{
	background: url(images/side-menu/green.jpg) no-repeat;
}
ul#left-menu li.yelow1 a{
	background: url(images/side-menu/yellow.jpg) no-repeat;
}
ul#left-menu li.orang1 a{
	background: url(images/side-menu/orange.jpg) no-repeat;
}
ul#left-menu li.blu1 a{
	background: url(images/side-menu/blue.jpg) no-repeat;
}


/*親メニューのリンクの設定*/
ul#left-menu li.blu a:link{
	background: url(images/side-menu/blue.jpg) no-repeat;
}
ul#left-menu li.pnk a:link{
	background: url(images/side-menu/pink.jpg) no-repeat;
}
ul#left-menu li.gren a:link{
	background: url(images/side-menu/green.jpg) no-repeat;
}
ul#left-menu li.yelow a:link{
	background: url(images/side-menu/yellow.jpg) no-repeat;
}
ul#left-menu li.orang a:link{
	background: url(images/side-menu/orange.jpg) no-repeat;
}
ul#left-menu li.blu a:link{
	background: url(images/side-menu/blue.jpg) no-repeat;
}


/*親メニューのマウスホバーの設定*/
ul#left-menu li.pnk1 a:hover{
	background: url(images/side-menu/pink1.jpg) no-repeat;
}
ul#left-menu li.gren1 a:hover{
	background: url(images/side-menu/green1.jpg) no-repeat;
}
ul#left-menu li.yelow1 a:hover{
	background: url(images/side-menu/yellow1.jpg) no-repeat;
}
ul#left-menu li.orang1 a:hover{
	background: url(images/side-menu/orange1.jpg) no-repeat;
}
ul#left-menu li.blu1 a:hover{
	background: url(images/side-menu/blue1.jpg) no-repeat;
}


/*子メニューのマウスホバーの設定*/
ul#left-menu li.pnk1 ul.sub li a:hover{
	background: url(images/side-menu/pink-s.jpg) no-repeat;
}
ul#left-menu li.gren1 ul.sub li a:hover{
	background: url(images/side-menu/green-s.jpg) no-repeat;
}
ul#left-menu li.orang1 ul.sub li a:hover{
	background: url(images/side-menu/orange-s.jpg) no-repeat;
}

/*親メニューのvisitedの設定*/
ul#left-menu li.blu a:visited{
	background: url(images/side-menu/blue.jpg) no-repeat;
}
ul#left-menu li.pnk a:visited{
	background: url(images/side-menu/pink.jpg) no-repeat;
}
ul#left-menu li.gren a:visited{
	background: url(images/side-menu/green.jpg) no-repeat;
}
ul#left-menu li.yelow a:visited{
	background: url(images/side-menu/yellow.jpg) no-repeat;
}
ul#left-menu li.orang a:visited{
	background: url(images/side-menu/orange.jpg) no-repeat;
}
ul#left-menu li.blu a:visited{
	background: url(images/side-menu/blue.jpg) no-repeat;
}

こんなのを作ってみましたが、SEO的には全ページが全ページからリンクを貼られるので良くないかもです。

ご自由にダウンロード、カスタマイズして使ってください。

人気のある記事

• Firefox5（4）で使えるアドオンベスト７
• WordPressのアクセス解析、SlimStat、Counterize II、日本語化など
• Trojan Killerの使い方
• FEBEがFirefox5（４）で使えるベータ版を公開
• Yahooボックスの機能と使い方

関連する投稿:

• Yahooインデックス更新
• wordbookerとktai entry
• キーワードの選び方（地元密着型）
• ブログのタイトルは初めに書くな！
• キーワードの選び方（全国展開型）

まだトラックバック、コメントがありません。