这是一款利用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. linux ---性能监控（工具）

    linux服务器性能监控-nmon Nmon 是一个分析aix和linux性能的免费工具,出自IBM,其采集的数据通过nmon_analyser生成报表 一.下载 官网下载地址 百度网盘 二.运行和使 ...

  2. RHCE7 管理II-2 通过grep使用正则表达式

    grep -i:忽略大小写 -n:表示行数 找出含有root的行 # grep root /etc/passwd root:x:::root:/root:/bin/bash ::operator:/r ...

  3. Leet Code -- Unique BST

    对于数字n(大于1).从1到n有多少种binary search tree(BST序列)?当n=3时,BST序列为: 1         3     3    2     1     \       ...

  4. git配置gitignore

    一.背景                                                                                                 ...

  5. 为训练深度OCR 图像，生成文本图像

    https://github.com/Sanster/text_renderer Generate text images for training deep learning ocr model 在 ...

  6. C# POST与参数的字符串格式

    参数拼接方法:&  类似url参数.然后转化为字节型 string postdate = "Submit=" + Submit + "&dopost=&q ...

  7. #ifndef用于避免多重包含

    原因:C中,某一个重要的头文件可能被多个文件包含,如果编译的多个文件均包含了同一个头文件, 就可能存在,一个头文件被多次包含的问题. 用法:这个问题,一般用#ifndef来解决. 1.定义一个与文件名 ...

  8. iOS： 让键盘消失的的4种方法

    转自:http://leopard168.blog.163.com/blog/static/168471844201422121310352/ 在iOS app中,只要用到编辑框(UITextFiel ...

  9. 日期时间函数(1)-time()&gmtime()&strftime()&localtime()

    ◆time() 取得当前时间.此函数会返回从公元1970年1月1日的UTC时间从0时0分0秒算起到现在所经过的秒数.如果参数t为非空指针的话, 此函数也会将返回值存到t指针所指的内存. 成功则返回秒数 ...

  10. bazel-demo2_1

    demo2_1目录树 ├── app │ ├── BUILD │ ├── hello_world.cpp │ └── lib │ ├── BUILD │ ├── func.cpp │ └── func ...