Я нахожусь в процессе разработки нижнего меню с использованием CSS и jQuery.По сути, это постоянное меню, которое дает пользователям быстрый доступ к различным функциям сайта.
Панель состоит из маленьких значков (класс «menu-item»), которые при наведении мыши отображают небольшое контекстное меню с несколькимиопции.Параметры внутри этого div должны быть активными, но сам значок изображения также должен быть связан.
HTML имеет следующую структуру, где CSS для #profile определяет конкретное изображение для кнопки.
<div id="profile" class="menu-item">
<div id="profile-tip" class="tip tip-submenu">
<div class="tip-profile">--Profile Content--</div>
</div>
</div>
Когда изображение наведено, становится видимым div-раздел «profile-tip», что достигается с помощью следующего javascript
$(".menu-item").hover(function() {
$(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
$(this).find("div").hide();
});
});
В двух словах, я хочу, чтобы значок профилей был кликабельными скажем, ссылка на страницу "profiles.php".Я думал, что это может быть легко достигнуто путем применения следующего:
<div id="profile" class="menu-item" onClick="window.location.href='profiles.php'">
<div id="profile-tip" class="tip tip-submenu">
<div class="tip-profile">--Profile Content--</div>
</div>
</div>
Когда это решение применяется, оно вызывает любые щелчки, сделанные во всплывающем меню (т.е. не на самом значке), чтобы также связатьв том же месте.
Большое спасибо, если вы можете расшифровать вышеупомянутое и оказать некоторую помощь.Готов предоставить больше информации, где это необходимо.