- ベストアンサー
CSS?
あるサイトのサイドメニューを、マウスオーバーした時にメニューのいろが変わるように設定しています。 そこまでは良いのですが、今現在閲覧しているページをメニューバーに反映させるやり方がわかりません。（閲覧中のページのメニューがマウスオーバーしている時と同じ状態） 上手な説明ができていないかも知れませんが、どなたか知恵を貸してください。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
html <body><ul id="mainMenu"> <li><a class="here" href="index.html">ＨＯＭＥ</a></li> <li><a href="page01.html">ページ01</a></li> <li><a href="page02.html">ページ02</a></li> <li><a href="page03.html">ページ03</a></li> <li><a href="page04.html">ページ04</a></li> <li><a href="page05.html">ページ05</a></li> <li><a href="page06.html">ページ06</a></li> <li><a href="page07.html">ページ07</a></li> <li><a href="page08.html">ページ08</a></li> </ul> </body> </html> に変更。HOMEのページにいると仮定します。HOMEにだけclass="here"をつけて他と区別します。 でも、スタイルはhoverとおなじでいいので、ｃｓｓでは、hoverの場所に追加します。 #mainMenu a:hover{ を #mainMenu a.here,#mainMenu a:hover{ に変えてください。 理屈を理解するより答えだけが、欲しそうだったのでとりあえず。先の理屈は忘れてください。まったく違う方法でやっています。理屈を理解したいなら、cssのセレクタの基本を勉強してください。
その他の回答 (3)
- Yama-tani
- ベストアンサー率44% (13/29)
今現在閲覧しているページにはリンクを貼らない。今いるページから今いるページへのリンクは不親切ですよね。ページが長くなる場合のリンクなら別ですが。そうすれば、他と明確に区別できます。 例えば今、メニュー3のページにいるとして <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li>メニュー3</li> </ul> css ul li{width:10em;} ul li{background:#ffaaaa;}/*マウスオーバーしている色と同じ色*/ ul li a{display:block;background:#ffffff;} ul li a:hover{background:#ffaaaa;}/*マウスオーバーしている色*/ こんな感じではどうでしょう？
お礼
ありがとうございました。
補足
駄目です。理屈が理解できません。 昨日から熱が出て、目も痛いです。 どうでしょう！? 私のタグに沿って答えを教えてはもらえませんか? 宜しくお願い致します。
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかりませんけれど… 例えば、ロールオーバーのCSSでの指定が #menu a:hover { ・・・ } のようになっているとして、 閲覧中のページの部分にだけ適当なクラス名（例えばactive）を付けてあげることにして #menu a:active, #menu a:hover { ・・・ } みたいにしてあげれば、class="active"の部分にはマウスの位置に関わらずそのCSSが反映されることになります。 class="active"などの設定をどうやるかは、サイドメニューの表示方法にもよるでしょう。 1）各ページ(HTML)内に、それぞれ同じメニューの記載をしている場合 2）サーバサイドでインクルードなどを行なっている場合 3）フレーム表示でメニュー部分を別HTMLで表示している場合 1）の場合は、それぞれのページの該当部に設定してあげればよいでしょう （スクリプトなどは不要ですし、一番簡単です） 2）の場合は、サーバ側のスクリプトで同時に設定してしまうか、それができない場合は、 各ページのHTMLにページ番号を記載しておいて、3）の様な方法を取るかでしょうか （サーバ側で処理してしまった方が、下に述べる理由もあって確実です） 3）の場合は、javascriptなどを利用して、制御してあげるとか… 各ページ内に、他のページへのリンクがある場合は、それも考慮してスクリプトを作成 する必要がありそうですね。 * javascriptを利用する場合は、ユーザがオフにしていると機能しないのでご注意を。
お礼
ありがとうございました。
補足
ありがとうございます。 ここからcss-------------------------------- #mainMenu { margin:0px 0px 10px 0px;padding:0px; } #mainMenu li { display:block; margin:0px 0px 5px 0px;padding:0px; } #mainMenu a { display:block; height:22px;margin:0px; /*メニューボタンの背景画像設定*/ background-image:url(../img2/logo1_off.png); background-repeat:no-repeat; line-height:1.2em; } #mainMenu a:link {color:#555555;text-decoration:none;padding:8px 5px 0px 30px;} #mainMenu a:visited {color:#555555;text-decoration:none;padding:8px 5px 0px 30px;} #mainMenu a:hover { color:#ffffff;text-decoration:none;font-weight:bold;padding:8px 5px 0px 30px; /*ロールオーバー時のメニューボタンの背景画像設定*/ background-image:url(../img2/logo2_on.png); background-color:transparent; } #mainMenu a:active { color:#ffffff;text-decoration:none;font-weight:bold;padding:8px 5px 0px 30px; /*クリック時のメニューボタンの背景画像設定*/ background-image:url(../img2/logo3_on.png); background-color:transparent; } cssここまで--------------------------------- htmlここから--------------------------- <ul id="mainMenu"> <li><a href="index.html">ＨＯＭＥ</a></li> <li><a href="page01.html">ページ01</a></li> <li><a href="page02.html">ページ02</a></li> <li><a href="page03.html">ページ03</a></li> <li><a href="page04.html">ページ04</a></li> <li><a href="page05.html">ページ05</a></li> <li><a href="page06.html">ページ06</a></li> <li><a href="page07.html">ページ07</a></li> <li><a href="page08.html">ページ08</a></li> </ul> htmlここまで--------------------------- すみません、物分りが悪くて・・・。 こちらを御覧頂けませんでしょうか? cssとhtmlはこのようになっています。 お世話をおかけします。 宜しくお願いします。
- metametamu
- ベストアンサー率51% (153/295)
普通のナビゲーションであれば個別にページごとに指定すればいいんじゃないでしょうか。 閲覧中のページごとに勝手に切り替わるスクリプトを書くにしても、どこかで結局指定しないとダメですし。
お礼
ありがとうございました。
補足
すみません。 個別にページ毎に指定する書き方が分かりません。 検索するにしても、どのようなキーワードで検索して良いのかが分からないのです。 差し支えなければご教授をお願いします。
お礼
ありがとうございました。