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. lua学习笔记（十二）

    弱引用table     lua使用自动内存管理机制,通过垃圾回收器来回收内存     垃圾回收器只能回收它认为是垃圾的内容,而不能回收用户认为是垃圾的内容     典型的例子栈,栈一般用一个数组和一 ...

  2. css写箭头

    /* 向上的箭头 */ .dot-top { font-size: 0; line-height: 0; border-width: 10px; border-color: red; border-t ...

  3. 苹果mac shell 终端 命令行快捷键——行首行尾

    ctrl+a //移到行首 ctrl+e //移到行尾 http://blog.csdn.net/hherima/article/details/47083739

  4. 快速用CMD打开当前目录

    按住shift,鼠标右键,选择在此处打开命令行窗口.

  5. saltstack内置state模块file之managed

    managed管理一个模板文件,载入到各个节点并运行相应配置 salt.states.file.managed(name, source=None, source_hash='', user=None ...

  6. intellij idea pycharm phpstorm webstorm 这些编辑器像 sublime text 一样使用 ctrl d 来操作光标多选。

    在Windows 和 Linux 快捷键是 Alt+J,在 Mac OS X 系统下快捷键是 Ctrl+G . 参考 https://blog.jetbrains.com/phpstorm/2014/ ...

  7. 记录-springMVC访问web-inf下文件问题+在jsp页面导入jquery插件路径不对问题

    环境:spring + springMvc + mybatis + maven 关于在springMVC环境访问web-inf目录下文件,其一有在springMVC xml文件下加 <!-- 对 ...

  8. rm_invalid_file

    import xlrd import time import sys import os import requests import sqlite3 import threading curPath ...

  9. centos samba 服务器的配置和使用

    1.安装samba服务 #yum install samba samba-client samba-swat 2.修改配置文件 #vi /etc/samba/smb.conf security = u ...

  10. Gradle-jar-aar

    Ref:Android Studio系列教程 Ref:Android Studio系列教程四--Gradle基础 Ref:Intellij IDEA 14.x 中的Facets和Artifacts的区 ...