CSS skills: 1) Navigate item's animation
2015-05-12 16:21
176 查看
<style> .nav { border-right:1px solid #268eb7; } .nav li{overflow:hidden;height:55px;border-left:1px solid #268eb7;} .nav li.active a,.nav li.active small{top:-55px !important;} .nav li a{position:relative;display:block;padding:7px 0 0;height:55px;color:#fff;text-transform:uppercase;} .nav li a small{margin-top:-3px;color:#6aa3c2;} .nav li a.hover{background-color:#fff;color:#007aaa;} .nav li.hover small{color:#dadada;} </style> <div style="background-color: #0e90d2"> <ul class="am-avg-lg-8 nav"> <li class="box am-text-center"> <a href="">首页<small class="am-block">Home</small></a> <a href="" class="hover">首页<small class="am-block">Home</small></a> </li> <li class="box am-text-center"> <a href="http://kgdn.kangbeijia.cn/ppls">品牌连锁<small class="am-block">BRAND CHAIN</small></a> <a href="http://kgdn.kangbeijia.cn/ppls" class="hover">品牌连锁<small class="am-block">BRAND CHAIN</small></a> </li> <li class="box am-text-center"> <a href="http://kgdn.kangbeijia.cn/zjtd" style="top: 0px;">专家团队<small class="am-block">Experts</small></a> <a href="http://kgdn.kangbeijia.cn/zjtd" class="hover" style="top: 0px;">专家团队<small class="am-block">Experts</small></a> </li> <li class="box am-text-center"> <a href="http://kgdn.kangbeijia.cn/hxjs" style="top: 0px;">核心技术<small class="am-block">Technology</small></a> <a href="http://kgdn.kangbeijia.cn/hxjs" class="hover" style="top: 0px;">核心技术<small class="am-block">Technology</small></a> </li> <li class="box am-text-center"> <a href="javascript:void(0)" style="top: 0px;">齿科项目<small class="am-block">DENTAL ITEMS</small></a> <a href="javascript:void(0)" class="hover" style="top: 0px;">齿科项目<small class="am-block">DENTAL ITEMS</small></a> </li> <li class="box am-text-center"> <a href="http://kgdn.kangbeijia.cn/myal">美牙案例<small class="am-block">DENTAL CASE</small></a> <a href="http://kgdn.kangbeijia.cn/myal" class="hover">美牙案例<small class="am-block">DENTAL CASE</small></a> </li> <li class="box am-text-center"> <a href="http://kgdn.kangbeijia.cn/shzr">社会责任<small class="am-block">Sociol duty</small></a> <a href="http://kgdn.kangbeijia.cn/shzr" class="hover">社会责任<small class="am-block">Sociol duty</small></a> </li> <li class="box am-text-center diff"> <a href="javascript:void(0)" onclick="swtClick()" style="top: -0.551801899715483px;">在线咨询<small class="am-block">ASK ONLINE</small></a> <a href="javascript:void(0)" onclick="swtClick()" class="hover" style="top: -0.551801899715483px;">在线咨询<small class="am-block">ASK ONLINE</small></a> </li> </ul> </div> <script> //更改导航栏目动画代码 $(function(){ var index; var obj; $('.nav li').each(function(){ obj=$(this); index=obj.index(); if(index==4){ obj.find('a').attr('href','javascript:void(0)'); } var cloneLi=obj.find('a').clone().addClass('hover'); obj.append(cloneLi); }); $('.nav li').hover(function(){ $(this).children().stop().animate({top:'-55px'},250); },function(){ var _this=$(this).children(); _this.stop().animate({top:'0'},250); }); }); </script>
相关文章推荐
- CSS skills: 3) show sub-navigate items when mouse hove on nav-item
- 有关于微软的IWebBrowser2::Navigate2/Navigate方法
- asp.net page navigate
- How to navigate every url to www.csdn.net
- flash as3 navigateToURL()网站链接例子
- flex中navigateToURL函数的应用
- AS3中navigateToURL的简单应用
- 关于HyperLink的NavigateUrl属性的链接地址带参数出错的问题
- Mysql的客户端工具Navigate,对存储过程的调用
- Delphi WebBrowser1.Navigate Post 提交数据
- how to Simply Singleton Navigate the deceptively simple Singleton pattern---reference
- NavigateToPageAction打开新页面
- navigate frame框架
- fnd_function.execute/app_navigate.execute区别
- 微信小程序从子页面退回父页面时的数据传递 wx.navigateBack()
- Navigate the Timeline Pane
- angular2 router中的路由跳转navigate
- 微信小程序跳转navigateTo与redirectTo
- WebBrowser.Navigate 的刷新问题
- NavigateUrl属性绑定