http://lilypond.org/doc/v2.12/Documentation/user …
のページのサイド メニューを実現したいです。
このサイド メニューはセクション (小節) をクリックすると、
1. そのセクションに属するサブセクションの項目が表示され
2. 右側のメイン部分にそのセクションが表示される
3. このとき、サイド メニューで他のセクションのサブセクションが表示されている場合はそれを隠す
という動作になっています。
http://lilypond.org/doc/v2.12/Documentation/user …
を使っているらしいということはわかったのですが、そこで行き詰まっています。
調べていて、JavaScript を使って同じような機能を実現する方法も見つけたのですが、上記のページでは JavaScript を使っていないようですし、動作も異なります。
どなたか上記のページのサイド メニューの動作を実現する方法を教えていただけないでしょうか。お願いいたします。
※趣味で上記のページの和訳を行っているのですが、サイド メニューが作れず困っています。
No.1ベストアンサー
- 回答日時:
勝手な推測ですが、フレームで構築していると思っていらっしゃるから混乱しているんじゃないでしょうか?
該当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;
}
勝手な推測ですので、万一既知であったり見当違いでしたらすみません。
この回答への補足
さっそくの回答ありがとうございます。
フレームではなく CSS を使っていることには気づいていました。が、
> http://lilypond.org/doc/v2.12/Documentation/user …
> を使っているらしいということはわかったのですが、そこで行き詰まっています。
と記述してしまったのでフレームだと誤解していると思われてしまったようです。記述の仕方がまずかったですね 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
のようなものを使用するつもりです。
また、この方法に限らず他の方法がありましたら教えていただきたいです。
よろしくお願いいたします。
問題を解決できました。
wiki クローン ソフトでサイトを構築しています。
1. サイド メニューのページを作成する。
・表示/非表示を切り換える項目は DIV で囲って display:none で非表示にする。
・非表示の項目を表示するための javaScript 関数を記述する。
2. 2 列構成の CSS ファイルを作成する。
3. 各ページを記述する。
・2. の CSS ファイルを使って、左側の列にサイド メニューを表示させる。
・javaScript 関数を呼び出して該当する項目を表示させる。
という手順になりました。
eg_nn さんの回答のおかげで解決の道筋ができました。ありがとうございました!m(_ _)m
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Word(ワード) wordでセクションを区切っているのに、ページ番号の設定が連動してしまいます。対応を教えてください! 2 2022/05/25 12:36
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- Word(ワード) Google ドキュメントで改ページを挿入する方法 1 2022/05/25 19:22
- Visual Basic(VBA) ActiveReportのサブレポート機能を利用したときに1ページ目の1サブレポート目が表示されない 1 2023/08/19 06:10
- その他(Microsoft Office) Microsoft Edgeの「ニュースと関心事項」についてお聞きします。 3 2023/05/22 12:08
- Visual Basic(VBA) ActiveReportのdetailをデータセットの自動バインドを使って帳票を出力しています。 1 2023/08/16 07:16
- IT・エンジニアリング ActiveReportのdetailをデータセットの自動バインドを使って帳票を出力しています。 1 2023/08/16 07:17
- オープンソース AWSドメイン名でApacheテスト・ページを表示させる方法を教えて下さい。 1 2023/04/26 15:59
- PHP PHP ページング データベース 1 2022/06/16 10:30
- gooブログ GOOブログ(有料版)内の本文以外の右サイド部分の項目の上下を入れ替えたいのですが。 1 2022/04/08 10:03
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
WebサイトでHTMLのフォームに隠...
-
スクロールできない
-
CSSによるFrameの代替方法
-
pythonのエラーについての質問...
-
フレーム別に更新
-
html 左メニューから右への表示...
-
フレームページで表を表示させ...
-
フレームが表示できません
-
フレームなしのページからフレ...
-
フレーム分割しているページで...
-
フレームの片方だけを更新(リロ...
-
フレームページが表示されない...
-
2つのページを重ねたい
-
ホームページでファイルをダウ...
-
<!DOCTYPE html>あってますか?...
-
<!DOCTYPE html>あってますか?...
-
HTMLからフォルダを開きたい
-
form action="#"
-
iPadの標準ブラウザでローカルH...
-
<!DOCTYPE html>あってますか?↑
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
どのページもすべて同じURLなの...
-
フレーム内のPHPへPOSTで情報を...
-
pythonのエラーについての質問...
-
2つのページを重ねたい
-
フレームの片方だけを更新(リロ...
-
html 左メニューから右への表示...
-
URLを変えないで表示する方法
-
フレームページが表示されない...
-
スクロールできない
-
フレームで指定している送信先...
-
フレームが表示されない><
-
html リンクを別フレームに表...
-
ブラウザで4分割表示できますか?
-
直リンクとは。
-
frameの内容が表示されない
-
HTMLファイルの置き方による読...
-
CSSを使って画像をクリックする...
-
フレーム分割した全体をスクロ...
-
フレームの表示と非表示の切り替え
-
HPの一部に他のHPを表示
おすすめ情報