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开发包大全整理
Dec 22 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 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
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
采用call方式实现js继承
2014/05/20 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
python requests 使用快速入门
2017/08/31 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python3模拟登录操作实例分析
2019/03/12 Python
如何基于python生成list的所有的子集
2019/11/11 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
物业品质提升方案
2014/06/08 职场文书
物业管理专业自荐信
2014/07/01 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
员工辞退通知书
2015/04/17 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL