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 相关文章推荐
JQuery动画与特效实例分析
Feb 02 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
Node.js简单入门前传
Aug 21 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 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
PHP4.04简明安装
2006/10/09 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
python中的数据结构比较
2019/05/13 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
python 从list中随机取值的方法
2020/11/16 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
阿拉伯书店:Jamalon
2019/07/24 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
信息管理专业推荐信
2013/10/29 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
毕业生应聘求职信
2014/07/10 职场文书
员工工作自我评价
2014/09/26 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript