Я использую стандартное меню asp.net в веб-приложении asp.net 4.0. Чтобы уточнить, это стандартное веб-приложение, это не любая версия приложений MVC.Asp.NET 4.0 Управление меню: активный стиль сохраняется после выключения мыши
Это проблема, с которой я сталкиваюсь.
На самом деле это довольно простая настройка. У меня есть css, охватывающий различные состояния меню:: link,: visited,: hover и: active.
Как вы подозреваете, между этими состояниями существуют заметные различия. Кроме того, у меня есть работа javascript, которая выделяет ссылку на текущую страницу, что является еще одним довольно нормальным действием. Пока ничего загадочного или затмения.
Проблема возникает, когда люди начинают щелкать по меню. Допустим, вы находитесь на главной странице. Выделяется первый пункт меню. Скажем теперь - по какой-то причине только пользователь может придумать - вы нажимаете и перетаскиваете один из элементов меню. Это не должно быть далеко, это может быть только миллиметр или два. Ожидаемое поведение заключается в том, что перетаскивание приведет к сглаживанию щелчка, страница останется там, где она есть, и перетащил мышью меню, чтобы вернуться в прежнее состояние.
На самом деле происходит то, что перетаскивание отменяет щелчок, страница остается там, где она есть, и элемент меню, перетаскиваемый щелчком, по-видимому, сохраняет активный стиль, если он существует, или стиль: hover, если: активный стиль не там.
репликации:
Казалось бы, что это может быть ошибка в меню Asp.Net, хотя.
Чтобы попытаться воспроизвести проблему за пределами моего проекта, я создал стандартный проект веб-приложения Asp.NET с использованием шаблона в VS2010.
Я изменил одну строку на Site.css - в частности, я изменил: активный стиль в div.menu ul li a: активный цвет: красный;
Затем я уволил приложение, нажал на пункт меню «Главное» и перетащил его на пару миллиметров.
Конечно, когда я отпустил указатель мыши, элемент меню застрял в активном стиле.
Тестирование
Первоначально я нашел проблему в IE8, однако он по-прежнему существует в IE9, а также в Firefox/Aurora.
Chrome и Safari, однако, верните элемент меню обратно в его предполагаемое состояние, в основном. Они оба оставляют светящийся эффект по краям элемента. Я не тестировал его в Opera.
.... Прибыль?
Я прочесываю сеть, ища решение для этого и просто не могу ее найти. На самом деле, очень сложно найти ссылку на проблему, ближайший я пришел на одну из справочных страниц Sitepoint, где упоминается нечто похожее на ошибку в 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');
}
});
});
У меня есть наполовину испеченное решение, которое я только что пытался опубликовать, только чтобы сообщить, что моя репутация недостаточно высока, чтобы ответить на вопрос в течение восьми часов после его публикации. Все хорошо, я отправлю ответ, как только смогу. – inksmithy