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 相关文章推荐
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
window.location.hash 属性使用说明
Mar 20 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
详解js创建对象的几种方式和对象方法
Mar 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 Ajax中文乱码问题解决方法
2009/02/27 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
js判断输入是否为数字的具体实例
2013/08/03 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
js实现小星星游戏
2020/03/23 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
科研先进个人典型材料
2014/01/31 职场文书
调查研究项目计划书
2014/04/29 职场文书
卫生系统先进事迹
2014/05/13 职场文书
就职演讲稿范文
2014/05/19 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
放飞理想演讲稿
2014/09/09 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
2014年司法局工作总结
2014/12/11 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android