調べものブログ

カスタムCSSの編集

div.mymenu{
  position:absolute;
  top:80px; left:20px;
  padding:0px; margin:0px;
}
div.mymenu a{
  display:block; float:left;
  width:85px; height:19px;
  padding:0px; margin-right:1px;
  background: url("http://shirabemono.cocolog-nifty.com/blog/img/menu.gif");
  line-height:19px; vertical-align:middle;
  text-align:center;
  text-decoration:none;
}
div.mymenu a:link { color: white }       /* unvisited link */
div.mymenu a:visited { color: white }   /* visited links */
div.mymenu a:hover { position:relative; background-position:0px -19px; }
div.mymenu a:active { color: white }    /* active links */
#banner{ z-index:2}
#pagebody{ z-index:1}
div.sbmenu{
  position:absolute; visibility:hidden;
}
div.sbmenu a{
  background: white;
  display:block;
  width:160px;
  padding:0px 5px;
  border: solid 1px;
  border-color: #aaa #000 #000 #aaa;
  margin:-1px 0px 0px 0px;
  font-size:85%; font-weight:bold; text-decoration:none;
}
div.sbmenu a:link{ color: black !important}
div.sbmenu a:visited { color: black !important}
div.sbmenu a:hover{ color: white !important; background: #66a}
div.sbmenu a:active { color: black !important}
div.sbmenu#sb2 { top:97px; left:108px; z-index:1002;}
div.sbmenu#sb3 { top:97px; left:193px; z-index:1003;}
• "div.mymenu"、"div.mymenu a"は、ココログのカスタムCSSの編集～カーソルを重ねると色が変わるメニューの作成～と同様です。
• "#banner"、"#pagebody"は、プルダウンメニューを最前面に表示するために、z-indexの表示順を設定しています。IE対策です。詳しくは別途書く予定。(2008/2/15追記：IEとfirefoxでz-indexの表示が異なる参照)
• "div.submenu"はプルダウンメニューの設定です。"visibility:hidden"指定で、最初は表示しないようにしています。
• "div.submenu a"で、プルダウンメニューのアンカーの書式設定をしています。
• "div.sbmenu#sb2"、"div.sbmenu#sb3"は、2つのプルダウンメニューの位置を絶対座標で指定しています。

HTMLの編集

• ブログのタイトル欄にメニューを表示するため、HTMLは「ブログのサブタイトル」に書きます。
<script type="text/javascript">
<!--
function showMenu(menuId){
    document.getElementById(menuId).style.visibility="visible";
}
function hideMenu(menuId){
    document.getElementById(menuId).style.visibility="hidden";
}
//-->
</script>
<div class="mymenu">
  <a href="http://shirabemono.cocolog-nifty.com/blog/">最近の記事</a>
  <a href="http://shirabemono.cocolog-nifty.com/blog/archives.html" onmouseover="showMenu('sb2')" onmouseout="hideMenu('sb2')">カテゴリー</a>
  <a href="http://shirabemono.cocolog-nifty.com/blog/" onmouseover="showMenu('sb3')" onmouseout="hideMenu('sb3')">お気に入り</a>
  <a href="http://www.cocolog-nifty.com/login/">ログイン</a>
</div>
<div class="sbmenu" id="sb2" onmouseover="showMenu('sb2')" onmouseout="hideMenu('sb2')">
  <a href="http://shirabemono.cocolog-nifty.com/blog/cat8169838/index.html">ブログ・ココログ関連</a>
  <a href="http://shirabemono.cocolog-nifty.com/blog/cat8169844/index.html">パソコン・インターネット</a>
</div>
<div class="sbmenu" id="sb3" onmouseover="showMenu('sb3')" onmouseout="hideMenu('sb3')">
  <a href="http://shirabemono.cocolog-nifty.com/blog/2008/01/css_685b.html">文章を枠で飾りつけ その３</a>
  <a href="http://shirabemono.cocolog-nifty.com/blog/2008/02/css_015e.html">ココログのCSSファイル</a>
  <a href="http://www.geocities.jp/gimproject/gimp2.0.html">GIMP2を使おう</a>
</div>
• プルダウンメニューの表示・非表示は、javascriptで制御します。そのためにjavascriptを書いています。function showMenu(menuId)関数は、プルダウンメニューを表示する関数です。visibility属性をvisibleに設定します。function hideMenu(menuId)関数は、visibility属性をhiddenに設定してプルダウンメニューを非表示にします。
• "mymenu"クラスのプルダウンメニューを表示させたいメニューにonmounseover、onmouseout属性を指定します。onmouseoverはマウスカーソルが重なったときに呼ばれるjavascript関数を指定します。ここではshowMenu関数を呼び、プルダウンメニューを表示します。引数には表示するプルダウンメニューのIDを指定します。onmouseout属性はマウスカーソルが離れたときに呼ばれる関数の指定です。ここではhideMenu関数を呼び、プルダウンメニューを非表示にします。
• <div class="submenu">タグは、プルダウンメニューの内容を設定しています。ID="sb2"、"sb3"の2種類のプルダウンメニューを作っています。中身はプルダウンメニューに表示したいアンカーを列挙しているだけです。"mymenu"と同様にonmouseover、onmouseout属性を指定し、プルダウンメニューにマウスカーソルが重なったときにプルダウンメニューを表示・非表示する設定します。この設定をしないとプルダウンメニューにマウスカーソルが移動した瞬間にプルダウンメニューが非表示になってしまいます。

"z-index"の動作は、InternetExplorerとFirefoxとで異なるようです。詳細は別途書きたいと思います。(2008/2/15追記：IEとfirefoxでz-indexの表示が異なる参照)