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

締切済

質問者：march-set
質問日時：2011/07/05 12:31
回答数：3件

こんんちは。
cssでホームページ作成中なのですが、独習では解決できない点があり
ご教授いただけたら幸いです！

下記サイトのテンプレートをもとに、カーソルを合わせるとドロップダウンで
階層メニューが表示されるサイドメニューをつくりました。
http://www.webdlab.com/template/dropdownmenu2/

カーソルオンで反転＋階層メニューの表示はクリアできたのですが。。

各ページを開いたときに、現在表示されているページにあたる箇所は、
カーソルが離れても文字を反転させたまま、またその階層メニューも常に表示の状態にしたいのです。

テンプレートCSSにうまく加筆できればと思ったのですが、うまくいきません。

何か方法はないでしょうか。

どうぞよろしくお願いします！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2011/07/05 20:08

リンク先のHTMLもCSSもあまりに酷いので・・

javascriptで、カレントディレクトリ、カレントファイルを取得してHTMLを書き直します。
カレントディレクトリにはclass名をcurentDir,ファイルにはcurentFileを追加します。
ウェブ標準でのHTMLとCSS・・どちらもとってもシンプルです。--ウェブ標準ですから当然ですが・・
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み。
下記ソースは、タブインデントを＿＿に置換してアルルので戻して。
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>

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2011/07/05 13:44

各ページで開かれているリストは異なるものですから、まったく同じソースでは無理です。

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などの擬似クラスで・・

- 0
- 件

通報する

No.1

回答者： hinananana
回答日時：2011/07/05 13:20

ドロップダウンメニュー（縦）を見てやりました。

あっていますかね？ｗ

まず
＞カーソルが離れても文字を反転させたまま

各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;

を追加

＞またその階層メニューも常に表示の状態にしたいのです。

すいませんがこちらのこちらのやり方はわかりません…