ドロップダウンメニュー

今回はWebstyle #01 シリーズに実装されている、ドロップダウンメニューのカスタマイズです。
このスクリプトはJavaScript Dropdown Menu With Multi Levelsを使用しました。
オリジナルはメニューの下のリストに、次のドロップダウンメニューが横に出てくる優れものなので、カテゴリーのツリー化をする時に最適です。
今回のテンプレートではその部分を削除してあるので、マルチレベルにしたい方はオリジナルをダウンロードするといいです（テンプレート使用スクリプトは一部変更してあります）

注）このスクリプトはIE8でマウスオーバー時にリンクの色が変化しないバグがあるのが発見されたため、2010年6月25日にjQueryのDroppyに変更しました。更新後のメニューのカスタマイズはドロップダウンメニュー #2を参照してください。

メニューは「最新記事」「カテゴリー」「アーカイブ」「コメント」「リンク」が標準装備されていますが、他のメニューにしたい方やメニューの数を変更したい方もいると思うので、ここで説明をします。
全部を表示すると滅茶苦茶長くなるので、追記に入れてあります。
唖然とする長さです（°_°；）

追記：３カラムを出したので、カッコの中に３カラムの数値を入れました。参考にしてください。

メニューは下記のHTML部分の連なりで構成されています。HTMLの変更はここでします。
下はカテゴリーの部分です。

<li class="MenuTitle"><a href="#" class="MenuBox">カテゴリー</a>
    <ul>
      <!--plugin_category-->
      <li class="MenuList2"><a href="<!--$plugin_category_link-->"><!--$plugin_category_title-->(<!--$plugin_category_num-->)</a></li>
      <!--/plugin_category-->
    </ul>
  </li>

1. リスト部分の幅を変えたい
 HTMLの緑色部分のMenuList1 は幅160px(3カラムは155px)に、MenuList2 は幅200pxに指定されています。変更したい箇所の名前を入れ替えるだけで、幅が変わります。幅のサイズを変えたい場合はCSSの緑色部分の幅を変更してください。
IEとOperaではリスト幅の表示に少し時差が現れます。気にしないでもらえるといいんですけど（＾＾；）

2. メニューの場所を右や左に動かしたい
上の個別リストHTMLをコピペで移動させてください。メニューの最後に持ってきたい場合はMenuTitle をMenuEnd に変更してください。MenuTitleには右線が入っているので、変更しないと最後のメニューに線が入ります。最後のメニューを移動させる場合は、その逆をしてください。

3. メニュータイトルを変更したい　  
茶色がタイトル名です。ここを変更すればメニューのタイトルも変わります。そうするとリストの内容も変更しないといけませんね。
プラグインを入れたい場合は、管理ページからプラグインの設定ページへ行き、リストにしたいプラグインのHTML編集をクリックします。編集ページには下記のようなHTMLが書かれています。

これはカテゴリーの例です。赤紫色の部分を削除して、HTMLの水色部分に差し替えます。忍者独自構文の<!--plugin_category-->と<!--/plugin_category-->が来る場所に気を付けてください。これはカテゴリーを繰り返して表示するスクリプト独自構文なので、貼り付ける場所を間違えると正常に表示されません。

<!--plugin_category-->
<div class="plugin_data">
<a href="<!--$plugin_category_link-->">
<!--$plugin_category_title-->
(<!--$plugin_category_num-->)
</a>

</div>
<!--/plugin_category-->

4. メニューを４個（５個）にしたい
この場合、最後のメニューを空にすることをお勧めします。もしかしたら、あとで新しいメニューを入れたくなるかもしれませんしね。
下のHTMLを見ればわかると思いますが、内容を消してやるだけです。

<li class="MenuEnd"><a href="#" class="MenuBox"></a>
   <ul>
     <li class="MenuList2"></li>
   </ul>
</li>

5. メニューを増やしたい
各メニューの幅は赤字のMenuBoxで指定しています。全メニュー幅は800px （３カラムは930px）です。
MenuTitleで1px の右線を指定しているので、それも計算に入れてください。
メニューを６個にする場合は、右線が５個来るので795px を６等分します。しかし、これは割りきれません。
一番簡単な方法は、新しくセレクタを作って最後のメニューに入れ、余った3px をそこに放り込んでやることです。最後のメニューだけ幅広になって見栄えが悪い場合は、他のメニューに余った幅を振り分けてやれば解決します。実際にCSSに書きこむ値は、左右のpaddingである5pxを引いた値、122pxに、最後のメニューは125pxになります。この場合、 リスト部分の幅を変更するのもお忘れなく。下は６個にする場合のサンプルです。

CSS
ul.menu .MenuBox {
    width:122px;
    height:20px;
    padding:7px 5px 3px;
    background-image:url(http://bfile.shinobi.jp/5271/menu-02a.gif);
    font-weight:bold;
    color:#555;
}


ul.menu .MenuBoxEnd {
    width:125px;
    height:20px;
    padding:7px 5px 3px;
    background-image:url(http://bfile.shinobi.jp/5271/menu-02a.gif);
    font-weight:bold;
    color:#555;
}


HTML（最後のメニュー部分）
 <li class="MenuEnd"><a href="#" class="MenuBoxEnd">リンク</a>
    <ul>
      <!--plugin_link-->
      <li class="MenuList1"><a href="<!--$plugin_link_link-->" target="<!--$plugin_link_target-->"><!--$plugin_link_title--></a></li>
      <!--/plugin_link-->
    </ul>
  </li>

6. メニューのタイトルに直接記事へのリンクをつけたい
「プロフィール」や「初めに」など、ひとつしかない特別な記事へのリンクをメニューに入れようとすると、メニューリストは必要なくなります。この場合は赤紫色のリスト部分を削除して、茶色のメニュータイトルを変更します。そして、紫色部分に記事のアドレスを入れます。この00の所に記事ナンバーを入れるだけでOKです。

<li class="MenuEnd"><a href="/Entry/00/" class="MenuBoxEnd">リンク</a>
  <ul>
    <!--plugin_link-->
    <li class="MenuList2"><a href="<!--$plugin_link_link-->" target="<!--$plugin_link_target-->"><!--$plugin_link_title--></a></li>
    <!--/plugin_link-->
  </ul>
</li>

7. メニュータイトルのマウスオーバー時の色を変えたい
マウスをメニュータイトルの上に持ってくると「Earth」と「Mechanics」は色が変わります。これを色変化なしにしたい場合、または反対に色を変えたい場合はCSSの下記部分を変更します。
赤字部分の指定を変更すると、全てのメニュータイトルの色が変わります。
色変化なしにする場合は、#555にしてください。

「Earth」
ul.menu .MenuBox:hover,
ul.menu .Menuhover {

    color:#39F;
}


「Mechanics」
ul.menu .MenuBox:hover,
ul.menu .Menuhover {

    color:#AAA;
}

「Sky」はタイトルの色が変わりません。これを変更する場合は、ピンク色部分をCSSに付け加えてから、赤字部分の指定を変更してください。

ul.menu .MenuBox:hover,
ul.menu .MenuBoxEnd:hover,
ul.menu .Menuhover {
    color:#777;
}

8. ひとつのタイトルだけ、マウスオーバー時の色を変えたい
もしタイトルの一つだけ色を変えたい場合は、新しく指定を作ります。ここでは「MenuBox1」を新しく作っています。これを指定したいメニュー部分に 入れてやります。最後のメニューの色を変えたい場合で指定がMenuBoxEndになっている場合（Sky）は、それ用の指定を新しく作ります。下は 「Sky」を例にして、マウスオーバー時の色を薄い灰色にしてみました。

普通のメニューの場合
HTML

<li class="MenuTitle"><a href="#" class="MenuBox1">カテゴリー</a>
  <ul>
    <!--plugin_category-->
    <li class="MenuList2"><a href="<!--$plugin_category_link-->"><!--$plugin_category_title-->(<!--$plugin_category_num-->)</a></li>
    <!--/plugin_category-->
  </ul>
</li>


CSS
ul.menu .MenuBox1 {
    width:149px;
    height:20px;
    padding:7px 5px 3px;
    background-image: url(http://file.cricri.blog.shinobi.jp/mneu-01.gif);
    font-weight:bold;
    color:#777;
}


ul.menu .MenuBox1:hover {
    color:#CCC;
}


最後のメニュー用指定がある場合の例（これはリストなしを例として持ってきました）
HTML
<li class="MenuEnd"><a href="/Entry/00/" class="MenuBoxEnd">プロフィール</a>
</li>


CSS
ul.menu .MenuBoxEnd {
    width:150px;
    height:20px;
    padding:7px 5px 3px;
    background-image: url(http://file.cricri.blog.shinobi.jp/mneu-01.gif);
    font-weight:bold;

    color:#777;
}


ul.menu .MenuBoxEnd:hover {
    color:#CCC;
}

9. リスト部分のマウスオーバー時の色を変えたい
IE8でリスト部分のマウスオーバー時の色が固まったり、現在の色が気に入らない場合は、気軽に色を変更できます。CSSの下記部分の色を変更すれば、お好みの色になります。
下は「Earth」の青色を色変化なしにする例です。色変化なしにする場合は全てのシリーズで色番号を#444にしてください。

    ul.menu ul li a:hover {
        color:#930;　
    }

    これを下のように変える
            

    ul.menu ul li a:hover {
        color:#444;　　　　　　　　　　（これはリストの文字色です。）
    }

ここから先はドロップダウンメニューの使用スクリプト、HTML（短縮版）、CSS（関係部分のみ）を表示しています。
スクリプト

var menu=function(){
    var t=15,z=50,s=6,a;
    function dd(n){this.n=n; this.h=[]; this.c=[]}
    dd.prototype.init=function(p,c){
        a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
        for(i;i<l;i++){
            var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
            h.onmouseover=new Function(this.n+'.st('+i+',true)');
            h.onmouseout=new Function(this.n+'.st('+i+')');
        }
    }
    dd.prototype.st=function(x,f){
        var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
        clearInterval(c.t); c.style.overflow='hidden';
        if(f){
            p.className+=' '+a;
            if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
            if(c.mh==c.offsetHeight){c.style.overflow='visible'}
            else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
        }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
    }
    function sl(c,f){
        var h=c.offsetHeight;
        if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
            if(f==1){c.style.overflow='visible'}
            clearInterval(c.t); return
        }
        var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s);
        c.style.height=h+(d*f)+'px'
    }
    return{dd:dd}
}();

HTML

<!-- ==========　トップメニュー ========= -->
      <div id="TopMenu">
        <ul class="menu" id="menu">
          <li class="MenuTitle"><a href="#" class="MenuBox">最新記事</a>
             <ul>
               <!--plugin_entry-->
               <li class="MenuList2"><a href="<!--$plugin_entry_link-->"><!--$plugin_entry_title--></a></li>
               <!--/plugin_entry-->
            </ul>
          </li>
          <li class="MenuTitle"><a href="#" class="MenuBox">カテゴリー</a>
            <ul>
              <!--plugin_category-->
              <li class="MenuList2"><a href="<!--$plugin_category_link-->"><!--$plugin_category_title-->(<!--$plugin_category_num-->)</a></li>
              <!--/plugin_category-->
            </ul>
          </li>        
          <li class="MenuEnd"><a href="#" class="MenuBox">リンク</a>
            <ul>
              <!--plugin_link-->
              <li class="MenuList1"><a href="<!--$plugin_link_link-->" target="<!--$plugin_link_target-->"><!--$plugin_link_title--></a></li>
              <!--/plugin_link-->
            </ul>
          </li>
        </ul>
      </div>
<!-- ==========　トップメニュー　エンド　========== -->

CSS

/*************************************************
  トップメニュー
*************************************************/
ul.menu .MenuBox {
    width:149px;
    height:20px;
    padding:7px 5px 3px;
    background-image:url(http://bfile.shinobi.jp/5271/menu-02a.gif);
    font-weight:bold;
    color:#555;
}


ul.menu .MenuBox:hover,
ul.menu .Menuhover {
    color:#39F;
}


ul.menu li.MenuTitle {
    position:relative;
    float:left;
    border-right:solid 1px #CCC;
}


ul.menu li.MenuEnd {
    position:relative;
    float:left;
    border:none;
}


ul.menu ul li.MenuList1 {
    position:relative;
    width:160px;
    margin:0;
}


ul.menu ul li.MenuList2 {
    position:relative;
    width:200px;
    margin:0;
}