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

HTML源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<title>Jquery+CSS侧边弹出垂直导航</title>
<style type="text/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(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(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(bubble_btm.gif) no-repeat right bottom;
}
</style>
"></script>
<script language="javascript">
    $(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")
        });
    });
</script>
</head>
<body>
<ul class="side_nav">
    <li>
        <a href="www.corange.cn">Corange.cn</a>
 
        <div><p>Go home!<Br />ASP</p></div>
    </li>
    <li>
        <a href="#">About Me</a>
        <div><p>Get to know me.</p></div>
    </li>
    <li>
 
        <a href="#">Portfolio</a>
        <div><p>Get to check out my featured work!</p></div>
    </li>
    <li>
        <a href="#">Blog</a>
        <div><p>Tutorials, articles and resources.</p></div>
    </li>
 
    <li>
        <a href="#">Contact</a>
        <div><p>Don't hesitate to drop me a line!</p></div>
    </li>
    <li>
        <a href="#">Rss</a>
        <div><p>News, Video and so on.</p></div>
 
    </li>
</ul>
 
</body>
</html>

jquery打造一款侧边弹出的垂直导航的更多相关文章

  1. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  2. 基于jQuery点击圆形边框弹出图片信息

    分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=&q ...

  3. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  4. 使用mui框架开发App,当input获取焦点时，键盘弹出，底部导航栏上升。

    转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...

  5. 一款基于jQuery外观优雅带遮罩弹出层对话框

    今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...

  6. Jquery 点击图片在弹出层显示大图

    http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...

  7. 网站开发常用jQuery插件总结(二）弹出层插件Lightbox_me

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  8. 网站开发常用jQuery插件总结(二）弹出层插件Lightbox

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  9. jquery简易版xwPop.js弹出消息对话框插件

    xwPop.js弹出消息对话框插件是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹出对话框,它提供各种参数和方法,功能非常强大.目前已经在项目中有应用到xwpop开发 ...

随机推荐

  1. RHCE7 管理I-12归档文件并在Linux系统间复制文件

    tar命令使用 默认tar只有归档的功能,没有压缩功能 tar [option...] [file]... -c,--create     创建 -x,--extract,--get   解压 -t, ...

  2. linux文件系统管理的工作原理

    一.系统在初始化时如何识别硬盘 1.系统初始时根据MBR的信息来识别硬盘,其中包括了一些执行文件就来载入系统,这些执行文件就是MBR里前面446bytes里的boot loader 程式,而后面的16 ...

  3. Ext4文件系统架构分析(三)

    ioctl源码分析之交换两个文件的物理extents 1. 交换两个文件的extents Ext4 的EXT4_IOC_MOVE_EXT命令用于交换两个文件的extents,实际上是交换两个文件的对应 ...

  4. NYOJ239 月老的难题 【二分图最大匹配&#183;匈牙利】

    月老的难题 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描写叙述 月老准备给n个女孩与n个男孩牵红线.成就一对对美好的姻缘. 如今,因为一些原因,部分男孩与女孩可能结成幸福 ...

  5. Python lower() 方法

    描述 Python lower() 方法转换字符串中所有大写字符为小写,其效果和 casefold() 方法非常相似. 两者的区别是:lower() 方法只对ASCII编码,也就是‘A-Z’有效,对于 ...

  6. C#方法参数--值参数，引用参数，输出参数

    值参数: 使用值参数,通过复制实参的值到形参的方式,把数据传递到方法,方法被调用的时候,系统做如下操作: 在栈中为形参分配空间: 复制实参到形参. 注意:一个值参数的实参不一定是变量,它可以是任何能够 ...

  7. tp查询范围

    一.查询范围 //说明username和password是对应模型下的  scopeUsername($query) 和scopePassword($query)方法 //关键字scope 在控制器如 ...

  8. NUMA体系结构详解

    1. NUMA的几个概念(Node,socket,core,thread) 对于socket,core和thread会有不少文章介绍,这里简单说一下,具体参见下图: 一句话总结:socket就是主板上 ...

  9. 理解HTTP幂等性，分布式事物

    理解HTTP幂等性 基于HTTP协议的Web API是时下最为流行的一种分布式服务提供方式.无论是在大型互联网应用还是企业级架构中,我们都见到了越来越多的SOA或RESTful的Web API.为什么 ...

  10. angular学习笔记(五)-阶乘计算实例(3)

    同样是上一个例子,我们要求并非实时的计算结果,而是等到用户确定自己已经输入完毕,然后进行计算: <!DOCTYPE html> <html ng-app> <head&g ...