スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSで横に解説が表示される縦メニューを設置してみる

 ちょっと強引な方法ですがCSSを使ってマウスを乗せたときに解説が横に表示されるメニューを設置してみます。CSSのみなので軽快に動いてくれます。
 まずは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;
}
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。