リストの項目を隠す/表示する方法について

質問

http://lilypond.org/doc/v2.12/Documentation/user/lilypond-learning/index
のページのサイド メニューを実現したいです。

このサイド メニューはセクション (小節) をクリックすると、
1. そのセクションに属するサブセクションの項目が表示され
2. 右側のメイン部分にそのセクションが表示される
3. このとき、サイド メニューで他のセクションのサブセクションが表示されている場合はそれを隠す
という動作になっています。

http://lilypond.org/doc/v2.12/Documentation/user/lilypond-learning/index_toc#SEC_Contents
を使っているらしいということはわかったのですが、そこで行き詰まっています。

調べていて、JavaScript を使って同じような機能を実現する方法も見つけたのですが、上記のページでは JavaScript を使っていないようですし、動作も異なります。

どなたか上記のページのサイド メニューの動作を実現する方法を教えていただけないでしょうか。お願いいたします。

※趣味で上記のページの和訳を行っているのですが、サイド メニューが作れず困っています。

回答No.1

eg_nn · ベストアンサー

勝手な推測ですが、フレームで構築していると思っていらっしゃるから混乱しているんじゃないでしょうか？

該当URLのページはフレームを使っていません。
フレームっぽく見せているだけで、実際にはひとつのHTMLです。
CSSで2カラム作り、1つのページ内にメニューもコンテンツも記述しています。
1ページごとにメニューを記述しているので、ページごとにメニューを消したり増やしたりするのは造作も無いわけです。

フレームっぽく見せているのは、
メニュー、コンテンツをDIVでくるみ、

<div id="main">
コンテンツ
</div>
<div id="menu">
メニュー
</div>

該当URLページは、上記DIVに以下のようなCSSを指定しています。

#menu{
right:73%;
top:0;
bottom:0;
left:0;
margin:0;
padding:0;
z-index:100;
overflow:auto;
position:absolute;
position:fixed;
}
#main {
left:27%;
top:0;
bottom:0;
right:0;
margin:0;
padding:0;
overflow:auto;
position:absolute;
}

勝手な推測ですので、万一既知であったり見当違いでしたらすみません。

お礼

問題を解決できました。
wiki クローン ソフトでサイトを構築しています。

1. サイド メニューのページを作成する。
　・表示/非表示を切り換える項目は DIV で囲って display:none で非表示にする。
　・非表示の項目を表示するための javaScript 関数を記述する。
2. 2 列構成の CSS ファイルを作成する。
3. 各ページを記述する。
　・2. の CSS ファイルを使って、左側の列にサイド メニューを表示させる。
　・javaScript 関数を呼び出して該当する項目を表示させる。
という手順になりました。

eg_nn さんの回答のおかげで解決の道筋ができました。ありがとうございました！m(_ _)m

補足

さっそくの回答ありがとうございます。

フレームではなく CSS を使っていることには気づいていました。が、
> http://lilypond.org/doc/v2.12/Documentation/user/lilypond-learning/index_toc#SEC_Contents
> を使っているらしいということはわかったのですが、そこで行き詰まっています。
と記述してしまったのでフレームだと誤解していると思われてしまったようです。記述の仕方がまずかったですね m(_ _)m

回答をもらってもう一度見直してみたところ、各ページにサイド メニューのリストのソースをそのまま書いてあるだけということがわかりました^^;
、、、と書いていて、en_gg さんの回答の
> 1ページごとにメニューを記述しているので、ページごとにメニューを消したり増やしたりするのは造作も無いわけです。
の意味も理解できました！ありがとうございます。

しかしこの方法だとあんまりなので (100前後のページすべてにメニューを記述するのは手間もディスク容量ももったいないので)、
> このサイド メニューはセクション (小節) をクリックすると、
> 1. そのセクションに属するサブセクションの項目が表示され
> 2. 右側のメイン部分にそのセクションが表示される
> 3. このとき、サイド メニューで他のセクションのサブセクションが表示されている場合はそれを隠す
という動作を実現する方法がありましたら、教えていただけないでしょうか。

おそらく、フレームと JavaScript を使うことになると思います。
サイド メニュー側でセクションへのリンクをクリックすると
1. メイン フレームの内容を書き換える (target属性を使用する)
2. サイド メニュー側でそのセクションのサブ セクション項目を表示する
3. サイド メニュー側で指定されたセクション以外のセクションに属するサブ セクション項目を隠す
という動作になるでしょう。
1. と 2. は何とかなると思うのですが、3. はどうすればいいのでしょうか。
教えていただけると幸いです。

JavaScript は
http://iswebmag.hp.infoseek.co.jp/sample204.html
のようなものを使用するつもりです。

また、この方法に限らず他の方法がありましたら教えていただきたいです。
よろしくお願いいたします。