动画Jquery弹出菜单
Animated Jquery Flyout Menu
当用户单击链接时,我想让JQuery菜单有一个简单的动画。我有一个箭头指向单击的链接,但我希望箭头在单击之间设置动画。如果用户单击链接1,箭头将向右滑动;如果用户单击链路2,箭头将向左滑动。我知道我可以用".animation"。但我没能用它。
HTML/CSS
<!doctype html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="X-UA-Compatible" content="chrome-1">
<meta name="viewport" content="width=1240">
<style type="text/css">
#flyout
{ margin: 0;
padding: 0}
#flyout li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}
#flyout li a
{ display: block;
background: #20548E;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 80px;
color: #EAFFED;
white-space: nowrap}
#flyout li a:hover
{ background: #1A4473}
#flyout li ul
{ margin: 0;
padding: 0;
position: absolute;
left: 8px;
display: none;
padding-top: 10px;
border-top: 1px solid white}
#flyout li ul li
{ float: none;
display: inline;}
#flyout li ul li a
{ width: auto;
background: #9F1B1B;
width: 400px;}
#flyout li ul li a:hover
{ background: #7F1616}
</style>
</head>
<body>
<img class="arrow" src="img/arr.png" alt="arrow" style="position:absolute; top:32px; display:none;">
<ul id="flyout">
<li class="me a"><a href="#">Link 1</a>
<ul class="ul_a">
<li><a href="#">Sub A</a></li>
<li><a href="#">Sub B</a></li>
<li><a href="#">Sub C</a></li>
</ul>
</li>
<li class="me b"><a href="#">Link 2</a>
<ul class="ul_b">
<li><a href="#">Sub D</a></li>
<li><a href="#">Sub E</a></li>
<li><a href="#">Sub F</a></li>
</ul>
</li>
</ul>
JQuery
(function(){
var closetimer = 0;
var menuitem = 0;
var arrow = $('.arrow');
function animate_right () {
var ele = $('.a');
var pos = ele.offset();
var left = pos.left;
var total = left+48;
arrow.show().css('left', total);
}
function animate_left () {
var ele = $('.b');
var pos = ele.offset();
var left = pos.left;
var total = left+48;
arrow.show().css('left', total);
}
function arrow_hide () {
arrow.hide()
}
function flyout_open(event)
{
flyout_close();
var submenu = $(this).find('ul');
menuitem = submenu.fadeIn(200);
if(submenu.hasClass('ul_a')){
animate_right();
return false;
} else if (submenu.hasClass('ul_b')) {
animate_left();
return false;
}
return true;
}
function flyout_close()
{ arrow_hide(); if(menuitem) menuitem.fadeOut(200);}
$(document).ready(function()
{ $('#flyout li').bind('click', flyout_open);
});
(document).onclick = flyout_close;
})();
您可能需要将#flyout
位置更改为相对位置:
#flyout{
position : relative;
}
相关文章:
- 添加<td>在选择菜单JQuery中选择选项时
- 当满足其他选择菜单值时取消隐藏选择菜单 - jQuery
- 手风琴菜单 JQuery - 如何打开特定的“id”
- 关闭打开的子菜单 - jQuery 手风琴
- 如何启用和禁用选择菜单 JQuery 移动版
- 子菜单jquery,当我点击另一个子菜单时关闭子菜单
- 无法创建下拉菜单 - jQuery
- 打开和关闭菜单jQuery
- 悬停菜单jquery上下滑动过快
- 切换菜单jQuery时更改导航栏背景颜色
- 响应式导航栏切换菜单jQuery
- 隐藏菜单(jquery,css)
- 响应式移动菜单-Jquery切换
- 简化一个活动菜单jQuery代码
- 刷新后需要一个活动的子菜单(jquery手风琴菜单)
- 下拉菜单jQuery
- Facebook's移动应用/站点水平滑动菜单:Jquery插件
- 从表列中选择“选择菜单”Jquery的文本值
- 针对移动设备菜单jQuery的onload问题
- 弹跳子菜单jquery