Поведение HoverMenuExtender в IE и других
Я создал иерархическое меню с использованием HoverMenuExtender. Проблема с элементами суб-меню, для которых задано enabled = false. При совмещении курсора с такими элементами меню схлопывается, как при выходе курсора за пределы меню.
Причем проблема в FireFox, Chrome. В IE все ОК, такого не происходит. Как избавиться от этого?
Заранее благодарю!
Кнопка меню:
<asp:Button ID="Administration" runat="server" CssClass="MainMenuBut" Text="Administration ►" />
Всплывающая панель:
<asp:Panel ID="AdmMenu" runat="server" CssClass="MenuPanel" Width="165px" >
Кнопки меню внутри панели:
<asp:Button ID="DeleteOldDBs" runat="server" CssClass="MainMenuBut" Text="Delete old DBs" /><br />
<asp:Button ID="FreeCache" runat="server" CssClass="MainMenuBut" Text="Free cache" /><br />
<asp:Button ID="Button4" runat="server" CssClass="MainMenuBut" Text="Other" />
</asp:Panel>
Сам расширитель:
<ajaxToolkit:HoverMenuExtender ID="AdministrationHoverMenuExtender" runat="server"
TargetControlID="Administration"
PopupControlID="AdmMenu"
PopupPosition="Bottom"
OffsetX="100"
OffsetY="0"
PopDelay="50" />
Например, кнопка "Инструменты" -> "Администрирование"
Грузится страница долго :)
Попробуйте задать им всем display: block; и border: 1px solid #f00; Нужно, чтобы границы соприкасались, иначе мышь меню потеряет и оно закроется.
Хотя, не исключено, что мышь срывается потому, что input'ы не просто скрыты, а выключены (disabled). В этом случае их можно попробовать обернуть в span или div.
Уже не помню почему... У меня реализована довольно сложная процедура обработки на клиенте команд, отсылаемых на сервер ...
Для чистоты эксперимента сделал это. См. ту же ссылку (только цвет красный заменил на прозрачный :)). Уверен, что дело не в этом. Ведь для других инпутов меню не схлопывается... К тому же промежутки - это тело панели, границы которой и определяют правило срабатывания. На промежутках меню не должно схлопываться...
Попробую. Но думаю, что "обертка" не поможет. Скорее всего придется использовать ссылки ... Одно, скажу... Глюк у браузеров очевиден
Прикольное объяснение :D Есть мысль, что input тут из-за disabled.
Вообще, однокаскадное меню (без вложенностей) можно просто сделать и на чистом CSS, если не считать IE6-. Вложенное меню сделать не намного сложнее используя CSS + JS. Я бы посоветовал переписать меню с этой точки зрения, ибо в вашем коде я толком не разобрался.
Вкратце, скрипт вешает на все <a>, <input> или другой тег в контейнере меню обработчик onmousemove/out, где в первом - добавляет, во втором - убирает определённый className у всех родительских элементов от элемента, вызвавшего событие, и до общего контейнера меню.
Вместо className можно просто изменять style.display, если не нужно менять вид пунктов меню средствами CSS.
Просто не хотелось втягиваться в долгие объяснения :) Но, если любопытно... Мне было необходимо поддерживать как бы "многооконную" технологию работы. Для этого нужно сохранять текущее состояние клиентского интерфейса. Сохраняю я его на клиенте, а не на сервере. Для этого и нужны кнопки, чтобы перехватывать клики на них и сохранять в буфере на клиенте команды, уже переданные на сервер. Когда я жму на кнопку, на сервер посылается не одна команда, а несколько уже запомненных в буфере плюс одна... Существует определенная логика стирания отдельных команд из буфера. Не говорю, что решение супер, но оно такое сейчас...
Вообще, однокаскадное меню (без вложенностей) можно просто сделать и на чистом CSS, если не считать IE6-.
Ну да... можно. Следуя этой логике можно всю библиотеку AJAX от MS выкинуть...
Что касается проблемы, то я ее решил все-таки. Пришлось отказаться от disabled. Вместо этого "убираю" вложенное меню. Большое спасибо всем за участие :)
Согласен. Можно было кнопку из других примитивов сделать... Просто, до момента возникновения обсуждаемой проблемы, с подобной особенностью input не был знаком и не заморачивался отличиями ...