Asp.NET 4.0メニューコントロールa：マウスをリリースした後もアクティブなスタイルが維持されます

Question

asp.net 4.0 Webアプリケーションで標準のasp.netメニューを使用しています。明確にするために、これは標準的なWebアプリケーションです。利用可能なMVCアプリケーションのバージョンはありません。

これは私が抱えている問題です。

これはかなり簡単な設定です。私はCSSの様々な状態をオーバーライドしています：link、：visited、：hover、：active。

疑いがあるように、これらの状態には目に見える違いがあります。また、現在のページのリンクをハイライト表示するjavascriptをいくつか実行していますが、それはかなり正常な動作です。今のところ不思議なことはありません。

問題は、人々がメニューをクリックし始めたときに発生します。あなたはホームページにいると言います。最初のメニュー項目が強調表示されます。ユーザーが思いつくことができる理由が何であれ、メニュー項目の1つをクリックしてドラッグすると、今言いましょう。遠くにある必要はありませんが、それはわずか1ミリメートルまたは2ミリメートルにすることができます。予想される動作は、ドラッグがクリックを無効にし、ページがその場所に留まり、クリックドラッグされたメニューが元の状態に戻ることです。

実際には、ドラッグがクリックを無効にし、ページがその位置にとどまり、クリックドラッグされたメニューアイテムが：アクティブなスタイルを保持しているように見えるか、または：アクティブなスタイルが：そこ。

レプリケーション：

しかしAsp.Netメニューにかかわる問題である可能性が表示されます。

私のプロジェクトの外で問題を再現しようとすると、私はVS2010のテンプレートを使ってbogの標準Asp.NET Webアプリケーションプロジェクトを作成しました。

Site.cssの1行を変更しました。具体的には、div.menu ul li：activeをactive：color：redに変更しました。

次に、アプリケーションを起動し、ホームメニュー項目をクリックして数ミリメートルドラッグしました。

もちろん、マウスボタンを放すと、メニュー項目は：アクティブなスタイルで止まっています。

テスト

は、私はもともとしかし、それはまだそこIE9でだけでなく、Firefoxの/オーロラであり、IE8で問題を発見しました。

ただし、ChromeとSafariでは、メニュー項目を意図した状態に戻すことがほとんどです。それらは両方とも要素の端の周りに光沢のある効果を残します。私はOperaでそれをテストしていません。

....利益がありますか？

私は、これに対する解決策を探してネットを精査しましたが、見つけられませんでした。事実、この問題への言及を見つけるのは非常に難しいです。私が一番近かったのはSitepointのリファレンスページの1つで、IE7のバグと同様のことが言及されています。

http://reference.sitepoint.com/css/pseudoclass-hover

誰もが任意のアイデアがありますか？ここで

コード

はSite.Master内のコードである - 私は過失を保護するために、メニュー項目の名前を変更しました：

<div class="topnav"> 
    <asp:menu id="topnav" runat="server" orientation="Horizontal" renderingmode="List" skiplinktext="" maximumdynamicdisplaylevels="1" viewstatemode="Enabled" > 
     <items> 
      <asp:menuitem navigateurl="~/Default.aspx" text="Home" value="home"></asp:menuitem> 
      <asp:menuitem navigateurl="~/Overview.aspx" text="Overview" value="overview"></asp:menuitem> 
      <asp:menuitem navigateurl="~/Benefits.aspx" text="Benefits" value="benefits"></asp:menuitem> 
      <asp:menuitem navigateurl="~/Hardware.aspx" text="Hardware" value="hardware"></asp:menuitem> 
      <asp:menuitem navigateurl="~/SDK.aspx" text="Develop" value="SDK"></asp:menuitem> 
     </items> 
    </asp:menu> 
</div> 

私はそれでだが、私もよこのメニューに当てはまるCSSを投稿してください。

.right .topnavcont 
{ 
    width: 767px; 
    background-color: #dddddd !important; 
    height: 22px; 
} 

.topnav #topnav li 
{ 
    float: left; 
} 

.topnav 
{ 
    background-color: #ddd;  
    line-height: 22px; 
    float: right; 
    margin-right: 11px; 
    background: url(../img/shadow.gif) repeat-y top right; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    color: #777; 
    text-align: center; 
} 

.topnav li 
{ 
    width: 109px; 
} 

.topnav a:link, .topnav a:visited 
{ 
    color: #777; 
    display: block; 
    background-image: url(../img/bg_n-s.gif); 
    background-repeat: repeat-x; 
    text-decoration: none; 
    visibility: visible; 
} 

.topnav a:hover 
{ 
    color: #fff !important; 
    background-image: url(../img/bg_h-s.gif); 
    display: block; 
    visibility: visible; 
} 

.topnav a:active 
{ 
    background-image: url(../img/bg_a-s.gif); 
    display: block; 
    color: #fff; 
    visibility: visible; 
} 

.topnav .current 
{ 
    color: #fff !important; 
    background-image: url(../img/bg_h-s.gif) !important; 
} 

最後に、私はこのメニューを支援するためにページ上で実行しているjavascriptです。

$(function() 
{ 
    var pathname = (window.location.pathname.match(/[^\/]+$/)[0]); 
    $('.topnav ul li a').each(function() 
    { 
     if ($(this).attr('href') == pathname) 
     { 
      $(this).addClass('current'); 
     } 
    }); 
}); 

Answer 1

私の髪を引き裂くと、バスケット織りのキャリアを検討した後、私は私がこれまでの半分焼いた解決策を考え出すために管理していると思います。

秘密は、CSSの擬似クラスを適切に処理するAsp.Netメニューコントロールの完全な失敗にあります。

上記のコードでは、問題が発生していたa：active疑似クラスを定義していました。

擬似クラスを使用したくない場合は、設計時にWebコントロールに公開されているプロパティを使用する必要があります。だから、年齢古い：リンク：訪問：ホバー：アクティブな疑似クラスを使用する代わりに、代わりにstaticselectedstyle-cssclassというプロパティを設定することになっています。

これは少し冗長で直観的ではありませんが、必ずしも悪いことではありません。

覚えておくべきことは、何らかの理由でブラウザが各クラスのビットとピースだけを拾っているように見えるので、要素をターゲットとするアクティブ擬似クラスがstaticselectedstyle-cssclassコードの前にないことを保証することです。その間に間違っている。

はだから今、topnavのための私のCSSは次のようになります。私は、メニューのボタンをクリックする行為をしたいないので、しかしアクティブ疑似クラス：

.topnav 
{ 
    background-color: #ddd; 
    /*margin-top: 1px;*/ 
    line-height: 22px; 
    float: right; 
    margin-right: 11px; 
    background: url(../img/shadow.gif) repeat-y top right; 


    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    color: #777; 
    text-align: center; 
} 

.topnav #topnav li 
{ 
    float: left; 
} 

.right .topnavcont 
{ 
    width: 767px; 
    background-color: #dddddd !important; 
    height: 22px; 
} 

.topnav li 
{ 
    width: 109px; 
} 

.topnav a:link, .topnav a:visited 
{ 
    color: #777; 
    display: block; 
    background-image: url(../img/bg_n-s.gif); 
    background-repeat: repeat-x; 
    text-decoration: none; 
    visibility: visible; 
} 

.topnav a:hover 
{ 
    color: #fff !important; 
    background-image: url(../img/bg_h-s.gif); 
    display: block; 
    visibility: visible; 
} 

topnav .staticmenuitemselected 
{ 
    color: #777; 
    display: block; 
    background-image: url(../img/bg_n-s.gif); 
    background-repeat: repeat-x; 
    text-decoration: none; 
    visibility: visible; 
} 

私はまだ完全で実験し終えていませんその派手なクッキーをすると暖かいぼんやりとした輝きを放つ。

読んでいただきありがとうございます。これは誰かを助けることを願っています。