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定时器详解及实例
Aug 01 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
优化Vue中date format的性能详解
Jan 13 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 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
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[01:44]Ti10举办地公布
2019/08/25 DOTA
python查找目录下指定扩展名的文件实例
2015/04/01 Python
python简单获取数组元素个数的方法
2015/07/13 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
python set集合使用方法解析
2019/11/05 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
小溪流的歌教学反思
2014/02/13 职场文书
物流专员岗位职责
2014/02/17 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python