2012-03-12 14 views
1

MVC 3プロジェクトでHTML5 & CSS3を使用していますが、ナビゲーションバーに問題があります。ユーザーは、リンクにカーソルを合わせるとユーザーがHOMEページにいるときにナビゲーションバーの "HOME"リンクが選択されるようにするにはどうすればよいですか?

My navigation bar

ピンクのサブメニューが表示されます。

これは私のナビゲーションバー方法です。そして、そのすべてがCSS3なしのjavascriptで行われました。

私がしたいことは、誰かが自分のWebアプリケーション "HEM"( "HOME")を訪問したときに、それが自動的に画像のように選択されるべきことです。また、ユーザーが「ADMIN」と同じように移動すると、そこにピンクのサブメニューが常に表示されます。

どうすればできますか?以下れる

ul#nav { 
    position:relative; 
    float: left; 
    width: 961px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    /* gradient */ 
    background: url(../../Content/img/nav-tile.gif) repeat-x; 
} 

ul#nav li { 
    display: inline; 
} 

ul#nav li a { 
    float: right; 
    font: bold 12px verdana,arial,tahoma,sans-serif; 
    line-height: 40px; 
    color: #fff; 
    text-decoration: none; 
    margin: auto; 
    padding: 0 35px; 
} 

/* APPLIES THE ACTIVE STATE */ 
ul#nav .current a, ul#nav li:hover > a { 
    color: #fff; 
    text-decoration: none; 
    text-shadow: 1px 1px 1px #330000; 
    background: #dd006b; 
} 

/* THE SUBMENU LIST HIDDEN BY DEFAULT */ 
ul#nav ul { 
    display: none; 
} 

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */ 
ul#nav li:hover > ul { 
    position: absolute; 
    display: block; 
    width: 961px; 
    height: 30px; 
    position: absolute; 
    margin: 40px 0 0 0; 
    /* gradient */ 
    background: #dd006b url(../img/menu-child.png) repeat-x;  
    background: -webkit-gradient(linear, left top, left bottom, from(#dd006b), to(#a1014e)); 
    background: -moz-linear-gradient(top, #dd006b, #a1014e); 
    background: linear-gradient(-90deg, #dd006b, #a1014e); 
} 

ul#nav li:hover > ul li a { 
    float: left; 
    font: bold 12px verdana,arial,tahoma,sans-serif; 
    line-height: 30px; 
    color: #fff; 
    text-decoration: none; 
    margin: 0; 
    padding: 2 30px 0 0; 
    background: #dd006b url(../img/menu-child.png) repeat-x; 
    background: -webkit-gradient(linear, left top, left bottom, from(#dd006b), to(#a1014e)); 
    background: -moz-linear-gradient(top, #dd006b, #a1014e); 
    background: linear-gradient(-90deg, #dd006b, #a1014e); 
} 

ul#nav li:hover > ul li a:hover { 
    text-decoration: none; 
    text-shadow: none; 
} 

と "HEM" 別名 "HOME" のためのMVCの私のレイアウト:事前に

<li>@Html.ActionLink("HEM","Index","Home") 
<ul></ul> 
</li> 

おかげ

これは私のCSSです!

+0

それが動的に組み込まれている場合、それはとにかく李に.currentクラスを追加しないのですか? – Deadlykipper

+0

あなたは何を意味するのか分かりません:/ – Obsivus

答えて

0

MVC3についてはわかりませんが、Javascript/jQueryを使用すると可能です。 jQueryのを使用して はここで例: http://jsfiddle.net/MFhqW/

$('a[href="'+window.location.href+'"]').addClass('active'); 
+0

アンカーが相対リンクの場合、これはうまくいかないと思います...絶対リンクと相対リンクの両方にステートメントを追加するとよいでしょう。 –

+0

その違いは、Homeと表示されます – Obsivus

関連する問題