サイドメニューのプルダウンメニューを作ってみた
はてブ
送る最近作ったサイトでサイドメニューで子メニューをドロップダウンで表示するものを作ってみた。
ドロップダウンで表示するメニューはグローバルメニューでは良くあるのだが、今回はサイドメニューで作りたかった。
JavaScriptは出来るだけ使わないでCSSだけで作ってみました。
サンプルページはこちら 実際に設置したサイトはこちら→コミュニケーションツールでコミュニケーションを企画する?ちよだ
ファイルのダウンロードはこちら→menu.zip
クリックできる目次
XHTMLはこんな感じ
[html]
<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>
[/html]
CSSはこれ
[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;
}
[/css]
こんなのを作ってみましたが、SEO的には全ページが全ページからリンクを貼られるので良くないかもです。
ご自由にダウンロード、カスタマイズして使ってください。