jQuery实现的超酷苹果风格图标滑出菜单效果代码


Posted in Javascript onSeptember 16, 2015

本文实例讲述了jQuery实现的超酷苹果风格图标滑出菜单效果代码。分享给大家供大家参考。具体如下:

这是一款超酷苹果风格图标滑出菜单,调用了jquery1.3.2的库文件,整个菜单动感十足,用在网站上增色不少。

运行效果截图如下:

jQuery实现的超酷苹果风格图标滑出菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>超酷苹果风格图标滑出菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<style>
 body{
  margin:0px;
  padding:0px;
  background-color:#f0f0f0;
  font-family:Arial;
 }
 .title{
  position:absolute;
  top:100px;
  left:50%;
  margin-left:-204px;
  width:409px;
  height:348px;
  background:transparent url(images/title.png) no-repeat top left;
 }
 .info{
  position:fixed;
  bottom:0px;
  left:0px;
 }
 .back{
  display:block;
  background:transparent url(images/back.png) no-repeat top left;
  width:281px;
  height:143px;
 }
 a.dry{
  position:absolute;
  bottom:10px;
  right:10px;
  color:#000;
  font-weight:bold;
  font-size:16px;
 }
.navigation{
 position:relative;
 margin:0 auto;
 width:915px;
}
ul.menu{
 list-style:none;
 font-family:"Verdana",sans-serif;
 border-top:1px solid #bebebe;
 margin:0px;
 padding:0px;
 float:left;
}
ul.menu li{
 float:left;
}
ul.menu li a{
 text-decoration:none;
 background:#7E7E7E url(images/bgMenu.png) repeat-x top left;
 padding:15px 0px;
 width:128px;
 color:#333333;
 float:left;
 text-shadow: 0 1px 1px #fff;
 text-align:center;
 border-right:1px solid #a1a1a1;
 border-left:1px solid #e8e8e8;
 font-weight:bold;
 font-size:13px;
 -moz-box-shadow: 0 1px 3px #555;
 -webkit-box-shadow: 0 1px 3px #555;
}
ul.menu li a.hover{
 background-image:none;
 color:#fff;
 text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
 -moz-border-radius:0px 0px 0px 10px;
 -webkit-border-bottom-left-radius: 10px;
 border-left:none;
}
ul.menu li a.last{
 -moz-border-radius:0px 0px 10px 0px;
 -webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
 width:64px;
 height:64px;
 background-repeat:no-repeat;
 background-color:transparent;
 position:absolute;
 z-index:-1;
 top:80px;
 cursor:pointer;
}
ul.menu li span.ipod{
 background-image:url(images/ipod.png);
 left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
 background-image:url(images/video_camera.png);
 left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
 background-image:url(images/television.png);
 left:293px;
}
ul.menu li span.monitor{
 background-image:url(images/monitor.png);
 left:423px;
}
ul.menu li span.toolbox{
 background-image:url(images/toolbox.png);
 left:553px;
}
ul.menu li span.telephone{
 background-image:url(images/telephone.png);
 left:683px;
}
ul.menu li span.print{
 background-image:url(images/print.png);
 left:813px;
}
</style>
 </head>
 <body>
 <div class="navigation">
  <ul class="menu" id="menu">
  <li><span class="ipod"></span><a href="#" class="first">Players</a></li>
  <li><span class="video_camera"></span><a href="#">Cameras</a></li>
  <li><span class="television"></span><a href="#">TVs</a></li>
  <li><span class="monitor"></span><a href="#">Screens</a></li>
  <li><span class="toolbox"></span><a href="#">Tools</a></li>
  <li><span class="telephone"></span><a href="#">Phones</a></li>
  <li><span class="print"></span><a href="#" class="last">Printers</a></li>
  </ul>
 </div>
 <script type="text/javascript" src="jquery1.3.2.js"></script>
 <script type="text/javascript">
  $(function() {
  var d=1000;
  $('#menu span').each(function(){
   $(this).stop().animate({
   'top':'-17px'
   },d+=250);
  });
  $('#menu > li').hover(
  function () {
   var $this = $(this);
   $('a',$this).addClass('hover');
   $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
  },
  function () {
   var $this = $(this);
   $('a',$this).removeClass('hover');
   $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
  }
  );
  });
 </script>
 </body>
</html>

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

Javascript 相关文章推荐
文件编码导致jquery失效的解决方法
Jun 26 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 #Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 #Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 #Javascript
jQuery实现图片轮播特效代码分享
Sep 15 #Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 #Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 #Javascript
JQuery实现图片轮播效果
Sep 15 #Javascript
You might like
十天学会php(1)
2006/10/09 PHP
PHP 数字左侧自动补0
2008/03/31 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
Laravel 队列使用的实现
2019/01/08 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python爬虫实现中英翻译词典
2019/06/25 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
Java面向对象面试题
2016/12/26 面试题
科室工作个人总结的自我评价
2013/10/29 职场文书
材料采购员岗位职责
2013/12/17 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
防灾减灾标语
2014/10/07 职场文书
2014年库房工作总结
2014/11/26 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书