締切済み

CSS ドロップダウンメニュー　ページごとに固定

2011/07/05 12:31

こんんちは。 cssでホームページ作成中なのですが、独習では解決できない点がありご教授いただけたら幸いです！下記サイトのテンプレートをもとに、カーソルを合わせるとドロップダウンで階層メニューが表示されるサイドメニューをつくりました。 http://www.webdlab.com/template/dropdownmenu2/ カーソルオンで反転＋階層メニューの表示はクリアできたのですが。。各ページを開いたときに、現在表示されているページにあたる箇所は、カーソルが離れても文字を反転させたまま、またその階層メニューも常に表示の状態にしたいのです。テンプレートCSSにうまく加筆できればと思ったのですが、うまくいきません。何か方法はないでしょうか。どうぞよろしくお願いします！

march-set
お礼率79% (27/34)

CSS
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/07/05 20:08 回答No.3

リンク先のHTMLもCSSもあまりに酷いので・・ javascriptで、カレントディレクトリ、カレントファイルを取得してHTMLを書き直します。カレントディレクトリにはclass名をcurentDir,ファイルにはcurentFileを追加します。ウェブ標準でのHTMLとCSS・・どちらもとってもシンプルです。--ウェブ標準ですから当然ですが・・ ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。下記ソースは、タブインデントを＿＿に置換してアルルので戻して。 CSSは、下記を参考に「ウェブ標準なのでCSSもわかりやすいはず」カスケーディングスタイルシートですから、カスケーディング機能を使うべきです。一切無駄なclass名やidは使われていませんからHTMLもCSSも簡単でメンテナンスも容易 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿＿<title>サンプル</title> ＿＿<meta name="author" content="ORUKA1951"> ＿＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿＿<link rel="START" href="../index.html"> ＿＿<style type="text/css">  ＿＿</style> </head> <body> ＿＿<div class="header"> ＿＿＿＿<h1>サンプル</h1> ＿＿＿＿<div class="nav"> ＿＿＿＿＿＿<ol> ＿＿＿＿＿＿＿＿<li><a href="./abc/index.html">あいうえお</a> ＿＿＿＿＿＿＿＿＿＿<ol> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="./abc/efg.html">かきくけこ</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="./abc/hij_2.html">さしすせそ</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="./abc/klmn.html">たちつてと</a></li> ＿＿＿＿＿＿＿＿＿＿</ol> ＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿＿<li class="curentDir"><a href="./efg/index.html">なにぬねの</a> ＿＿＿＿＿＿＿＿＿＿<ol> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="./efg/abc.html">はひふへほ</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li class="curentFile"><a href="./efg/efg.html">まみむめも</a></li> ＿＿＿＿＿＿＿＿＿＿</ol> ＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿＿<li><a href="./hij/index.html">やゆよ</a> ＿＿＿＿＿＿＿＿＿＿<ol> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="./hij/abc.html">らりるれろ</a></li> ＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="./hij/efg.html">わゐうゑを</a></li> ＿＿＿＿＿＿＿＿＿＿</ol> ＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿</ol> ＿＿＿＿</div> ＿＿</div> </body> </html>

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/07/05 13:44 回答No.2

各ページで開かれているリストは異なるものですから、まったく同じソースでは無理です。 javascriptだとカレントを取得してHTMLを書き直すことになります。 CSSなら、各リストを変えておきます。 <ol> ＿＿<li><a href=""></a> ＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href=""></a></li> ＿＿＿＿＿＿<li><a href=""></a></li> ＿＿＿＿＿＿<li><a href=""></a></li> ＿＿＿＿</ol></li> ＿＿</li> ＿＿<li class="curentDir"><a href=""></a> ＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href=""></a></li> ＿＿＿＿＿＿<li class="curentFile"><a href=""></a></li> ＿＿＿＿</ol></li> ＿＿</li> ＿＿<li><a href=""></a> ＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href=""></a></li> ＿＿＿＿＿＿<li><a href=""></a></li> ＿＿＿＿</ol> ＿＿</li> </ol> あとは通常の:hover,:visited,:active,:focusなどの擬似クラスで・・

hinananana
ベストアンサー率69% (16/23)

2011/07/05 13:20 回答No.1

ドロップダウンメニュー（縦）を見てやりました。あっていますかね？ｗまず＞カーソルが離れても文字を反転させたまま各HTMLページのaタグを外し CSSに #ddR1 li { display: block; width: 100px; height: 25px; text-align: center; background: url(img/gnavi_bg_on.gif) no-repeat top left; } があるので line-height: 2.1; color: #f0f0f0; を追加＞またその階層メニューも常に表示の状態にしたいのです。すいませんがこちらのこちらのやり方はわかりません…