« ココログのカスタムCSSの編集~カーソルを重ねると色が変わるメニューの作成~ | トップページ | IEとFirefoxでz-indexの扱いが異なる »

2008年2月10日 (日)

ココログのカスタムCSSの編集~プルダウンメニューの作成~

ココログのカスタムCSSの編集を使ってプルダウンメニューを作ってみる。上のタイトル欄のメニューように、マウスカーソルを重ねるとプルダウンメニューを出すことができるようになります。

カスタム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">文章を枠で飾りつけ その3</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の表示が異なる参照)

« ココログのカスタムCSSの編集~カーソルを重ねると色が変わるメニューの作成~ | トップページ | IEとFirefoxでz-indexの扱いが異なる »

コメント

はじめまして。
ずいぶん昔の記事のようなのでカキコに気づかれるかわかりませんが・・・。

メニューの色が変わるのと、プルダウン表示を超初心者ながらみようみまねでいろいろ調べながらやってみました。
想像していたところにタブは表示されませんでしたがなんとか出来ました。

が。
どうしてもプルダウンの表示が崩れてて、最初「カテゴリー」と「ご案内」の両方崩れていましたが、打ち直したら「ご案内」の方は直ったのですが「カテゴリー」が少しはよくなったけれどまでおかしいままです。

いろいろ調べましたがどうしてもわからずカキコした次第です。
ちなみに、http://orusuban.patorol.com/ のほうも同じ用に設定したらコチラはうまく行きました。

他の記事でこの関連がupされていたらすいません。
なにせ初心者なもんで探して読んでもなかなか意味がわからなくて(>_<)

お手すきのときがあれば宜しくお願いします。

ことりさんへ

たぶんですが、行の先頭に全角スペースが入っているためではないでしょうか。
「一日無駄編」から「思った雑記編」までのアンカー指定をしている行の先頭です。
ご確認ください。

ありがとうございます~!!!!
さっそく確認したら、「全角」になってました。(ほかのとこはちゃんと「半角」)
見た目ではわからなかったので、助かりました!!!!
「半角」に直したらちゃんと並んで表示されました。

ホントにありがとうございます(>_<)

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/506297/40078562

この記事へのトラックバック一覧です: ココログのカスタムCSSの編集~プルダウンメニューの作成~:

« ココログのカスタムCSSの編集~カーソルを重ねると色が変わるメニューの作成~ | トップページ | IEとFirefoxでz-indexの扱いが異なる »