Webstyle #02のドロップダウンメニュー

今回はWebstule #02の「blue light」「a tree」「カスタマイズ」「butterfly」に実装されているドロップダウンメニューです。
使用したのはMultilebel Droppdown Menu です。
このメニューのスクリプトは、上のサイトからダウンロードするといいです。
説明も書いてありますが、英語なのであしからず。

「Webstyle #1」シリーズに使用されているドロップダウンメニューのdroppyとよく似ていますが、ちょっと違うのはマウスをメニューの上に持ってきたときのリストの出方です。
droppyはピロンと下にでてくるけど、こちらのメニューは左上から右下へ向かって出てきます。
この出方が気に入って、「Webstyle #1」シリーズで使おうかと思ったけど、あれにはリストの出方が合わない。しかし今回のテンプレではしっくり馴染んでます。

HTMLの構成はどのメニューも同じです。
HTMLもCSSも「Webstyle #01」シリーズと基本は同じなのですが、向こうは幅指定のためのクラスがついていてややこしいので、あらためてこちらのテンプレート用にもう一度書きます。

例によってカスタマイズは長くなるので、メニューのカスタマイズをされたい方は追記からどうぞ。
注）HTMLやCSSはコピーして使えますが、説明のために色文字になっているので、念のために一度メモ帳にコピーしたものをもう一度コピーして貼り付けてください。

まずHTMLですが、下のようになっています。
決まった全体幅がないので、タグにクラスもついてなくてシンプルです。
メニューの区切りがわかりやすいように、色を入れ違いにしています。
紫色が単独ページメニューで、黒と青で入れ違いになっている部分がリストを伴うメニューです。

<!-- ==========▼▼▼ メニュー　========== -->
<ul id="nav">
        <li><a href="/" title="ブログのトップページへ">HOME</a></li>
        <li><a href="#">New Entries</a>
          <ul>
            <!--plugin_entry-->
            <li><a href="<!--$plugin_entry_link-->">&bull; <span><!--$plugin_entry_year-->.<!--$plugin_entry_mon-->.<!--$plugin_entry_day--></span><br />
                &nbsp;&nbsp;<!--$plugin_entry_title--></a>    
            </li>
            <!--/plugin_entry-->
          </ul>
        </li>        
        <li><a href="#">Categories</a>
           <ul>
             <!--plugin_category-->
             <li><a href="<!--$plugin_category_link-->"><!--$plugin_category_title-->(<!--$plugin_category_num-->)</a></li>
             <!--/plugin_category-->
           </ul>
         </li>
        <li><a href="#">Archives</a>
          <ul>
            <!--plugin_archive-->
            <li><a class="Ach" href="<!--$plugin_archive_link-->"><!--$plugin_archive_year-->年<!--$plugin_archive_mon-->月(<!--$plugin_archive_num-->)</a></li>
            <!--/plugin_archive-->
          </ul>
        </li>
        <li><a href="#">Comments</a>
           <ul>
             <!--plugin_comment-->
             <li><a href="<!--$plugin_comment_link-->">&bull; <span><!--$plugin_comment_year-->.<!--$plugin_comment_mon-->.<!--$plugin_comment_day--> / <!--$plugin_comment_name-->さん</span><br />
             &nbsp;&nbsp;<!--$plugin_comment_entry_title--> <!--if_comment_res--><img alt="Res あり" align="middle" src="http://bfile.shinobi.jp/emoji/V/88.gif" /><!--/if_comment_res--></a></li>
             <!--/plugin_comment-->
           </ul>
         </li>
        <li><a href="#">Links</a>
          <ul>
            <!--plugin_link-->
            <li><a href="<!--$plugin_link_link-->" target="<!--$plugin_link_target-->"><!--if_link_img--><img src="<!--$plugin_link_img_link-->" border="0"><br><!--/if_link_img--><!--$plugin_link_title--></a></li>
            <!--/plugin_link-->
          </ul>
        </li>                  
        <li><a href="JavaScript:openPlugin('openmenu')" title="プラグインを見る">Other Menus</a></li>
      </ul>
<!-- ==========▲▲▲　メニュー　エンド　========== -->

1. メニュータイトルの順番を変える
メニューの順番を変えるだけなら、上のHTMLを参考にして希望のメニュー部分を貼り替えるだけです。

2. 別のメニューを持ってくる
標準実装以外のメニューを入れたい場合は、メニュータイトルの下に出てくるリスト部分も入れなければなりません。
下は最新記事の部分。茶色がメニュータイトルで、青い部分がその下にでてくるリストです。
注）メニューを増やすときは左右幅をはみ出さないように気を付けてください。たくさんメニューを増やしたい場合は、必要ないメニューを削除してください。

        <li><a href="#">New Entries</a>
          <ul>
             <!--plugin_entry-->
             <li><a href="<!--$plugin_entry_link-->">&bull; <span><!--$plugin_entry_year-->.<!--$plugin_entry_mon-->.<!--$plugin_entry_day--></span><br />
                 &nbsp;&nbsp;<!--$plugin_entry_title--></a>    
             </li>
             <!--/plugin_entry-->
           </ul>
        </li>

メニュータイトルは自分で書き込み、リスト部分はプラグインの設定ページからとってきます。
リストがあるのは最古記事とトラックバックですが、それぞれのHTML編集をクリックすると下のようなHTMLがでてきます。取り消し線部分を削除し、残った部分だけをリストに入れていきます。
この中には忍者の独自タグがたくさんでてきますが、詳しくは独自構文解説書に説明が載っています。

最古記事
最古記事はよく見ると、真ん中部分が最新記事と同じです。
どこで最新記事と最古記事に区別されるかというと、オレンジ色のところ。
なので、最新記事部分をコピーして、メニュータイトルとこの部分だけを差し替えればOKです。

プラグイン設定ページの最古記事HTML
<!--plugin_entry_old-->
<div class="plugin_data">
<a href="<!--$plugin_entry_link-->"><!--$plugin_entry_title--></a>
</div>
<div class="plugin_data_date">(<!--$plugin_entry_mon-->/<!--$plugin_entry_day-->)</div>
<!--/plugin_entry_old-->

これをメニューリストにいれると下のようになる

        <li><a href="#">Old Entry</a>
          <ul>
            <!--plugin_entry-->
            <li><a href="<!--$plugin_entry_link-->">&bull; <span><!--$plugin_entry_year-->.<!--$plugin_entry_mon-->.<!--$plugin_entry_day--></span><br />
                &nbsp;&nbsp;<!--$plugin_entry_title--></a>    
            </li>
            <!--/plugin_entry-->
          </ul>
        </li>        

トラックバック
プラグインのトラックバックには送信元のブログタイトルと日付しか出ませんが、メニューではトラックバックが投稿された記事のタイトルも表示するようにします。

プラグイン設定ページのトラックバックHTML
<!--plugin_trackback-->
<div class="plugin_data">
<a href="<!--$plugin_trackback_link-->"><!--$plugin_trackback_blog_title--></a>
</div>
<div class="plugin_data_date">(<!--$plugin_trackback_mon-->/<!--$plugin_trackback_day-->)</div>
<!--/plugin_trackback-->

これと記事のタイトルを入れると下のようになる。

        <li><a href="#">Trackback</a>
          <ul>
            <!--plugin_trackback-->
            <li><a href="<!--$plugin_trackback_link-->">&bull;  <span><!--$plugin_trackback_mon-->.<!--$plugin_trackback_day--> / <!--$plugin_trackback_blog_title--></span><br  />
                &nbsp;&nbsp;<!--$plugin_trackback_entry_title--></a>    
            </li>
            <!--/plugin_trackback-->
          </ul>
        </li>  

3. メニューに直接リンクをつける
メニューに「初めに」や「about」などの、ある特別なページに直接リンクする場合、リストは要らなくなります。その場合は「HOME」の部分をコピーして、リンクとタイトルを差し替えるだけです。
リンクはオレンジ色部分、茶色はメニュータイトルです。

href=" 　" の中にリンクしたいページのURLを入れます。
例えば、リンクしたい記事のURLがhttp://*******.blog.shinobi.jp/Entry/1/ だとすると、href=" /Entry/1/" とするだけでOKです。
title=" 　" の中にそのページの説明を入れると、マウスがメニュータイトルの上に乗った時に、中に書いた説明が現れます。

HOME部分
        <li><a href="/" title="ブログのトップページへ">HOME</a></li>

最初の記事が「初めに」や「ABOUT」だったら
        <li><a href="/Entry/1/" title="初めに読んでください">About</a></li>

特定のカテゴリーに直接リンクをつける
カテゴリーは標準でリストになって出てきますが、小説やイラストなど、ある特定のカテゴリーをメニュータイトルに直接リンクしたい場合は、まずそのカテゴリーのID番号を調べなければなりません。

1. プラグイン、またはメニューからリンクしたいカテゴリーを選んでクリックします。
2. そのカテゴリーのページが出てきたら、そのページのURLを見ます。
3. http://*****.blog.shinobi.jp/Category/5/ というようなURLになっていますが、この一番最後の番号がそのカテゴリーのID番号です。

カテゴリー番号が5なら、HTMLのリンク部分を href=" /Category/5/ " とし、タイトルにはそのカテゴリーのタイトルを書き込みます。

基本
        <li><a href="/Category/1/" title="カテゴリー1へ">カテゴリー1</a></li>

カテゴリー5がイラストなら
        <li><a href="/Category/5/" title="イラストページへ">イラスト</a></li>

4. メニューの背景色や文字色を変更する
メニューのカスタマイズの中で一番多いのは、メニューやリストの色変更でしょう。
それでCSSのメニューブロックには、どの指定がどの部分になるのか説明を書いてあります。
色指定をする場合は、茶色部分の指定を変更してください。

/*************************************************
  メニュー
*************************************************/
/* 上部メニューとリスト部分の基本指定
------------------------------------------------*/
#nav, #nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    text-align: left;
}

/* 上部メニュー
------------------------------------------------*/

/* 全体指定 */
#nav {
    margin: 0 10px 25px 11px;
    z-index: 10;
}

/* 上部メニューの枠 */
#nav li{
    float: left;
    position: relative;
    margin-left: -1px;
}


/* 上部メニューの中身 */
#nav a{
    display: block;
    height: 18px;
    padding: 3px 5px;
    border-top: solid 1px #CCC;         /* 枠線の指定 */
     border-right: solid 1px #CCC;
     border-left: solid 1px #CCC;
    text-decoration: none;
    background-color: #000;             /* 背景色 */
     color: #DDD;                          /* 文字色 */
}

/* リスト部分
------------------------------------------------*/

/* 全体指定 */
#nav ul{
    width: 16em;
    position: absolute;
    display: none;
    top: 26px;
    left: 2px;
}

/* 各リストの中身 */
#nav li ul a{
    width: 16em;
    padding: 4px 1em;
    margin-top: -1px;
    margin-left: -1px;
    height:auto;
    float:left;
    border: solid 1px #CCC;              /* 枠線の指定 */
     background-color: #F5F5F5;       /* 背景色 */
     color: #444;                           /* 文字色 */
}

/* リストにマウスが乗ったときの色指定 */
#nav li ul a:hover {
    background-color: #000;              /* 背景色 */
     color: #DDD;                           /* 文字色 */
}

/* 記事の日付部分 */ 
#nav ul a span { font-size: 84%; }     /* 文字の大きさ10px */ 

/* アーカイブの幅 */
#nav ul .Ach { width: 7.5em; }

/* リストの画像 */
#nav ul li img {
    margin: 0;
    vertical-align: top;
}


/* IE6対策 */
* html #nav a { height: auto; }

* html #nav li { margin-left: -1px; }

* html #nav ul {
    top: 2.05em;
    left: 1px;
    border-top: solid 1px #CCC;
}

* html #nav li ul a { margin-left: 0; }

* html div#EntryBlock { clear: none; }

以上、今思いつくことを書き出しました。
これで一般的なカスタマイズはできると思います。
もし間違いやわからないことがありましたら、連絡してください。。