<!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. iframe自适应高度的多种方法方法小结（转）

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...

  2. 使用Python脚本获取指定格式文件列表的方法

    在Python环境下获取指定后缀文件列表的方式. 来源stackoverflow 这里简单以*.txt的作为例子. 使用glob(推荐) import glob, os os.chdir(" ...

  3. android的注意点

    1.使用Message.callback Message msg = Message.obtain(myThreadHandler,new Runnable() { @Override public  ...

  4. ZigBee物理层协议规范

    在不同的国家和地区,ZigBee技术所允许使用的工作频率是不同的,而对于不同的应用频率范围,其调制方式.传输速率均不同,众所周知,蓝牙技术在世界多数国家都采用统一的频率范围,其范围为2.4GHz的IS ...

  5. 浅谈 qmake 之 shadow build（就是将源码路径和构建路径分开）

    shadow build shadow build 是什么东西?就是将源码路径和构建路径分开(也就是生成的makefile文件和其他产物都不放到源码路径),以此来保证源码路径的清洁. 这不是qmake ...

  6. Bayesian Formulation on Cooperative Tracking

    Suppose a joint state representing a set of \(N_{n}\) nodes moving in a field\[    \textbf{X}=    \b ...

  7. C读txt到二维数组

    #include<stdio.h> #include<stdlib.h> #define maxn 200 void main() { FILE *fp; int s[maxn ...

  8. 安装oracle客户端（navicat for oracle）

    本文使用Navicat for Oracle工具连接oracle 安装的过程我就不在此赘述,跟一般软件的安装过程类似.下面主要讲解Navicat的配置. 1.启动该工具,出现如下的开始界面,单击“连接 ...

  9. Windows Server 2012 R2超级虚拟化之七 远程桌面服务的增强

    Windows Server 2012 R2超级虚拟化之七  远程桌面服务的增强 在Windows Server 2012提供的远程桌面服务角色,使用户能够连接到虚拟桌面. RemoteApp程序.基 ...

  10. Python学习入门基础教程(learning Python)--8.1 字典数据添加与删除

             1. 字典数据添加 这个很简单,像赋值那样一项项赋值即可.语法结构如下 dict_obj[key] = value 添加数据项示例如下 >>> d1 = {'cod ...