1. [代码]完整源代码  
<!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>");
 http://www.huiyi8.com/hunsha/chuangyi/​
$(".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倾斜的动画导航菜单的更多相关文章

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

    效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...

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

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

  3. JQUERY 插件开发——MENU（导航菜单）

    JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...

  4. jquery火焰等效果导航菜单

    jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpre ...

  5. 如何用CSS和jQuery实现一个侧滑导航菜单

    为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...

  6. css3和jquery实现的可折叠导航菜单(适合手机网页)

    之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览   源码下载 这个 ...

  7. jquery 实现两级导航菜单

    主要用于运维系统, 对界面要求不高的场合.  深深感到自己页面设计能力弱爆了,只能借鉴一下了, 交互逻辑还可以胜任一点. 直接贴代码: 1.  HTML 页面及 JS 交互, 注意引入 Jquery ...

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

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

  9. Jquery列表中的导航菜单的应用

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. ipmi 最新和MegaCli 监控磁盘和raid信息

    集群监控之 —— ipmi操作指南 原创 2010年03月23日 16:45:00 标签: 集群 / 服务器 / command / callback / user / interface 12224 ...

  2. JSP HTTP 状态码

    JSP HTTP 状态码 HTTP请求与HTTP响应的格式相近,都有着如下结构: 以状态行+CRLF(回车换行)开始 零行或多行头模块+CRLF 一个空行,比如CRLF 可选的消息体比如文件,查询数据 ...

  3. JSP的优势

    以下列出了使用JSP带来的其他好处: 与ASP相比:JSP有两大优势.首先,动态部分用Java编写,而不是VB或其他MS专用语言,所以更加强大与易用.第二点就是JSP易于移植到非MS平台上. 与纯 S ...

  4. UVa 10651 Pebble Solitaire（DP 记忆化搜索）

    Pebble Solitaire Pebble solitaire is an interesting game. This is a game where you are given a board ...

  5. 2016 acm香港网络赛 C题. Classrooms（贪心）

    原题网址:https://open.kattis.com/problems/classrooms Classrooms The new semester is about to begin, and ...

  6. jquery基础研究学习【基础】

    2017年6月6日15:07:58     该看:http://www.runoob.com/jquery/jquery-fade.html                淡入淡出 jQuery 教程 ...

  7. Java数据结构-线性表之顺序表ArrayList

    线性表的顺序存储结构.也称为顺序表.指用一段连续的存储单元依次存储线性表中的数据元素. 依据顺序表的特性,我们用数组来实现顺序表,以下是我通过数组实现的Java版本号的顺序表. package com ...

  8. 初识Modbus TCP/IP-------------C#编写Modbus TCP客户端程序(一）

    转自:http://blog.csdn.net/thebestleo/article/details/52269999 首先我要说明一下,本人新手一枚,本文仅为同样热爱学习的同学提供参考,有不 对的地 ...

  9. lucas定理证明

    Lucas 定理(证明) A.B是非负整数,p是质数.AB写成p进制:A=a[n]a[n-1]...a[0],B=b[n]b[n-1]...b[0]. 则组合数C(A,B)与C(a[n],b[n])* ...

  10. F - 数论

    F - 数论 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Description ...