タグ・デザイン掲示板

[

[返信する]]

ツリーメニューをしたいのですが…
by はろ

2012-04-24 11:18
ツリーメニューにしたいのですが、タグを使用しても出来ず…。
過去に回答があったのですが、それでも分からないのでこうして書き込ませて頂きました。

HEAD内に何か書き込まなくてはいけないのでしょうか？

pc
[編集]

by はろ

2012-04-25 10:02
通りさん＞＞
メニュー
┣メニュー1
┣メニュー2
┗メニュー3
を使わせて頂くと、

初め(クリックする前)は

メニュー

と表示され、クリックすると

メニュー
┣メニュー1
┣メニュー2
┗メニュー3

メニュー1、メニュー2、メニュー3が表示される。

このようなものを考えております。

pc
[編集]

by はろ

2012-04-25 10:09
まさん＞＞
あるのサイト様のこちらのタグ

<script language="javascript">

</script>
<span class="list" onclick="expand(a);">最初に表示する文字</span>
<div id="a" style="display:none">クリック時に出る文字</div><br>

を現在試しております。が、クリックしても「クリック時に出る文字」が表示されません。

pc
[編集]

by はろ

2012-04-25 10:11
匿名さん＞＞
現在試しているサイト様も調べて出てきたものなのですが…

その他に出てきた上部に表示されたものは何度か試させて頂きましたが上手く表示されず。

pc
[編集]

by とく

2012-04-25 11:20
function expand(id)

が id="a" の "" 内にあるid名と統一されていませんよ。
「function expand」を大型検索サイトで検索にかけてみてはどうでしょうか。

lotta
[編集]

by はろ

2012-04-25 13:59
とくさん＞＞

<script language="javascript">

</script>
<span class="list" onclick="expand(a);">最初に表示する文字</span>
<div id="a" style="display:none">クリック時に出る文字</div><br>

↑こういうことでしょうか？

何度か試してみましたが、上のようなタグを貼ってクリックしても出来ませんでした。

「大型検索サイト」とは、ヤフー、グーグルといったもののことでしょうか？

物分りが悪くすみません。

pc
[編集]

by はろ

2012-04-25 14:10
通りさん、まさん、匿名さん、とくさん＞＞＞

皆様のお陰で、無事解決いたしました。

＜HEAD＞～＜/HEAD＞に

<script type="text/javascript">

</script>

を入れ、

<body>～</body>に

<p><FONT size="3" color="#5a7e3d"><span class="list" onclick="expand(b);" style="cursor:hand;">NOVEL</span></FONT><div id="b" style="display:none">
　　┣<a href="tagu.html" target=_blank><FONT size="2">小説01</FONT></a><br>
　　┣<a href="tagu.html" target=_blank><FONT size="2">小説02</FONT></a><br>
　　┗<a href="tagu.html" target=_blank><FONT size="2">小説03</FONT></a>

</div>

を入れたら無事、開いてくれました。

わたしの出来なかった原因は＜HEAD＞～＜/HEAD＞に何も入れていなかったためだったみたいです。

初め言っていたタグとは別のものですが、皆様のお陰でツリーメニューのことで悩むことなく創れます。

本当にありがとうございました。

pc
[編集]

by たすけあい

2012-04-25 15:13
終了したところですみません。
提示なさった設定だと、JavaScriptをOFF設定端末や一部非対応端末の場合はリンクさえできない（非表示）ことがあります。

また、IDを設定した要素ならDOM Level 1の document.getElementById を介した設定のほうが標準仕様なので、IE6を含めた古いブラウザにも対応します。

つまり、DOMを設定し、JavaScriptでstyleタグでのCSS「display:none;」を出力したほうが、JavaScriptが非対応な端末にも問題なくリンクが可能になります。

質問者さまが閉められたので、ソースコードは提示しませんがご参考までに。

それから、イベントを使うならmetaタグで、デフォルトのjavascriptのタイプ指定が必要です。（HTML5以外は）

943SH
[編集]

by はろ

2012-04-25 16:45
たすけあいさん＞＞
ありがとうございます！

ということはわたし(管理人)が見れても、観覧者は見れない人がいる…という事でしょうか？

もしそういうことでしたら、お手数をお掛けするかもしれませんが、ソースを教えてくださると嬉しいです。

pc
[編集]

by たすけあい

2012-04-27 11:09
返信が遅くなりすみません。しばらく閲覧していなかったので再度ご質問されたことに気がつきませんでした。とりあえず回答させていただきます。

▼HEAD・HTML詳細設定内のHEADに
<noimode><meta http-equiv="content-type" content="text/html; charset=Shift_JIS" /></noimode>
<imode><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /></imode>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<noimode><script type="text/javascript">//<![CDATA[
if (document.getElementById)
document.write('<style type="text/css"> .tree { display: none; }<'+'/style>');
function tree(id) {
if (document.getElementById(id).style.display == "block") document.getElementById(id).style.display="none";
else document.getElementById(id).style.display="block";
}
//]]>
</script></noimode>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
/*ページに、各端末共通で指定したいCSSが他にあればここに記述（セレクタ指定）*/
</style>

▼XHTMLに変換するデフォルト設定

▼レイアウト編集内
<span onclick="tree('section-1');" title="クリックしてください" style="color:#5a7e3d;font-size:medium;cursor:pointer; cursor:hand;">コンテンツ内リンク</span><div id="section-1" class="tree">├<a href="URL" title="リンク先の簡単な説明。小説なら（ファンタジー）">小説</a>
└<a href="URL" title="交流の場">掲示板</a></div>

<span onclick="tree('section-2');" title="クリックしてください" style="color:#5a7e3d;font-size:medium;cursor:pointer; cursor:hand;">外部リンク集</span><div id="section-2" class="tree">├<a href="URL" title="お友達">サイト名</a>
└<a href="URL" title="お友達">サイト名</a></div>

▼説明
上記の設定は、JavaScript及びCSS対応端末は文字クリックでDOMによるリンク一覧が開閉するツリーメニューの表示であり、非対応端末及び端末側の設定でJavaScriptやCSSをOFF設定の端末にもリンク可能になるように、ツリーメニューは開いた状態のままで通常のリンク一覧が表示する設定です。

▼ご覧のように、レイアウト編集内の各ツリーメニューごとのidは違うid名にします。（ページ内に同じid名は使えない仕様だから）

▼javascriptのdocument.writeは、XMLでは使わないほうがいいのですが、ナノさまはdocomo携帯以外はtext/html（ブラウザはHTML文書だと認識するため）の出力なので問題ないです。

▼スマートホンを考慮する場合は、上記にプラスして、指でタップしやすいようにulやliタグを使い、CSSにてaタグをdisplay:block指定のブロックレベル要素にさせて、リンク領域を広くしてあげると親切だと思います。
（今回は省略しソースコードは提示していませんが）

943SH
[編集]

by はろ

2012-04-28 10:15
たすけあいさん＞＞
あわわ、いえこちらこそややこしい事をしてしまって…申し訳ありません。

詳しくありがとう御座います！また暫らくして書き込ませて頂くかもしれませんが、ありがとう御座いました！

pc
[編集]

[＃次]

[