スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タブメニュー開閉スクリプトVer.2 
2005 09 16
Fri 19:28:22

カスタマイズ  Comment 2  Trackback 0  edit.

タブメニュー開閉スクリプトがVer.2になりました。
今回の改良は、以前から閉じる場合にメニューボタンをクリックしないと閉じられない。
と言う事で自分でも開いたままの状態では使い勝手が悪いと思い色々スクリプトの参考を調べて来ましたが、今回DHTMLを使う事で、メニューボックスからマウスが外れた時点でメニューを閉じる事が出来ましたので、そのスクリプトと以前のスクリプトとの交換作業を掲載しておきます。

多少、改造にはタグの理解とカスタマイズの経験を要するかも知れませんが基本は同じ様な部分を張り替えるだけの単純作業です。

詳しくは以下を。
まずはスクリプト部分の張り替えです。
<body>タグの前に以下のメニュー開閉スクリプトが有ります。

<!-- タブメニュー開閉スクリプト -->

<script type="text/javascript">
<!--

function menushow(menu){
var menuID=document.getElementById('menu'+menu);
var subID=document.getElementById('sub'+menu);
if(menuID.className=='0'){
subID.style.display='block';
menuID.className='1';
}else{
subID.style.display='none';
menuID.className='0';
}
}
//-->
</script>


上のスクリプトを探し以下のスクリプトに変更して下さい。


<!-- タブメニュー開閉スクリプト -->
<script type='text/javascript'>
<!--
function getVISIBLE(layName){
if(document.getElementById){
if(document.getElementById(layName).style.visibility=='')return 'inherit'
return document.getElementById(layName).style.visibility
} else if(document.all){
if(document.all(layName).style.visibility=='')return 'inherit'
return document.all(layName).style.visibility
} else if(document.layers){
if(document.layers[layName].visibility=='show') return 'visible'
if(document.layers[layName].visibility=='hide') return 'hidden'
if(document.layers[layName].visibility=='inherit')return 'inherit'
} else return ''
}
function showLAYER(layName){
if(document.getElementById)
document.getElementById(layName).style.visibility='visible'
else if(document.all)
document.all(layName).style.visibility='visible'
else if(document.layers)
document.layers[layName].visibility='show'
}
function hideLAYER(layName){
if(document.getElementById)
document.getElementById(layName).style.visibility='hidden'
else if(document.all)
document.all(layName).style.visibility='hidden'
else if(document.layers)
document.layers[layName].visibility='hide'
}
//-->
</script>


上のスクリプトは以前のとは全く違った設定ですので次に<body>タグ以下のメニュー部分に使われている onclick と onmouseover onmouseout の設定を書き換えます。
実際の構成は同じなので以下の部分を入れ替えれば設定は完了です。

以下が以前のタブメニューボタンのタグ部分です。


<!-- タブの設定 -->
<div id="tab_body">
<table id="tab_menu" cellpadding="0" cellspacing="0"><tr>
<td style="width:50px;"></td>
<td>
<div id="menu7" class='0' onclick="menushow(7);">
<a href="javascript:void(0)" class="tab_title" title="プロフィール">▽PROFILE</a></div>
<div id="sub7" class="menu1">
<ul>
<li class="admin_img">
<!--myimage-->
<img src="<%image>" alt="<%author_name>" />
<!--/myimage--></li>
<li><%introduction2></li>
<li class="admin_name"><%author_name></li>
<li class="center_posi"><input type="button" onclick="window.external.AddFavorite('<%url>','<%blog_name>')"value="お気に入りに追加"></li>
</ul>
</div>
</td>

<td>
<div id="menu9" class='0' onclick="menushow(9);">
<a href="javascript:void(0)" class="tab_title" title="最新コメント">▽RE COMMENTS</a></div>
<div id="sub9" class="menu3">
<div id="commentlist">
<ul>
<!--rcomment-->
<li><%rcomment_etitle><br /><a href="<%rcomment_link>#comment">(<%rcomment_month>/<%rcomment_day>) <%rcomment_name></a></li>
<!--/rcomment-->
</ul>
</div></div>
</div>
</td>

<td>
<div id="menu10" class='0' onclick="menushow(10);">
<a href="javascript:void(0)" class="tab_title" title="最新トラックバック">▽TRACKBACKS</a></div>
<div id="sub10" class="menu4">
<div id="tblist">
<ul>
<!--rtrackback-->
<li><%rtrackback_etitle><br /><a href="<%rtrackback_link>#trackback" title=""><%rtrackback_blog_name>(<%rtrackback_month>/<%rtrackback_day>)</a></li>
<!--/rtrackback-->
</ul>
</div></div>
</div>
</td>


<td>
<!-- link -->
<div id="menu11" class='0' onclick="menushow(11);">
<a href="javascript:void(0)" class="tab_title" title="リンク集">▽MY LINKS</a></div>
<div id="sub11" class="menu5">
<ul>
<!--link-->
<li><span class="link_point"> </span><a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a></li>
<!--/link-->
</ul>
</div>
</td>

<td>
<div id="menu12" class='0' onclick="menushow(12);">
<a href="javascript:void(0)" class="tab_title" title="書庫">▽ARCHIVE</a></div>
<div id="sub12" class="menu6">
<ul>
<!--archive-->
<li><span class="link_point"> </span><a href="<%archive_link>" title="<%archive_year>年<%archive_month>月の記事一覧"><%archive_year>年<%archive_month>月(<%archive_count>)</a></li>
<!--/archive-->
</ul>
</div>
</td>
<td style="width:50px;"></td>
</tr></table>
</div>


上のタグ部分を下の新しいタグと入れ替えて下さい。


<!-- タブの設定 -->
<div id="tab_body">
<table id="tab_menu" cellpadding="0" cellspacing="0"><tr>
<td style="width:50px;"></td>
<td>
<div id="menu1" onclick="showLAYER('sub1');return false" onmouseout="hideLAYER('sub1');return false">
<a href="#" class="tab_title" title="プロフィール">▽PROFILE</a></div>
<div id="sub1" class="menu_a" onmouseover="showLAYER('sub1');return false" onmouseout="hideLAYER('sub1');return false">
<ul>
<li class="admin_img">
<!--myimage-->
<img src="<%image>" alt="<%author_name>" />
<!--/myimage--></li>
<li><%introduction2></li>
<li class="admin_name"><%author_name></li>
<li class="center_posi"><input type="button" onclick="window.external.AddFavorite('<%url>','<%blog_name>')"value="お気に入りに追加"></li>
</ul>
</div>
</td>

<td>
<div id="menu2" onclick="showLAYER('sub2');return false" onmouseout="hideLAYER('sub2');return false">
<a href="#" class="tab_title" title="カテゴリー">▽CATEGORY</a></div>
<div id="sub2" class="menu_b" onmouseover="showLAYER('sub2');return false" onmouseout="hideLAYER('sub2');return false">
<ul>
<!--category-->
<li><span class="link_point"> </span><a href="<%category_link>" title="<%category_name>"><%category_name></a> (<%category_count>)</li>
<!--/category-->
</ul>
</div>
</td>

<td>
<div id="menu3" onclick="showLAYER('sub3');return false" onmouseout="hideLAYER('sub3');return false">
<a href="#" class="tab_title" title="最新コメント">▽RE COMMENTS</a></div>
<div id="sub3" class="menu_c" onmouseover="showLAYER('sub3');return false" onmouseout="hideLAYER('sub3');return false">
<div id="commentlist">
<ul>
<!--rcomment-->
<li><%rcomment_etitle><br /><a href="<%rcomment_link>#comment">(<%rcomment_month>/<%rcomment_day>) <%rcomment_name></a></li>
<!--/rcomment-->
</ul>
</div></div>
</div>
</td>

<td>
<div id="menu4" onclick="showLAYER('sub4');return false" onmouseout="hideLAYER('sub4');return false">
<a href="#" class="tab_title" title="最新トラックバック">▽TRACKBACKS</a></div>
<div id="sub4" class="menu_d" onmouseover="showLAYER('sub4');return false" onmouseout="hideLAYER('sub4');return false">
<div id="tblist">
<ul>
<!--rtrackback-->
<li><%rtrackback_etitle><br /><a href="<%rtrackback_link>#trackback" title=""><%rtrackback_blog_name>(<%rtrackback_month>/<%rtrackback_day>)</a></li>
<!--/rtrackback-->
</ul>
</div></div>
</div>
</td>


<td>
<div id="menu5" onclick="showLAYER('sub5');return false" onmouseout="hideLAYER('sub5');return false">
<a href="#" class="tab_title" title="リンク集">▽MY LINKS</a></div>
<div id="sub5" class="menu_e" onmouseover="showLAYER('sub5');return false" onmouseout="hideLAYER('sub5');return false">
<ul>
<!--link-->
<li><span class="link_point"> </span><a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a></li>
<!--/link-->
</ul>
</div>
</td>

<td>
<div id="menu6" onclick="showLAYER('sub6');return false" onmouseout="hideLAYER('sub6');return false">
<a href="#" class="tab_title" title="書庫">▽ARCHIVE</a></div>
<div id="sub6" class="menu_f" onmouseover="showLAYER('sub6');return false" onmouseout="hideLAYER('sub6');return false">
<ul>
<!--archive-->
<li><span class="link_point"> </span><a href="<%archive_link>" title="<%archive_year>年<%archive_month>月の記事一覧"><%archive_year>年<%archive_month>月(<%archive_count>)</a></li>
<!--/archive-->
</ul>
</div>
</td>
<td style="width:50px;"></td>
</tr></table>
</div>


これでバージョン2に入れ替えた事になります。
後は、両端の余白を設定している、<td style="width:50px;"></td>を自由なサイズにして配置を決めて下さい。

尚、項目を増やす場合は、各項目は同じ設定で、showLAYER('sub数字') hideLAYER('sub数字') の数字部分がメニュー本体のブロックIDと同じ数字に設定する事を忘れないで下さい。
当然、同じ番号は使えません。
一つのタブメニューボタンとメニュー内容のブロックは同じ番号で設定されます。
ボタン部分は、<div id="menu数字" onclick=" で始まる部分。
メニュー本体は、<div id="sub数字" class="menu数字" onmouseover= で始まる部分です。

ここで気をつけるのは、id="menu数字" と id="sub数字" showLAYER('sub数字') hideLAYER('sub数字') は同じ数字だという事です。
class="menu数字" はメニュー内容の設定ですから、他の部分と共有できますが、スタイルシートで幅の設定を個別に行っていますので重複せず個別に設定する事をお勧めします。

次にスタイルシートの設定です。
以下が以前の設定です。


/* タブメニューコンテンツ部の設定 */

div.menu1,
div.menu2,
div.menu3,
div.menu4,
div.menu5,
div.menu6 {
padding: 3px;
margin: 0px;
text-align: left;
border: 1px solid #AAA;
background-color: #FFF;
display:none;
position:absolute;
top:60px;right:auto;
z-index: 2;
}

/* タブメニューコンテンツ部の幅設定 */

div.menu1 {width:200px;}
div.menu2 {width:180px;}
div.menu3 {width:220px;}
div.menu4 {width:240px;}
div.menu5 {width:220px;}
div.menu6 {width:110px;}

/* タブメニュー個別ボタンの設定 */

div#menu7,
div#menu8,
div#menu9,
div#menu10,
div#menu11,
div#menu12 {
width: auto;
margin: 0px;
font-weight: bold;
text-align: center;
}


上の部分で赤文字の部分を書き換えるわけですが、変更したモノを以下に載せますのでそれとまとめて書き換えた方が早いですね。


/* タブメニューコンテンツ部の設定 */

div.menu_a,
div.menu_b,
div.menu_c,
div.menu_d,
div.menu_e,
div.menu_f {
text-align: left;
border: 1px solid #AAA;
background-color: #FFF;
visibility: hidden;
position:absolute;
top:auto;right:auto;
z-index: 2;
}

div.menu_a ul,
div.menu_b ul,
div.menu_c ul,
div.menu_d ul,
div.menu_e ul,
div.menu_f ul {padding: 3px;margin: 0px;text-align: left;}

/* タブメニューコンテンツ部の幅設定 */

div.menu_a {width:200px;}
div.menu_b {width:180px;}
div.menu_c {width:240px;}
div.menu_d {width:240px;}
div.menu_e {width:220px;}
div.menu_f {width:110px;}

/* タブメニュー個別ボタンの設定 */

div#menu1,
div#menu2,
div#menu3,
div#menu4,
div#menu5,
div#menu6 {
width: auto;
font-weight: bold;
text-align: center;
}



青文字で書かれた部分が変更箇所と、追加部分です。

これでタブメニュースクリプトVer.2の変更が完了しました。

Re comments.

「さっそく」
張替え完了です~。
確かにこっちの方がいいですね。

と言っても、まだお披露目はしてないんですけどね^^;
がんばって仕上げて使用したいです。
2005/09/17(土) 10:22:12 [URL] chitoseさん [編集]
「chitoseさん頑張れ~」
かなり長いスクリプトに感じますが、中身を見ないで上と下だけを
見ながら貼り付ける良いですよw
デザインやカスタマイズには影響しない部分なので。多分w
まぁ~使用感は今までのに慣れていると思わず、要らないクリックをしてしまいますが。(^^;
2005/09/18(日) 00:34:54 [URL] 有希之武さん [編集]
Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。