Справка по меню jQuery и CSS! - PullRequest
Новая
       21

Справка по меню jQuery и CSS!

2 голосов
/ 29 марта 2011

Я пытаюсь создать строку меню, которая прилипает к нижней части экрана.Из-за его положения на экране я не могу использовать теги привязки для гиперссылок, потому что в Google Chrome появляется небольшая панель ссылок в нижнем углу (которая перекрывает верхнюю часть меню).

Таким образом,каждый значок меню представляет собой DIV с уникальным идентификатором (например, «профиль»), и к нему применяется класс «пункт меню».Каждый из этих значков будет ссылаться на определенную страницу при нажатии (например, почему я хочу использовать событие onClick javascript).Однако, когда каждый из этих значков наведен на него, над ним появляется контекстная подсказка (или подменю).Внутри этой подсказки есть дополнительные опции или ссылки.Следовательно, я придумал следующую HTML-конструкцию: 

  example image located here: http://i.stack.imgur.com/hZU2g.png

Каждый значок меню будет иметь свою собственную уникальную ссылку onClick, а также свое собственное уникальное подменю / всплывающую подсказку (которая может иметь больше ссылок на разные страницы).

Я использую следующий jQuery для всплытия каждого подменю: 

$(".menu-item").hover(function() {
    $('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
    $('#' + this.id + '-tip').hide();
}
);

У меня проблема с отображением подсказки, когда курсор перемещается с значка наподменю / всплывающая подсказка (в настоящее время оно исчезает, когда значок больше не отображается).Я хочу, чтобы эффекты jQuery fadein и fadeout применялись к появлению всплывающей подсказки / подменю.

Комментарии, предложения, код и примеры jsfiddle будут высоко оценены.С удовольствием уточню, если мне неясно по каким-либо аспектам.

Заранее спасибо.

1 Ответ

1 голос
/ 29 марта 2011

Вам необходимо заключить пункт меню и всплывающие ссылки в родительский элемент div следующим образом: 

<div class="item-wrapper" rel="profile">
    <div id="profile" class="menu-item"></div>
    <div id="profile-tip" class="tip">
        <a href="link1.php">Link1</a>
        <a href="link2.php">Link2</a>
    </div>
</div>

Затем применить функцию наведения на .item-wrapper и ссылаться на атрибут rel (илилюбой другой атрибут по вашему выбору): 

$(".item-wrapper").hover(function() {
    $('#' + $(this).attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
    $('#' + $(this).attr("rel") + '-tip').hide();
});

Таким образом, когда вы наводите курсор мыши на ссылки, вы все равно будете зависать над .item-wrapper div.

ОБНОВЛЕНИЕ:

Чтобы ответить на дополнительный вопрос, вам нужно будет использовать setTimeout(): 

var item_wrapper = {
    onHover: function($obj, delay) {
        setTimeout(function() {
            $('#' + $obj.attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
        }, delay);
    },
    offHover: function($obj, delay) {
        setTimeout(function() {
            $('#' + $obj.attr("rel") + '-tip').hide();
        }, delay);
    },
    initHover: function($obj, delay) {
        $obj.hover(function() {
            item_wrapper.onHover($(this), delay);
        }, function() {
            item_wrapper.offHover($(this), delay);
        });
    }
};

item_wrapper.initHover($(".item-wrapper"), 1000);

Второй аргумент setTimeout() - это задержка в миллисекундах.

...