忍者ブログ

CriCri

クリエイティブになりたいクリクリ工房

   

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

デモランキングバナー

ドロップダウンメニュー

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

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

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

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

拍手[0回]



メニューは下記の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をコピペで移動させてください。メニューの最後に持ってきたい場合はMenuTitleMenuEnd に変更してください。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. メニューを4個(5個)にしたい

この場合、最後のメニューを空にすることをお勧めします。もしかしたら、あとで新しいメニューを入れたくなるかもしれませんしね。
下のHTMLを見ればわかると思いますが、内容を消してやるだけです。
<li class="MenuEnd"><a href="#" class="MenuBox"></a>
   <ul>
     <li class="MenuList2"></li>
   </ul>
</li>

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

COMMENT

NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 

TRACKBACK

TrackbackURL

カレンダー

11 2017/12 01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

AD

PR

ブログ内検索

素材サイト様

White Board様
White Board Banner
妙の宴様
妙の宴 Banner
もずねこ様
Mozneko Banner
押し花とアイコン様
押し花 バナー
petit sozai emi様
petit sozai emi
幕末維新新選組様
幕末維新新選組
The Heart of Eternity 様
thoe バナー
Crambon様
Crambon バナー
DragonArtz Design 様

プロフィール

メール de コンタクト

このブログへのリンク

Firefoxを支援しています

管理人はFirefoxの愛好者です。Internet Explorer は大嫌い。IEよりはるかに優れたFirefoxをお試しあれ。ダウンロードは下のバナーから無料でできます。
Firefox ブラウザ無料ダウンロード

現在の閲覧者

Copyright ©  -- CriCri --  All Rights Reserved

Design by CriCri / material by DragonArtz Desighns / powered by NINJA TOOLS / 忍者ブログ / [PR]