jquery实现侧边弹出的垂直导航


Posted in Javascript onDecember 09, 2014

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

HTML源码:

<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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

"></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>

演示代码很简单,小伙伴们根据自己的项目需求,自由美化更改下即可

Javascript 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
javascript的数组和常用函数详解
May 09 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
Bootstrap布局方式详解
May 27 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 #Javascript
使用jQuery实现星级评分代码分享
Dec 09 #Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 #Javascript
浅谈JavaScript函数节流
Dec 09 #Javascript
node.js中的console.log方法使用说明
Dec 09 #Javascript
node.js中的console.warn方法使用说明
Dec 09 #Javascript
node.js中的console.info方法使用说明
Dec 09 #Javascript
You might like
php实现ping
2006/10/09 PHP
php 缩略图实现函数代码
2011/06/23 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
php实现微信支付之现金红包
2018/05/30 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
python字典排序实例详解
2015/05/20 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
python装饰器代码深入讲解
2021/03/01 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
物业招聘计划书
2014/01/10 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
机关保密承诺书
2014/06/03 职场文书