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 相关文章推荐
js保存当前路径(cookies记录)
Dec 14 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 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 daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
Python探索之SocketServer详解
2017/10/28 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
Python3.6简单反射操作示例
2018/06/14 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
django admin 添加自定义链接方式
2020/03/11 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
畜牧兽医本科生的自我评价
2014/03/03 职场文书
教师对学生的评语
2014/04/28 职场文书
个人工作能力自我评价
2015/03/05 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js