jq倾斜的动画导航菜单
效果预览网址：http://keleyi.com/keleyi/phtml/jqmenu/index.htm
支持IE、Chrome、火狐等浏览器
完整源代码，保存到HTML文件打开也可查看效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq倾斜的动画导航菜单-柯乐义</title><base target="_blank" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#E8E8E8;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
/* keleyimenu 柯 乐 义 */
.keleyimenu{width:355px;background:url(http://keleyi.com/keleyi/phtml/jqmenu/index/nav-bg.png) no-repeat;}
.keleyimenu ul{margin:0 0 0 42px;}
.keleyimenu ul li{width:164px;height:29px;padding-bottom:8px;overflow:hidden;position:relative;float:left;display:inline;}
.keleyimenu ul li a{display:block;width:164px;height:29px;line-height:26px;font-family:"微软雅黑";font-size:16px;color:#FFFFFF;text-indent:62px;overflow:hidden;position:relative;z-index:100000;}
.keleyimenu ul li p{position:absolute;z-index:100;top:0;left:-164px;width:164px;height:29px;background:url(http://keleyi.com/keleyi/phtml/jqmenu/index/nav-libg.png) no-repeat; }
.keleyimenu ul li b{position:absolute;z-index:100000;top:0;left:0;display:block;width:11px;height:29px;background:url(http://keleyi.com/keleyi/phtml/jqmenu/index/nav-jiao2.png) no-repeat;}
.keleyimenu ul li.current p{left:0;}
.keleyimenu ul li.current a{color:#0072d2;}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="keleyimenu">
<ul class="clearfix">
<li class="current"><a href="http://keleyi.com/a/bjac/4pdfle7v.htm" >原文</a></li>
<li><a href="http://keleyi.com/menu/cms/" >CMS</a></li><li><a href="http://keleyi.com/menu/net/" >.NET</a></li><li><a href="http://keleyi.com/menu/javascript/" >Javascript</a></li><li><a href="http://keleyi.com/menu/jquery/" >jQuery</a></li><li><a href="http://keleyi.com/menu/csharp/" >C#</a></li><li><a href="http://keleyi.com/menu/aspnet/" >ASP.NET</a></li><li><a href="http://keleyi.com/menu/mvc/" >MVC</a></li><li><a href="http://keleyi.com/menu/html5/" >HTML5</a></li>
<li><a href="http://keleyi.com/dev/3068696139522ae4.htm">树形菜单</a></li> </ul>
</div> <script type="text/javascript">
$(function () {
$(".ke"+"leyimenu ul li").append("<b class='pngFix'></b><p class='pngFix'></p>"); $(".keleyimenu ul li").hover(function () {
if ($(this).attr("class") != "current") {
$(this).children("p").stop().animate({ left: "0px" }, 200);
$(this).children("a").css({ color: "#0072d2" }, 900);
}
}, function () {
if ($(this).attr("class") != "current") {
$(this).children("p").stop().animate({ left: "-164px" }, 300);
$(this).children("a").css({ color: "#FFFFFF" }, 900);
}
}); $(".kele"+"yimenu ul li.current").unbind("hover");
}); $(function ($) {
var left = 0;
var length = $(".keleyimenu li").length;
for (length; length > 0; length--) {
left += 12.60;
$(".keleyimenu li").eq(length - 1).css("margin-left", left)
}
}); function setNav(id) {
var navList = $(".keleyimenu ul li");
$(navList).eq(id - 1).addClass("current");
}
</script>
</body>
</html>
这代码中用到了jquery的eq函数，详细请参考：http://keleyi.com/a/bjac/tmx4mq76.htm
菜单大全：http://keleyi.com/a/bjac/veugsmw9.htm
原文：http://keleyi.com/a/bjac/4pdfle7v.htm
jq倾斜的动画导航菜单的更多相关文章
- jquery倾斜的动画导航菜单
1. [代码]完整源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- 一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...
- 纯css实现Magicline Navigation(下划线动画导航菜单)
看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...
- 通过css3实现的动画导航菜单代码
用css3样式实现的滑动导航菜单,html代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &quo ...
- 纯css3实现的动画导航菜单
测试咯 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特 ...
- jquery和css3实现滑动导航菜单
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...
- JavaScript实战（带收放动画效果的导航菜单）
虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏福:http://www. ...
- 纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
- 基于jQuery动画二级下拉导航菜单
春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=" ...
随机推荐
- LR中的时间戳函数web_save_timestamp_param
以前真没注意过后面看某个群有人说到这个函数一查,还真有,那么处理时间戳就简单很多了,我们经常在各种网站上看到类似于这样的时间戳 51Testing软件测试网"d bLq!uR&am ...
- SQL语句来查询今天、昨天、7天内、30天的数据，经典！
---恢复内容开始--- 今天的所有数据:select * from 表名 where DateDiff(dd,datetime类型字段,getdate())=0 昨天的所有数据:select * f ...
- MVC实用架构设计（三）——EF-Code First（3）：使用T4模板生成相似代码
前言 经过前面EF的<第一篇>与<第二篇>,我们的数据层功能已经较为完善了,但有不少代码相似度较高,比如负责实体映射的 EntityConfiguration,负责仓储操作的I ...
- 使用ikmv将jar转换为dll，在.NET中直接调用
ikmv百科介绍 ikvm官网 使用ikvm前需要先安装java. ikvm的使用比较简单,到官网下载ikvm需要的组件,解压后在path中配置 %IKVM_HOME%\bin 在cmd中使用命令 i ...
- Pointer is missing a nullability type specifier (__nonnull or __nullable)
我们都知道在swift中,可以使用!和?来表示一个对象是optional的还是non-optional,如view?和view!.而在Objective-C中则没有这一区分,view即可表示这个对象是 ...
- Android APK如何签名
Android项目以它的包名作为唯一标识,如果在同一设备上安装两个相同的应用,后面安装的应用就会覆盖前面安装的应用.为了避免这种情况的发生,我们需要对作为产品发布的应用进行签名. 签名其实有两个作用: ...
- ZOJ Problem Set - 1115 Digital Roots
水题记录: 注:此题题目并没有限定数值的大小,所以要用字符串进行处理 #include <stdio.h> #include <string.h> int main() { ] ...
- 相克军_Oracle体系_随堂笔记005-Database buffer cache
本章主要阐述SGA中的Database buffer cache. Buffer cache { 1.pin (读写瞬间的状态) 2.clean 3.dirty 4.unused } --Databa ...
- IEE重建表完全释放磁盘空间具体步骤参考
环境:RHEL 5.3 + IEE 5.1.40 本文目的:指导项目侧人员再遇到此类改动需求时可以自己更改.需求:mr_intrainterfreq表重建,历史数据全部删掉. 1.停库: 1.1确认现 ...
- norflash驱动编写笔记
[部分转自]http://blog.csdn.net/ziyiyunmen/article/details/9744901 1. 读数据 md.b 0 2. 读ID NOR手册上: 往地址555H写A ...