2012-03-19 53 views
1

ページが選択されているときにメニューの色を変更するにはどうすればよいですか?メニューバーの現在のページをハイライト表示

例:私は、メニューバーで選択されたページ表示したい

ホームよくある質問contact_us。私はCSSを使っていますが、これについてどうやって行くのかはわかりません。

私のCSSコード:

.menu { 
    float: left; 
    margin: 0px 0 0 0; 
    width: 1000px; 
    } 
    .menu li { 
    border-left: 1px solid #fff; 
    float: left; 
    line-height: 1em; 
    text-align: center;} .menu li a { color: #fff; 
    display: block; 
    font: 17px Arial, Helvetica, sans-serif; 
    padding: 0px 31px;  
    line-height:47px; 
    text-decoration: none; 
     } 
    .menu li a span {display:block; padding:0px 15px;} 
    .menu li a:hover, .menu .active a{color:#fff; 
    background:#ed1f26 url(images/menuleft.jpg) left top no-repeat; 
    width:auto; 
    } 
    .menu li a:hover span, .menu .active a span 
    {background: url(images/menuright.jpg) right top no-repeat; 
    padding:0px 14px; 
    border:1px solid #b3c302; 
    } 
+0

メニューをハードコーディングしていますか、翻訳を使用していますか? –

+0

私はちょうどアクティブなページに使用される私のCSSを追加します – ruby

+0

あなたはそのもののための任意のメニュータブモジュールを使いましたか? – Rafee

答えて

2

さて、あなたは(あなたのコメントからケースのようだとして)各ページにメニューを書いている場合は、特定の背景色を変更することからあなたを止めるものは何もありませんそのページに関連する<li>

以下の例では、現在のページ(ホーム)の白い背景または非アクティブなページのデフォルトの色を示しています。

<li style="background-color:rgb(255,255,255);">Home</li> 
<li>FAQ</li> 
<li>Contact Us</li> 

またあなたには、いくつかのスクリプトを使用して、私はこのフィドルで行っているようにタブを作成することができます。http://jsfiddle.net/gstubbenhagen/zAbmA/

をあなたはドンとして各ページにあまりにも多くのコンテンツを持っていない場合、私はタブだけをお勧めします1つの非常に大きなページを作って、遅い接続で永遠にロードするようにしたい。

注:提供された例は、jQueryプラグインを使用して、タブのオプションを使用して、あなたは再コードをしようとしていない場合は、同じツールを追加することを確認した場合。

関連する問題