I created a pull-down menu for the side menu.
Hatebu
send最近作ったサイトでサイドメニューで子メニューをドロップダウンで表示するものを作ってみた。
ドロップダウンで表示するメニューはグローバルメニューでは良くあるのだが、今回はサイドメニューで作りたかった。
JavaScriptは出来るだけ使わないでCSSだけで作ってみました。
サンプルページはこちら 実際に設置したサイトはこちら→コミュニケーションツールでコミュニケーションを企画する?ちよだ
ファイルのダウンロードはこちら→menu.zip
Clickable table of contents
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="/en/”/#”">会社案内</a>
<ul class=”sub”>
<li><a href="/en/”/#”">経営理念・概要・沿革</a></li>
<li><a href="/en/”/#”">アクセスマップ</a></li>
<li><a href="/en/”/#”">inquiry</a></li>
<li><a href="/en/”/#”">サンプル・資料請求</a></li>
<li><a href="/en/”/#”">採用情報</a></li>
<li><a href="/en/”/#”">スタッフ紹介</a></li>
<li><a href="/en/”/#”">特定商取引に関する記述</a></li>
<li><a href="/en/”/#”">privacy policy</a></li>
</ul>
</li>
<li class="”orang”" onmouseover="”this.className=’orang1′”" onmouseout="”this.className=’orang'”"><a href="/en/”/#”">商業ツール</a>
<ul class=”sub”>
<li><a href="/en/”/#”">はがき</a></li>
<li><a href="/en/”/#”">インプレッション名刺</a></li>
</ul>
</li>
<li class="”gren”" onmouseover="”this.className=’gren1′”" onmouseout="”this.className=’gren'”"><a href="/en/”/#”">コミュニケーション</a>
<ul class=”sub”>
<li><a href="/en/”/#”">出版</a></li>
<li><a href="/en/”/#”">心の心髄</a></li>
<li><a href="/en/”/#”">心理劇</a></li>
</ul>
</li>
<li class="”yelow”" onmouseover="”this.className=’yelow1′”" onmouseout="”this.className=’yelow'”"><a href="/en/”/#”">社長ブログ</a></li>
<li class="”yelow”" onmouseover="”this.className=’yelow1′”" onmouseout="”this.className=’yelow'”"><a href="/en/”/#”">スタッフブログ</a></li>
<li class="”blu”" onmouseover="”this.className=’blu1′”" onmouseout="”this.className=’blu'”"><a href="/en/”/#”">ちよだのチャレンジ</a></li>
<li class="”blu”" onmouseover="”this.className=’blu1′”" onmouseout="”this.className=’blu'”"><a href="/en/”/#”">customer's voice</a></li>
<li class="”blu”" onmouseover="”this.className=’blu1′”" onmouseout="”this.className=’blu'”"><a href="/en/”/#”">Link</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的には全ページが全ページからリンクを貼られるので良くないかもです。
ご自由にダウンロード、カスタマイズして使ってください。
English 
Japanese