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 14 Javascript
javascript window对象属性整理
Oct 24 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
angularJS 中input示例分享
Feb 09 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
JavaScript私有变量实例详解
Jan 24 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简单实现无限分类树形列表的方法
2015/03/27 PHP
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
js快速排序的实现代码
2013/12/08 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python中的引用知识点总结
2019/05/20 Python
如何在python中执行另一个py文件
2020/04/30 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
艺术用品:Arteza
2018/11/25 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
绿色环保演讲稿
2014/05/10 职场文书
企业精神口号
2014/06/11 职场文书
应届大学生求职信
2014/07/20 职场文书
医院合作协议书
2014/08/19 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
详解Redis复制原理
2021/06/04 Redis