<!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>jQuery ui背景色动态渐变导航菜单_我爱模板 www.5imoban.net</title>
<!--引入开始-->
<style type="text/css">
#nav{position:relative; margin:40px; background:#eee; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:21px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:2px 2px 3px #ccc; -webkit-box-shadow:2px 2px 3px #ccc; box-shadow:2px 2px 3px #ccc;}
#nav .clear{clear:both;}
#nav ul{padding:0 0 0 5px; margin:0; list-style:none;}
#nav li{float:left; margin:5px 10px 5px 0; background:#eee; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
#nav li a{text-decoration:none; color:#9e0039; display:block; padding:10px 15px;}
</style>
<script src="http://www.5imoban.net/download/jquery/jquery-1.6.min.js"></script>
<script src="http://www.5imoban.net/download/jquery/jQuery-UI-v1.9.2.min.js"></script>
<!-- IE 圆角 -->
<script src="http://www.5imoban.net/download/jquery/DD_roundies_0.0.2a-min.js"></script>
<script>
DD_roundies.addRule("#nav", "5px");
DD_roundies.addRule("#nav li", "5px");
</script>
<script>
$(document).ready(function(){
$nav_li=$("#nav li");
$nav_li_a=$("#nav li a");
var animSpeed=450; //背景色渐变时间，单位毫秒
var hoverTextColor="#fff"; //鼠标移上去的文字颜色
var hoverBackgroundColor="#9e0039"; //鼠标移上去的最终背景色
var textColor=$nav_li_a.css("color");
var backgroundColor=$nav_li.css("background-color");
//文字变色动画
$nav_li_a.hover(function() {
var $this=$(this);
$this.stop().animate({ color: hoverTextColor }, animSpeed);
},function() {
var $this=$(this);
$this.stop().animate({ color: textColor }, animSpeed);
});
//背景变色动画
$nav_li.hover(function() {
var $this=$(this);
$this.stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
},function() {
var $this=$(this);
$this.stop().animate({ backgroundColor: backgroundColor }, animSpeed);
});
});
</script>
<!--引入结束-->
<style>
body{margin:0; padding:0;}
ul#wimoban_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;}
ul#wimoban_nav li{float:left; display:inline; margin:10px;}
ul#wimoban_nav li a{display:block; font-size:16px;}
ul#wimoban_nav li a,#wimoban_p,#wimoban_p a{color:#000; font-family:"微软雅黑";}
ul#wimoban_nav li a:hover,#wimoban_p a:hover{color:red;}
#wimoban_p{text-align:center; font-size:14px; clear:both;}
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false'>
<ul id="wimoban_nav">
<li><a title="返回网站首页" href="http://www.5imoban.net/">首页</a></li>
<li><a title="网页PSD模板下载" href="http://www.5imoban.net/psdmoban/">PSD模板</a></li>
<li><a title="网页CSS模板下载" href="http://www.5imoban.net/cssmoban/">CSS模板</a></li>
<li><a title="网页特效、网页插件" href="http://www.5imoban.net/texiao/">特效插件</a></li>
<li><a title="整站源码下载" href="http://www.5imoban.net/yuanma/">源码下载</a></li>
<li><a title="酷站欣赏" href="http://www.5imoban.net/kuzhan/">酷站欣赏</a></li>
<li><a title="建站资源" href="http://www.5imoban.net/ziyuan/">建站资源</a></li>
<li><a title="建站视频教程、建站教程" href="http://www.5imoban.net/jiaocheng/">建站教程</a></li>
<li><a title="建站心得、互联网事、心境之旅" href="http://www.5imoban.net/article/">心境之旅</a></li>
</ul>
<!-- 代码开始 -->
<div id="nav">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#experiments">Experiments</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="clear"></div>
</div>
<!-- 代码结束 -->
<div id="wimoban_p">
<p>来代码整理：<a href="http://www.5imoban.net/" title="模板网" alt="模板网">我爱模板网</a></p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p></p>
</div>
</body>
</html>

使用方法

1、在head引入下面的代码：

01 <style type="text/css">
02 #nav{position:relative; margin:40px; background:#eee; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:21px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:2px 2px 3px #ccc; -webkit-box-shadow:2px 2px 3px #ccc; box-shadow:2px 2px 3px #ccc;}
03 #nav .clear{clear:both;}
04 #nav ul{padding:0 0 0 5px; margin:0; list-style:none;}
05 #nav li{float:left; margin:5px 10px 5px 0; background:#eee; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
06 #nav li a{text-decoration:none; color:#9e0039; display:block; padding:10px 15px;}
07 </style>
11 <script>
12 DD_roundies.addRule("#nav", "5px");
13 DD_roundies.addRule("#nav li", "5px");
14 </script>
15 <script>
16 $(document).ready(function(){
17     $nav_li=$("#nav li");
18     $nav_li_a=$("#nav li a");
19     var animSpeed=450; //背景色渐变时间，单位毫秒
20     var hoverTextColor="#fff"; //鼠标移上去的文字颜色
21     var hoverBackgroundColor="#9e0039"; //鼠标移上去的最终背景色
22     var textColor=$nav_li_a.css("color");
23     var backgroundColor=$nav_li.css("background-color");
24     //文字变色动画
25     $nav_li_a.hover(function() {
26         var $this=$(this);
27         $this.stop().animate({ color: hoverTextColor }, animSpeed);
28     },function() {
29         var $this=$(this);
30         $this.stop().animate({ color: textColor }, animSpeed);
31     });
32     //背景变色动画
33     $nav_li.hover(function() {
34         var $this=$(this);
35         $this.stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
36     },function() {
37         var $this=$(this);
38         $this.stop().animate({ backgroundColor: backgroundColor }, animSpeed);
39     });
40 });
41 </script>

2、在您的导航区域引入下面的html代码：

01 <div id="nav">
02 <ul>
03     <li><a href="#about">About</a></li>
04         <li><a href="#portfolio">Portfolio</a></li>
05         <li><a href="#recent">Recent</a></li>
06         <li><a href="#experiments">Experiments</a></li>
07         <li><a href="#contact">Contact</a></li>
08     </ul>
09     <div class="clear"></div>
10 </div>

jQuery ui背景色动态渐变导航菜单的更多相关文章

  1. jQuery漂亮图标的垂直导航菜单

    效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...

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

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

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

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

  4. jquery仿天猫商城左侧导航菜单

    之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...

  5. （转）jquery仿天猫商城左侧导航菜单

    原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...

  6. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

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

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

  8. jquery实现的个人中心导航菜单

    之前为大家介绍了一款jquery和css3实现的很酷的菜单导航.这是一款由jquery开发的导航菜单.适合放在门户网站的个人用户中心后台.效果和美观都非常不错.我们先一起看看效果图: 在线预览   源 ...

  9. jQuery 简单漂亮的 Nav 导航菜单

    自己写的一个简单的导航菜单,先看效果: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一 ...

随机推荐

  1. Linux下源码编译安装rpy2

    R(又称R语言)是一款开源的跨平台的数值统计和数值图形化展现工具.rpy2是Python直接调用R的第三方库,它可以实现使用python读取R的对象.调用R的方法以及Python与R数据结构转换等.这 ...

  2. 匈牙利算法（素数伴侣（HW1112））

    #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<vector> #include<string&g ...

  3. 【测试技术】ant中的for循环用法

    有的时候,我们希望ant中也能类似脚本语言一样进行for循环,以实现一些重复性工作.由于ant核心包并未提供此功能,所以需要下载一个扩展包扔到ant的lib目录下去.详细步骤如下: 1.下载核心包:a ...

  4. Qt creator error: LNK1123: 转换到 COFF 期间失败: 文件无效或损坏（vs2010的嵌入式清单文件）

    下面是vs2010导入别人文件时出现的问题的解决方案:VS2010在经历一些更新后,建立Win32 Console Project时会出“error LNK1123” 错误,解决方案为将 项目|项目属 ...

  5. AdminCMD

    program AdminCMD; {$APPTYPE CONSOLE} uses Windows, ShellApi, SysUtils; function RunAsAdmin(const iEx ...

  6. 常用的wsdl地址

    天气预报Web Service,数据来源于中国气象局 Endpoint Disco WSDL IP地址来源搜索Web Service(是目前最完整的IP地址数据) Endpoint Disco WSD ...

  7. INSERT INTO blog_appitem (user_id,appid,app_secret,is_valid) VALUES (1, 'wxf415741de036114c','48e1e345fd5f11c93af18ff1714c7f78',1)

    微信公众平台 INSERT INTO blog_appitem (user_id,appid,app_secret,is_valid) VALUES (1, 'wxf415741de036114c', ...

  8. SQL中如何使用UPDATE语句进行联表更新(转)

    在本例中: 我们要用表member中的name,age字段数据去更新user中的同字段名的数据,条件是当user 中的id字段值与member中的id字段值相等时进行更新. SQL Server语法: ...

  9. 网易云课堂_C++程序设计入门(上)_第2单元：丹青画松石– EGE图形库

    第2节:一个简单的EGE程序 #ifndef _GRAPHICS_H_ #define _GRAPHICS_H_ #ifndef __cplusplus #error You must use C++ ...

  10. 初探swift语言的学习笔记七(swift 的关健词)

    每一种语言都有相应的关键词,每个关键词都有他独特的作用,来看看swfit中的关键词: 关键词: 用来声明的: “ class, deinit, enum, extension, func, impor ...