<!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. python运维开发(九)----socket

    内容目录: socket通信过程 单线程socket 多线程socket ThreadingTCPServer socket socket通常也称作"套接字",用于描述IP地址和端 ...

  2. C语言的本质（28）——C语言与汇编之用汇编写一个Helloword

    为了更加深入理解C语言的本质,我们需要学习一些汇编相关的知识.作为最基本的编程语言之一,汇编语言虽然应用的范围不算很广,但是非常重要.因为它能够完成许多其它语言所无法完成的功能.就拿 Linux 内核 ...

  3. VC实现图片拖拽及动画

    基础知识 1.PictureBox控件的使用 2.加载位图文件 1.通过文件路径获得位图句柄 //获得位图句柄  void CMovePictureDlg::GetHandleFromPath(CSt ...

  4. poj 3287 The Trip, 2007_贪心

    题意:把一个包放入另一个包内,使得总共要带的件数最少,就是说大包可以装小包,且一个大包只能装一个小包,但是这个小包可以继续装更小的包. 思路:因为相同大小的包不能互相装,所以最小数量就是有相同尺寸的包 ...

  5. 国内常用ntp服务器ip地址

    ntp.sjtu.edu.cn 202.120.2.101 (上海交通大学网络中心NTP服务器地址)s1a.time.edu.cn 北京邮电大学s1b.time.edu.cn 清华大学s1c.time ...

  6. oracle记录各登陆主机用户名,登陆ip,所执行的命令

    oracle记录各登陆主机用户名,登陆ip,所执行的命令 /etc/profile #history USER_IP=`>/dev/null| awk '{print $NF}'|sed -e ...

  7. 2.2.2 胸腰差和胸臀差的应用_米人NOONE_新浪博客

    2.2.2  胸腰差和胸臀差的应用_米人NOONE_新浪博客 腰差和胸臀差的应用(2009-06-16 19:24:57)转载▼标签:校园         前面已经对这两个概念作了简单的讲解.这两个概 ...

  8. 关于CMCC(中国移动)、CU(中国联通)、CT(中国电信)的一些笔记

    一.三大运营商网络 CMCC(ChinaMobileCommunicationCorporation):GSM(2G).TD-SCDMA(3G).TD-LTE(4G); CU(China Unicom ...

  9. 关于linux系统下的uname -a命令

  10. STL map+vector+struct的使用示例

    个人编写的小例子,没有注释,刚毕业时作为技术调研随手编写,仅供参考: #include<iostream> #include<map> #include<vector&g ...