02
25
CSSで横に解説が表示される縦メニューを設置してみる
2008-02-25
まずはbody部分です。これはそのままですね。spanタグ内にマウスを乗せたときの解説を書きます。
<ul id="cmd">
<li><a href="http://weboook.blog22.fc2.com/">レッツFC2ブログ！
<span>FC2ブログを使って色々しています。</span></a></li>
<li><a href="http://weboook.blog22.fc2.com/archives.html">サイトマップ
<span>レッツFC2ブログのサイトマップ</span></a></li>
<li><a href="http://weboook.blog22.fc2.com/blog-entry-55.html">RSSについて
<span>レッツFC2ブログのRSSを紹介しています。</span></a></li>
</ul>
次にCSSです。結局普段は画面の遥か外にあるspan内の解説がマウスを乗せたときに表示されるところに移動するということですね。
ul#cmd {
margin : 5px;
list-style-type : none;
}
ul#cmd li {
margin-bottom : 5px;
}
ul#cmd a {
position : relative;
width : 140px;
height : 30px;
display : block;
padding : 5px;
padding-right : 0;
border : 1px solid #669900;
background : #ddd;
color : #669900;
text-decoration : none;
font-weight : bold;
cursor : pointer;
}
ul#cmd a span {
position : absolute;
top : -2000px;
left : -2000px;
display : block;
width : 200%;
height : 30px;
background : #fafafa;
border : 1px solid #669900;
border-left : 0;
padding : 5px;
padding-left : 23px;
text-indent : -17px;
cursor : pointer;
color : #cc9900;
}
ul#cmd a:hover{
background : #fafafa;
color : #000;
}
ul#cmd a:hover span{
top : -1px;
left : 120px;
}
