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. jquery的on()

    定义和用法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() 方法的新的替代品 ...

  2. 篇章一:[AngularJS] 使用AngularAMD動態載入Controller

    前言 使用AngularJS來開發Single Page Application(SPA)的時候,可以選用AngularUI Router來提供頁面內容切換的功能.但是在UI Router的使用情景裡 ...

  3. Java IO 常用类简介

    字节流 输入字节流 InputStream输入字节流的抽象类 ByteArrayInputStreambyte数组输入流 FileInputStream文件输入流 PipedInputStream管道 ...

  4. IntelliJ idea——》删除tag

    查看git上所有tag E:\eju_IdeaProjects\house-platform>git tag --11v1. 20181107周三上线 20181120周二上线 v1.0.0 v ...

  5. py.test

    只运行某一个用例 pytest test_mod.py::test_func 或者 pytest test_mod.py::TestClass::test_method

  6. linux 上拷贝文件到windows 上 文件出现锁的文件

    要在linux上拷贝出文件到windows上,那么文件必须是777的最高权限. chmod wb_redis -R

  7. JSP 开发环境搭建

    JSP 开发环境搭建 JSP开发环境是您用来开发.测试和运行JSP程序的地方. 本节将会带您搭建JSP开发环境,具体包括以下几个步骤. 配置Java开发工具(JDK) 这一步涉及Java SDK的下载 ...

  8. wireshark:Couldn't run /usr/bin/dumpcap in child process: Permission denied

    When start wireshark, I met an error like: 引用 Couldn't run /usr/bin/dumpcap in child process: Permis ...

  9. python 微信跳一跳进阶

    上一篇是通过图片识别来计算跳的距离,再计算按压时间,最后通过adb来控制手机跳的 本篇讲的是通过机器学习,来训练的算法进行跳一跳的 链接: github:https://github.com/Prin ...

  10. java 基于tomcat的数据源案例

    1.在context中定义数据源 <?xml version="1.0" encoding="UTF-8"?> <Context path=& ...