top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_434

メニュー折りたたみ:DOMを使用したメニュー折りたたみの基本 ・・・ 【DOM】

 2008-11-08
DOM(>Wikipedia) を利用した、
ドキュメント要素への
JavaScript からの制御 は

 もう日常茶飯事。
 よく使う基本のモデルを少しまとめておこう、と思い立った。

まず
**********************
◆メニュー要素の折りたたみ
**********************
 ※この「創るmetaboy」では、
  貧乏芸人さんが提供されている、素晴らしい
  「直感リンクフリー」という 共有プラグイン
  を利用させていただいているが・・・

  「メニュー折りたたみ」自体、
   必要頻度が高く
   たいていは、Domアクセス利用して、CSSからめて
   用途に応じて作業している。
   その 基本をまとめておく。

  (▼追記に)

FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more【 メニュー要素の折りたたみ 】
 ( by JavaScript, Dom )

 /***********************************************/
  □Step1:まずは、単純に折りたたみオンオフ
 /***********************************************/

  ・JavasCript で関数を用意
// --- レイヤーをオンオフ トリガ -- //
function MenuOnOffdirs(val_idname){
if(document.getElementById){ //DOM がとれれば
var obj = document.getElementById(val_idname);
}else{
if(document.all){
var obj = document.all(val_idname);
}}
if(obj.style.display=='none'){
obj.style.display = 'block'; //表示変更
}else{
obj.style.display = 'none'; //表示変更
}
}


  ・HTMLからは、このように利用
<ul>
<li><a href="javascript:MenuOnOffdirs('Lmenu1');">親メニュー1</a>
<ul id="Lmenu1" style="display:none">
<li>子供1_1</li>
<li>子供1_2</li>
<li>子供1_3</li>
</ul>
</li>
<li><a href="javascript:MenuOnOffdirs('Lmenu2');">親メニュー2</a>
<ul id="Lmenu2" style="display:none">
<li>子供2_1</li>
<li>子供2_2</li>
<li>子供2_3</li>
</ul>
</li>
<li><a href="javascript:MenuOnOffdirs('Lmenu3');">親メニュー3</a>
<ul id="Lmenu3" style="display:none">
<li>子供3_1</li>
<li>子供3_2</li>
<li>子供3_3</li>
</ul>
</li>
</ul>


  ・こんな感じ


※でも、最初に閉じたくて
  style="display:none" 入れてるのだけれど
  FireFox では効かない。



もっと、楽したいよなぁ。
 /***********************************************/
  □Step2:メニューは配列にまとめる
 /***********************************************/

  ・JavasCript でメニューを配列で管理
// --- メニューを配列で管理 -- //
var Menus1s= Array("親メニュー1","親メニュー2","親メニュー3");
var Menus2s= Array();
Menus2s[0]= Array("子供1_1","子供1_2","子供1_3");
Menus2s[1]= Array("子供2_1","子供2_2","子供2_3");
Menus2s[2]= Array("子供3_1","子供3_2","子供3_3");


  ・HTMLに書き込み場所を確保しておいて
<div id="strhtml"></div>


  ・書き込み部分を関数にしておいて

function WriteDirs(){
if(document.getElementById){ //DOM がとれれば
var obj = document.getElementById('strhtml');
}else{
if(document.all){
var obj = document.all('strhtml');
}}
var outhtml = "<ul>";
for(var s=0;s<Menus1s.length;s++){
outhtml += "<li><a href=\"";
outhtml += "javascript:MenuOnOffdirs('Lmenu2" + (s+1);
outhtml += "');\">" + Menus1s[s] + "</a>";
outhtml += "<ul id=\"Lmenu2" + (s+1);
outhtml += "\" style=\"display:none\">";
for(var s2=0;s2<Menus2s[s].length;s2++){
outhtml += "<li>" + Menus2s[s][s2] + "</li>";
}
outhtml += "</ul>";
outhtml += "</li>";
}
outhtml += "</ul>";
obj.innerHTML = outhtml;
// FireFox で効かない最初の非表示をここで行う
for(var s=0;s<Menus1s.length;s++){
if(document.getElementById){ //DOM がとれれば
document.getElementById('Lmenu2' + (s+1)).style.display = 'none';
}else{
if(document.all){
document.all('Lmenu2' + (s+1)).style.display = 'none';
}}
}
}


  ・そしてこれを呼び出し書き込む
<script type="text/javascript">
WriteDirs();
</script>


commentsコメント
折りたたみ式メニューは
display:none;
が隠し文字列になるということでSEO的にどうなのか
という真偽が難しい話題がありますね。
実際どうなのかはわかりませんがその影響かどうか、
通常のウェブサイトでは昔ほど多くは見かけなくなりました。
でも会員制サイトでのログイン後のメニュー等では今でも結構目にします。
私もそういう系のサイト作成に何度かからんだことがありますが、
単純な折りたたみ式はかなり地味なので結構な色づけが必要な場合が多いです。
まあその色づけが大体大変なんですよね^^;
昔、製品紹介サイトで数階層数百末端文字列をDBから読み込んでXMLとXSLTを自動生成し、
折りたたみ式ツリーメニューで表示したらめちゃくちゃ重たくなった
という苦い思い出がありますw
【2008/11/10 14:25】 | トモヒロ #pBoZlR9Y | [edit]
コメントありがとうございます。
おっしゃる通り、SEO的には好ましくありませんね。
PHPで動的に生成する方が、実際には多く行います。
ただ、どうしても、javaScriptで制御する必要が
ある場合、このように処理します。
 そして、これもおっしゃるように
実際は、CSSで見た目を用意するのですが・・・

ありがとうございました。
【2008/11/10 14:36】 | metaboy #- | [edit]
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/434-2d26260f
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

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