うにゅうにゅナビゲーション2
2004.02.28 Saturday 20:36
OKAMUEAさん<http://homepage.mac.com/yuji_okamura/iblog/DotMac/Tips/>より
うにゅうにゅナビゲーションに対して要望がありましたので、対応してみました。
Javascriptの記述ミスという、しょうもないミスで動いていませんでしたが、直りました。
うにゅうにゅナビゲーションとはなんぞやという方はここのサイトの左の
・ダウンロード
・アンテナ
・リンク
・へぇランキング
・BlogPeople
・（・e・）ひよこぴーぷる
をクリックしてみてください。項目が引っ込んだり出たりします。
参考
・次は「うにゅうにゅナビゲーション」を実現してみた→
実現方法
まず、各テンプレートファイルに対して、Javascriptを追加します。
わたしの場合は、ShowMore.jsファイルに上記内容を記述して、各テンプレートに次の一文を追加しています。
<scriptlanguage="JavaScript" type="text/JavaScript"src="ShowMore.js"></script>
もちろん、ShowMore.jsファイルをウェブサーバにアップするのをお忘れなきよう。
http://underdone.net/js/ShowMore.js
←をダウンロードして使ってもかまいません。
次は、ナビゲーションエディタの設定方法です。
まずはヘッダをこんな感じにします。
ナビゲーション項目を識別する文字列というのは、tako,ika,uni,ikuraとか何でもいいです。
ただし、ほかの箇所で、id項目を使っている場合は、重複しないように気をつけてください。
うにゅうにゅReadMoreとはちょっと違う名前を使っているのでおそらく問題ないかと思います。
次に、内容をこんな感じにします。
ここの、ナビゲーション項目を識別する文字列は、ヘッダ部分で使った文字列と同じにしないと動きません。
最後に、最初は閉じた状態にしたいんやーというあなた。
内容の下に次を加えることで、完成します。
ここのサイトの、ひよこぴーぷるの項目をサンプルとします。
ヘッダ
内容
えっと、実は私、あまりHTML詳しくない（認識度は動けばいーやレベル）ので（w）、divタグを二重に使っちゃだめとか指摘があればどんどん直していきたいと思っています。
つっこみ／要望大歓迎です。
それよりも、ひよこぴーぷるってなんやねんという意見があるかもw
うにゅうにゅナビゲーションに対して要望がありましたので、対応してみました。
Javascriptの記述ミスという、しょうもないミスで動いていませんでしたが、直りました。
うにゅうにゅナビゲーションとはなんぞやという方はここのサイトの左の
・ダウンロード
・アンテナ
・リンク
・へぇランキング
・BlogPeople
・（・e・）ひよこぴーぷる
をクリックしてみてください。項目が引っ込んだり出たりします。
参考
・次は「うにゅうにゅナビゲーション」を実現してみた→
実現方法
まず、各テンプレートファイルに対して、Javascriptを追加します。
function showMoreMenu(varA1, varB1){
varHIDE = ('varMH_' + (varA1));
varSHOW = ('varMS_' + (varA1));
varBODY = ('varB_' + (varA1));
if( document.getElementById ) {
oElemHide = document.getElementById(varHIDE);
oElemShow = document.getElementById(varSHOW);
oElemBody = document.getElementById(varBODY);
if( varB1 == 1 ) {
oElemShow.style.display = "none";
oElemHide.style.display = "block";
oElemBody.style.display = "none";
} else {
oElemShow.style.display = "block";
oElemHide.style.display = "none";
oElemBody.style.display = "block";
}
} else {
return false;
}
}
わたしの場合は、ShowMore.jsファイルに上記内容を記述して、各テンプレートに次の一文を追加しています。
<scriptlanguage="JavaScript" type="text/JavaScript"src="ShowMore.js"></script>
もちろん、ShowMore.jsファイルをウェブサーバにアップするのをお忘れなきよう。
←をダウンロードして使ってもかまいません。
次は、ナビゲーションエディタの設定方法です。
まずはヘッダをこんな感じにします。
<div class="sidetitle">
<div id="varMS_ナビゲーション項目を識別する文字列"><a href="#_top" onclick="showMoreMenu('ナビゲーション項目を識別する文字列', 1);return false;">
▲タイトル名称▲
</a></div>
<div id="varMH_ナビゲーション項目を識別する文字列" style="display: none"><a href="#_top" onclick="showMoreMenu('ナビゲーション項目を識別する文字列', 0);return false;">
▼タイトル名称▼
</a></div>
</div>
ナビゲーション項目を識別する文字列というのは、tako,ika,uni,ikuraとか何でもいいです。
ただし、ほかの箇所で、id項目を使っている場合は、重複しないように気をつけてください。
うにゅうにゅReadMoreとはちょっと違う名前を使っているのでおそらく問題ないかと思います。
次に、内容をこんな感じにします。
<div class="side">
<div id="varB_ナビゲーション項目を識別する文字列">
一覧として表示する内容
</div>
</div>
ここの、ナビゲーション項目を識別する文字列は、ヘッダ部分で使った文字列と同じにしないと動きません。
最後に、最初は閉じた状態にしたいんやーというあなた。
内容の下に次を加えることで、完成します。
<script language="JavaScript" type="text/JavaScript">
showMoreMenu('ナビゲーション項目を識別する文字列', 1);
</script>
ここのサイトの、ひよこぴーぷるの項目をサンプルとします。
ヘッダ
<div class="sidetitle">
<div id="varMS_HiyokoPeople"><a href="#_top" onclick="showMoreMenu('HiyokoPeople', 1);return false;">
▲（・e・）ひよこぴーぷる▲
</a></div>
<div id="varMH_HiyokoPeople" style="display: none"><a href="#_top" onclick="showMoreMenu('HiyokoPeople', 0);return false;">
▼（・e・）ひよこぴーぷる▼
</a></div>
</div>
内容
<div class="side">
<div id="varB_HiyokoPeople">
<script language=" javascript" type=" text/javascript" src=" http://www.blogpeople.net/display/javacode.jsp?key=0f0d40555b5f4103" charset=" Shift_JIS" ></script>
<a href="http://www.cakesjun.net/hiyokopeople/"><img src="/hiyopeople.gif"></a>
</div>
</div>
えっと、実は私、あまりHTML詳しくない（認識度は動けばいーやレベル）ので（w）、divタグを二重に使っちゃだめとか指摘があればどんどん直していきたいと思っています。
つっこみ／要望大歓迎です。
それよりも、ひよこぴーぷるってなんやねんという意見があるかもw
Comments
Netscape 7.1 (on Jaguar) で見ました。アンテナのところだけうまくいっていないのでちょこっとソースを見てみました。ID をタイプミスしているようです。
まずは非公開 blog でテストしてから導入してみます。
かなり柔軟に使えそうなのもまた魅力です。
ありがとうございました！
クレジットまだ入れてないですが、のちほど入れさせていただきます。
クレジットを入れさせていただいて、ライセンスに関する記述なども少々修正して整理し直しました。
ある程度範囲を示したつもりですが、すでにいろんなコードが混ざっているウェブのコードも含めるとなると、ライセンスの適用範囲を厳格に規定するのは難しいですねぇ。
基本的にはCCライセンスはエントリ内容への適用ということです。
同時に、自分のページで紹介しました。そのとき、トラックバックがエラーになっちゃって…。もぉ泣きそう（笑）。
大事に使わせていただきますね。
Script、使わせていただきました。
便利さに感動です^^
非常に便利で簡単に設置することができました。
ありがとうございました。
とても便利で感激です。
Comment Form