当前位置:  编程技术>WEB前端

利用jquery动画特效和css打造的侧边弹出垂直导航

    来源: 互联网  发布时间:2014-08-25

    本文导语:  这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个。下面是效果截图:  HTML源码: 代码如下: Jquery+CSS侧边弹出垂...

这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个。下面是效果截图:

 

HTML源码:
代码如下:

Jquery+CSS侧边弹出垂直导航

html, body, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
font-family: "Verdana","lucida sans",Sans-serif;
font-size: 12px;
}
html, body {
min-height: 100%;
color: #FFFFFF;
background-repeat: repeat-x;
background-position: top;
background-color: #161f2a;
}
ul.side_nav {
width: 200px;
float: left;
margin: 0;
padding: 0;
}
ul.side_nav li {
position: relative;
float: left;
margin: 0;
padding: 0;
display: inline;
}
ul.side_nav li a {
width: 165px;
border-top: 1px solid #3373a9;
border-bottom: 1px solid #003867;
padding: 10px 10px 10px 25px;
display: block;
color: #fff;
text-decoration: none;
background: #005094 url(/blog_article/sidenav_arrow.gif) no-repeat 5px 10px;
position: relative;
z-index: 2;
}
ul.side_nav li a:hover {
background-color: #2d353f;
}
ul.side_nav li div {
display: none;
position: absolute;
top: 2px;
left: 0;
width: 225px;
background: url(/blog_article/bubble_top.gif) no-repeat right top;
}
ul.side_nav li div p {
margin: 7px 0;
line-height: 1.3em;
padding: 0 5px 10px 30px;
color: #444;
background: url(/blog_article/bubble_btm.gif) no-repeat right bottom;
}



$(document).ready(function() {

$("ul.side_nav li").hover(function() {
$(this).find("div").stop()
.animate({ left: "210", opacity: 1 }, "fast")
.css("display", "block")
}, function() {
$(this).find("div").stop()
.animate({ left: "0", opacity: 0 }, "fast")
});
});







    
 
 

您可能感兴趣的文章:

  • 利用jquery写的左右轮播图特效
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • linux c下利用srand和rand函数生成随机字符串
  • 请问:Linux下用C编程计算CPU利用率和内存利用率?
  • linux下利用(cat,strings,head,sed)命令生成随机字符串
  • 在2003下利用vmware安装了linux,又利用host-only方式上了网,问题如下多谢指点!!!
  • Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
  • 大虾 紧急求助!!!!如何求得当前机子的处理器利用率和内存利用率?
  • 如何利用libpcap和Python嗅探数据包
  • 如何利用Bash脚本(利用awksedgrepwc等)来自动修改配置文件
  • windows堆栈溢出利用的七种方式
  • 求RADIUS的动态分配IP的问题(利用IPPOOL)
  • iowait和cpu利用率的权衡问题
  • 利用java.net.URLConnection上传文件
  • Qt中利用槽如何来传递参数
  • 浏览器漏洞利用框架 BeEF
  • 怎么样利用Socket进行Java网络编程
  • 请问如何编程获得CPU利用率?(空)
  • 如何利用Linux安装盘制作启动盘?
  • 谁知道linux/unix下利用Schema读取校验xml的开源代码,给一个链接,谢谢!
  • 怎样实现利用fprintf,输出定长字串,位数不足时在左侧填入指定字符填充。。
  • CPU、内存、数据库利用率监控
  • 怎样利用u-boot烧写??


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3