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 相关文章推荐
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
cypress测试本地web应用
Jun 01 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.ini中date.timezone设置分析
2011/07/29 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
怎么清空javascript数组
2013/05/11 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python str与repr的区别
2013/03/23 Python
Python3处理文件中每个词的方法
2015/05/22 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
浅谈Python中的bs4基础
2018/10/21 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
详解Flask前后端分离项目案例
2020/07/24 Python
详解python tcp编程
2020/08/24 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
公司JAVA开发面试题
2015/04/02 面试题
英文版网络工程师求职信
2013/10/28 职场文书
国培远程培训感言
2014/03/08 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
优秀创业计划书分享
2019/07/19 职场文书