Jquery菜单从屏幕底部向上滑动悬停 [英] Jquery menu slide up from from bottom of screen on hover
本文介绍了Jquery菜单从屏幕底部向上滑动悬停的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我只想显示固定在屏幕底部的菜单短语music,newsletter,contact。在悬停时,我希望他们向上滑动并显示隐藏的内容。这正是我的意思:
I want to only show the menu phrases "music, newsletter, contact" fixed at the bottom of the screen. On hover I want them to slide up and reveal hidden content. here's exactly what I mean:
查看屏幕底部。任何人都知道这将如何完成?谢谢。
See the bottom of the screen. Anyone know how this would be accomplished? Thank you.
推荐答案
将隐藏的内容放入div中,例如;
Put your hidden content into a div such as;
<div class="hiddenContent">...</div>
然后在页面底部为您的链接添加类别:
Then give your links at the bottom of the page a class such as;
<a href="#" class="bottomLink">Music</a>
然后告诉Jquery当你将鼠标悬停在链接上时显示隐藏的内容;
Then tell the Jquery to show the hidden content when you hover over the link;
$('.bottomLink').hover(
function () {
// Show hidden content IF it is not already showing
if($('.hiddenContent').css('display') == 'none') {
$('.hiddenContent').slideUp('slow');
}
},
function () {
// Do nothing when mouse leaves the link
$.noop(); // Do Nothing
}
);
// Close menu when mouse leaves Hidden Content
$('.hiddenContent').mouseleave(function () {
$('.hiddenContent').slideDown('slow');
});
这篇关于Jquery菜单从屏幕底部向上滑动悬停的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文