CSSで各ページのメニューボタンをアクティブにしておく方法

質問

http://www.family.co.jp/index.htmlのヘッダーメニュー部分のように
各ページのメニューがアクティブなままになるものをCSSでやりたいのですが
どのように作ったらよろしいでしょうか。

メニューはアクティブ／非アクティブの物2つの画像でやろうと考えています。

宜しくお願いします。

回答No.4

ORUKA1951 · ベストアンサー

よく使う方法ですが・・・、自動的にしてるわけじゃなくて。
CSSの継承(カスケード)をそのまま使うだけです。

たとえば、トップページでは、
<link rel="stylesheet" type="text/css" media="screen" href="/css/General.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/content.css" />

/ABC配下のページなら
<link rel="stylesheet" type="text/css" media="screen" href="/css/General.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/content.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/ABC.css" />

/CDE配下なら
<link rel="stylesheet" type="text/css" media="screen" href="/css/General.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/content.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/CDE.css" />

要は、あるテーマないしディレクトリなどで、必要な部分のみ上書きすればよい。

　上の例の場合、
サイト全体で共通なのは、General.css
　p{ text-indent:1em;}とか、メニューの配置とか、
記事一般は、content.cssにて
　mainArticle{ width:640px;}とか・・
そして、そのグループでは、CDE.cssにて
　ul.Link a.here{ background:****;}とか

回答No.5

mohumohu23

上にもあるようなアプローチいろいろな手法があるんですが。
このファミリーマートのページでは、ヘッダーの一塊のグループを
<DIV id=HEADER>でひとつくくってますが。
たとえばファミマTカードであったばあい。
そのDIVにさらにクラス指定し
class=headerFt　これをつけ判別することで、その配下の特定部分に違ったプロパティーが反映されるようにしてます。
で、このボタンの反転は、ちょっと調べてみますと3種の違った画像がたてにならんだ1枚の絵です。
これをメニューボタンバックグラウンド表示位置をマイナス方向にいじることで1枚の絵からそれぞれのアップ画像を見せるようにしています。
http://www.family.co.jp/common/images/header_menu_navi_05.gif

お礼

みなさんへ

Jqueryを使用するとこにいたしました。
いろいろ教えていただき参考になりました。

ありがとうございました。

回答No.3

mohumohu23

その画像二つで処理するとなると、このファミマの方式とは違うけど。それでいいの？

回答No.2

singlecat

ここまでできたら、後は簡単な応用なんですが....

選択されたメニューに識別のIDを付け、背景画像を返れば良いと....

回答No.1

singlecat

▼このサイト参考にしてください。

参考URL：

http://www.cssmenumaker.com/

補足

ありがとうございます。

これだとメニューのオン/オフだけで各ページと連動してないです。。。

ファミマのWEBのように商品情報に入ったら商品情報のボタンがハイライト
のままにしておく方法が知りたいのです。