这是一款利用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. bash 基本功能

    1 shell概述 shell是一个命令解释器,为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序.用户可以用shell启动.挂起.停止甚至是编写一些程序. shell是一个功能强大 ...

  2. OGG_GoldenGate数据迁移三进程Extract / Dump / Relicat（案例）

    2014-03-04 Created By BaoXinjian

  3. Android IPC机制（三）在Android Studio中使用AIDL实现跨进程方法调用

    在上一篇文章Android IPC机制(二)用Messenger进行进程间通信中我们介绍了使用Messenger来进行进程间通信的方法.可是我们能发现Messenger是以串行的方式来处理client ...

  4. Pandas dataframe 与 Spark dataframe 的区别

    区别 :http://www.voidcn.com/article/p-wsqbotem-boa.html 获取列名的列表: DataFrame.columns.values.tolist()

  5. javascript ES6模块化

    一.将模块导出去 /* *将模块导出去 *a.js文件 */ const a=12; export default a; /* *将模块导出去 *b.js文件 */ const a=5; export ...

  6. git将远程仓库最新版本拉到本地仓库

    一.正规做法有两种.git fetch和git pull. 注意不管用fetch还是pull,做之前都要在本地仓库做一次git commit,确保,本地仓库和工作目录及缓存一致.1.git fetch ...

  7. A simple case to use Celery:

    Prerequisites:   1: Install RabbitMQ as it would be used as message broker for Celery. In windows, i ...

  8. uva--242(邮资问题 dp）

    输入输出: id=26127" style="color:blue; text-decoration:none">Sample Input 5 2 4 1 4 12 ...

  9. C do {...} while (0) 在宏定义中的作用

    如果你是一名C程序员,你肯定很熟悉宏,它们非常强大,如果正确使用可以让你的工作事半功倍.然而,如果你在定义宏时很随意没有认真检查,那么它们可能使你发狂,浪费N多时间.在很多的C程序中,你可能会看到许多 ...

  10. 《SPARK/TACHYON:基于内存的分布式存储系统》－史鸣飞（英特尔亚太研发有限公司大数据软件部工程师）

    史鸣飞:大家好,我是叫史鸣飞,来自英特尔公司,接下来我向大家介绍一下Tachyon.我事先想了解一下大家有没有听说过Tachyon,或者是对Tachyon有没有一些了解?对Spark呢? 首先做一个介 ...