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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
フレームページが表示されない...
-
フレームの中にフレーム
-
下に表示されるスクロールバー...
-
リストの項目を隠す/表示する方...
-
htmlフレームのようにcssで作る...
-
フレーム(左)のスクロールバー...
-
【IE】iframeで呼び出したH...
-
フレームを使ったページの全体...
-
フレームのずれを直す方法
-
HTMLからフォルダを開きたい
-
googleドライブで、PDFファイル...
-
java_run.batがダウンロードで...
-
URLDownloadToFile でダウンロ...
-
ヤフオク画像が見れない
-
リンク切れを修復
-
ソースの追加行数と変更行数
-
VBA URLDownloadToFileについて
-
楽天でiFrameを利用したいので...
-
FC2ホームページの背景色が変わ...
-
htmlの中にexcelが埋め込むには...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
どのページもすべて同じURLなの...
-
pythonのエラーについての質問...
-
フレームの片方だけを更新(リロ...
-
ページが変わっても同じ音楽を...
-
WebサイトでHTMLのフォームに隠...
-
フレームの表示と非表示の切り替え
-
HPのメニューを簡略化させる方法
-
frameの内容が表示されない
-
フレーム分割した全体をスクロ...
-
フレーム内でトップに戻るよう...
-
URLを変えないで表示する方法
-
2つのページを重ねたい
-
限界に来てしまいました、教え...
-
htmlフレームのようにcssで作る...
-
【至急!!助けて!】【スマホ...
-
フレームで指定している送信先...
-
フレームなしのページからフレ...
-
ページの表示
-
HTMLでページの余白を設定したい。
-
フレームで困ってます。。助け...
おすすめ情報