jquery实现Slide Out Navigation滑出式菜单效果代码


Posted in Javascript onSeptember 07, 2015

本文实例讲述了jquery实现Slide Out Navigation滑出式菜单效果代码。分享给大家供大家参考。具体如下:

这里介绍jquery实现的Slide Out Navigation跟随鼠标滑出的导航效果,鼠标移过后菜单快速从上到下移出,引用了新版的jQuery插件,菜单修改一下就可以用了,比如修改一下背景色或文字大小等。

运行效果截图如下:

jquery实现Slide Out Navigation滑出式菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Slide Out Navigation</title>
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<style type="text/css">
body{ font-family:arial;}
ul#navigation {
 list-style: none outside none;
 margin: 0;
 padding: 0;
 position: fixed;
 right: 10px;
 top: 0;
 width: 721px;
 z-index: 999999;
}
ul#navigation li {
 display: inline;
 float: left;
 width: 103px;
}
ul#navigation li a {
 background-color: #E7F2F9;
 background-position: 50% 10px;
 background-repeat: no-repeat;
 border: 1px solid #BDDCEF;
 border-radius: 0 0 10px 10px;
 display: block;
 float: left;
 height: 25px;
 margin-top: -2px;
 opacity: 0.7;
 padding-top: 80px;
 text-align: center;
 text-decoration: none;
 line-height:25px;
 width: 100px;
 font-size:11px;
 color: #60ACD8;
 letter-spacing: 2px;
 text-shadow: 0 -1px 1px #FFFFFF;
}
ul#navigation li a:hover {
 background-color: #CAE3F2;
}
ul#navigation .home a {
 background: url(images/home.png) no-repeat;
}
ul#navigation .about a {
 background: url(images/id_card.png) no-repeat;
}
ul#navigation .search a {
 background: url(images/search.png) no-repeat;
}
ul#navigation .podcasts a {
 background: url(images/ipod.png) no-repeat;
}
ul#navigation .rssfeed a {
 background: url(images/rss.png) no-repeat;
}
ul#navigation .photos a {
 background: url(images/camera.png) no-repeat;
}
ul#navigation .contact a {
 background: url(images/mail.png) no-repeat;
}
</style>
</head>
<body>
<ul id="navigation">
 <li class="home"><a href="">Home</a></li>
 <li class="about"><a href="">About</a></li>
 <li class="search"><a href="">Search</a></li>
 <li class="photos"><a href="">Photos</a></li>
 <li class="rssfeed"><a href="">Rss Feed</a></li>
 <li class="podcasts"><a href="">Podcasts</a></li>
 <li class="contact"><a href="">Contact</a></li>
</ul>
<script type="text/javascript">
$(function() {
 var d=300;
 $('#navigation a').each(function(){
 $(this).stop().animate({
 'marginTop':'-80px'
 },d+=150);
 });
 $('#navigation > li').hover(
 function () {
 $('a',$(this)).stop().animate({
 'marginTop':'-2px'
 },200);
 },
 function () {
 $('a',$(this)).stop().animate({
 'marginTop':'-80px'
 },200);
 }
 );
 });
</script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
js图片轮播特效代码分享
Sep 07 #Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 #Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 #Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 #Javascript
JavaScript简单下拉菜单实例代码
Sep 07 #Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 #Javascript
jQuery实现简单下拉导航效果
Sep 07 #Javascript
You might like
收集的DedeCMS一些使用经验
2007/03/17 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
angular.bind使用心得
2015/10/26 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Python中collections模块的基本使用教程
2018/12/07 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
《中华少年》教学反思
2014/02/15 职场文书
大学生作弊检讨书
2014/02/19 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
党支部工作总结2015
2015/04/01 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
Python基础详解之描述符
2021/04/28 Python
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
MySQL为id选择合适的数据类型
2021/06/07 MySQL