效果预览网址：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倾斜的动画导航菜单的更多相关文章

  1. jquery倾斜的动画导航菜单

    1. [代码]完整源代码  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  2. 一款基jquery超炫的动画导航菜单

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览   ...

  3. 纯css实现Magicline Navigation(下划线动画导航菜单)

    看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...

  4. 通过css3实现的动画导航菜单代码

    用css3样式实现的滑动导航菜单,html代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &quo ...

  5. 纯css3实现的动画导航菜单

    测试咯 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特 ...

  6. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

  7. JavaScript实战（带收放动画效果的导航菜单）

    虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏福:http://www. ...

  8. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  9. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

随机推荐

  1. C#设计模式-享元模式

    在软件开发过程,如果我们需要重复使用某个对象的时候,如果我们重复地使用new创建这个对象的话,这样我们在内存就需要多次地去申请内存空间了,这样可能会出现内存使用越来越多的情况,这样的问题是非常严重,然 ...

  2. Android Fragment 使用技巧

    1. Fragment 使用时要有一个无参构造函数 如果没有无参构造函数,而是像按照普通类来使用,只创建有参构造函数,则会出现 android.support.v4.app.Fragment$Inst ...

  3. 前端：图文混排-怎么在不使用float的情况下实现想要的效果呢？

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 举个例子 重点:display:flex (参考:http://www.360do ...

  4. 计算程序总行数的Python代码

    最近需要统计一下项目中代码的总行数,写了一个Python小程序,不得不说Python是多么的简洁,如果用Java写至少是现在代码的2倍. import os path="/Users/ron ...

  5. css 权重

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 制作在线简历（一）——Loading与底部菜单

    想装逼下搞个在线简历,然后顺便用些CSS3与HTML5的一些技术,再顺带把响应式也加上去去,在移动端也能看到. 不过我的配色low了点,还望见谅...... 一.首页Loading效果 这次就打算把几 ...

  7. Spring Boot启动流程详解（一）

    环境 本文基于Spring Boot版本1.3.3, 使用了spring-boot-starter-web. 配置完成后,编写了代码如下: @SpringBootApplication public ...

  8. TCP滑动窗口机制的简洁模型

    模型图: 我们可以大概看一下上图的模型: 首先是AB之间三次握手建立TCP连接.在报文的交互过程中,A将自己的缓冲区大小(窗口大小)3发送给B,B同理,这样双方就知道了对端的窗口大小. A开始发送数据 ...

  9. mybatis入门基础(五)----动态SQL

    一:动态SQL 1.1.定义 mybatis核心对sql语句进行灵活操作,通过表达式进行判断,对sql进行灵活拼接.组装. 1.2.案例需求 用户信息综合查询列表这个statement的定义使用动态s ...

  10. 使用Visual Studio 2015 Community 开发windows服务

    昨天研究在.NET下开发Windows服务程序,期间遇到一些小问题,这里仅将自己的开发过程和需要注意的地方写下和广大网友分享……  1.基础   Windows服务是指系统启动时能够自己运行的程序.W ...