jQuery二级下拉菜单下拉箭头翻转动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
/**
*在Position属性值为absolute的同时，
*如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）
*的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，
*这对精确定位是很有帮助的。
*/
*{margin: 0;padding: 0;list-style-type:none;
}
/*nav导航盒子*/
div.nav{width: 800px;height:36px;line-height: 36px;text-align: center;font-size: 12px;position: relative;background: #643519;margin:40px auto 0 auto;
}
/*nav-main*/
ul.nav-main{width: 100%;height: 100%;list-style-type: none;
}
ul.nav-main span{display: inline-block;margin-left: 18px;width: 7px;height: 7px;background: url('../img/down-icon.png') no-repeat;
}
/*图标向上旋转*/
.hover-up{transition-duration: .5s;transform: rotate(180deg);-webkit-transform: rotate(180deg);
}
/*图标向下旋转*/
.hover-down{transition-duration: .5s;transform: rotate(0deg);-webkit-transform: rotate(0deg);
}
/*导航条设置*/
ul.nav-main>li{width: 120px;height: 100%;display: block;float: left;background: #643519;color: #fff;margin-right: 1px;cursor: pointer;
}
ul.nav-main>li:hover{background: #643519;
}
/*隐藏盒子设置*/
div.hidden-box{width: 118px;border: 1px solid #643519;border-top: 0;position: absolute;display:none;background:#fff;top: 36px;
}
.hidden-box>ul{list-style-type: none;color: #643519;cursor: pointer;
}
.hidden-box li:hover{background: #643519;color: #fff;
}
/*隐藏盒子位置设置*/
.hidden-loc-index{left: 121px;
}
.hidden-loc-us{left: 242px;
}
.hidden-loc-info{left: 363px;
}
.box04{left:485px;
}
</style>
</head><body>
<!--nav-->
<div class="nav"><!--导航条--><ul class="nav-main"><li>首页</li><li id="li-1">关于CFOAM<span></span></li><li id="li-2">信息中心<span></span></li><li id="li-3">消费者服务<span></span></li><li id="li-4">商务服务<span></span></li><li>研究中心</li></ul><!--隐藏盒子--><div id="box-1" class="hidden-box hidden-loc-index"><ul><li>目的意义</li><li>发展历程</li><li>组织架构</li><li>精英团队</li></ul></div><div id="box-2" class="hidden-box hidden-loc-us"><ul><li>加入联盟步骤</li><li>申请要求</li></ul></div><div id="box-3" class="hidden-box hidden-loc-info"><ul><li>消费者服务</li><li>产品信息</li><li>关于我们</li><li>商家信息</li><li>加入我们</li><li>关于我们</li><li>产品信息</li></ul></div><div id="box-4" class="hidden-box hidden-loc-info box04"><ul><li>服务理念</li><li>服务产品</li><li>周边有机网络</li><li>商铺汇总</li><li>有机百科</li><li>保障与维权</li></ul></div>
</div>
<script type="text/jscript">
$(document).ready(function(){
//    nav-li hover evar num;$('.nav-main>li[id]').hover(function(){/*图标向上旋转*/$(this).children().removeClass().addClass('hover-up');/*下拉框出现*/var Obj = $(this).attr('id');num = Obj.substring(3, Obj.length);$('#box-'+num).slideDown(300);},function(){/*图标向下旋转*/$(this).children().removeClass().addClass('hover-down');/*下拉框消失*/$('#box-'+num).hide();});
//    hidden-box hover e$('.hidden-box').hover(function(){/*保持图标向上*/$('#li-'+num).children().removeClass().addClass('hover-up');$(this).show();},function(){$(this).slideUp(200);$('#li-'+num).children().removeClass().addClass('hover-down');});
});</script>
</body>
</html>

附上用到的图片：

原文地址：http://www.html5tricks.com/jquery-dropdown-menu-icon.html

jQuery二级下拉菜单下拉箭头翻转动画相关推荐

antd-react-Dropdown下拉菜单（上下箭头切换动画）
pd非让搞一个这个下拉框上下箭头切换的动画,没办法谁让咱们是打工人呢(虽然心里是一万个愿意,但是也得硬着头皮上呀). 代码实现如下: 1.引入并使用组件 import { Menu, Dropdown ...
html下拉选中添加箭头,如何在下拉菜单中添加箭头？
问:我正在商店页面上工作,并且正在向每个商店项目添加PayPay选项.我试图在第一个选项旁边显示一个箭头,以便用户知道如果单击它们,将有更多选项可用. 这是整个PayPal表单的HTML.这些选项是我 ...
怎样在excel中利用有效性序列建立二级下拉菜单
比如在A列中选择部门名称,B列中的选择菜单自动会变成该部门下所有员工问题补充: 问题一样.那答案呢? madm 的二级下拉菜单的公式如何运用..能否发文件上来提问者: superaoyi - ...
右边菜单_Excel – 如何始终显示下拉菜单右边的小箭头？
制作下拉菜单,不是什么高深的技巧,我在各种案例中也经常会用到. 如果要学习多级联动菜单的制作,可参见 Excel indirect 函数(2) – 制作多级联动菜单(文末彩蛋) 最近有同学提出了一个关 ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
html下拉栏加箭头,CSS-下拉菜单上的引导3箭头
CSS-下拉菜单上的引导3箭头在引导程序2中,下拉菜单具有向上箭头,如此处所示(我不是在谈论尖晶石). 现在使用bootstrap 3或最新版git时,在我下面的简单示例或bootstrap主页上的 ...
element 表单下拉菜单点击上下箭头失效
element 表单下拉菜单点击上下箭头失效使用表单的Form-Item Slot 把label改成下拉菜单,然后点击箭头图标不触发下拉事件解决办法:el-form-item上一定要加上prop ...
Bootstrap创建按钮下拉菜单
按钮下拉菜单下拉菜单组件是一个独立的组件,可以将页面上的任何元素(如,按钮.导航等)和下拉菜单进行组合,让相应的元素具有下拉功能. 如果把按钮和下拉菜单进行组合,并让按钮充当下拉菜单的开关,就可以实 ...
qml中使用combobox实现多级菜单_excel实用技巧：如何构建多级下拉菜单
编按:哈喽,大家好!说到做下拉菜单,小伙伴们都知道直接使用Excel中的数据验证就可以实现,但是二级.三级,甚至更多级的下拉菜单,可能就有点蒙圈了.其实用Excel制作三级下拉菜单,一点都不难,它就跟 ...

jQuery二级下拉菜单下拉箭头翻转动画

jQuery二级下拉菜单下拉箭头翻转动画相关推荐

最新文章

热门文章

jQuery二级下拉菜单 下拉箭头翻转动画

jQuery二级下拉菜单 下拉箭头翻转动画相关推荐

最新文章

热门文章

jQuery二级下拉菜单下拉箭头翻转动画

jQuery二级下拉菜单下拉箭头翻转动画相关推荐