jQuery实现的背景动态变化导航菜单效果

本文实例讲述了jQuery实现的背景动态变化导航菜单效果。分享给大家供大家参考。具体如下：

这里介绍一款使用jQuery插件制作完成的导航菜单，一大特点是，菜单的背景有动态效果，与使用的背景图片完全变换，动态效果是在鼠标悬停时出现，也就是把鼠标放在菜单上的时候，背景即开始滚动起来，看上去漂亮极了，而且兼容性也是相当不错的，推荐给网页设计者使用。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-codes/

具体代码如下：

html {
 height:100%; 
 min-height:100%;
}
body {
 position:relative;
 margin:0; padding:0;
 font-size:1em;
 font:62.8% Arial, Tahoma, Helvetica, sans-serif;
 min-width:1130px; 
 min-height:100%;
 height:100%; 
 background: #1e1e1d;
 color:#FFFFFF;
}
h1, h2, h3, h4, h5, h6, form, fieldset, dl, ul {margin:0; padding: 0;}
strong, b {font-weight:bold;}
em, i {font-style:italic;}
small {display:block;}
fieldset {border:0;}
img {border:none;}
a {
 color: #FFCC00;
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}
a:focus
{
 outline-style: none;
}
.go_back {
 position: absolute;
 top: 15px; left: 240px;
 color: #ff0072;
 font-size: 1.6em;
}
#content {
 position: relative;
 top: 100px;
 width:800px; 
 position:relative;
 margin: 0 auto;
}
#menu {
 float: left;
 width: 800px;
 list-style: none;
 line-height: 33px;
 background: url('images/menu_bg1.gif') no-repeat top left;
 border-top: 1px solid #000;
 border-bottom: 1px solid #000;
 margin: 0;
 padding:0;
}
#menu li {
 float: left;
 border-left: 1px solid #000;
}
#menu li a {
 float: left;
 font-size: 1.2em;
 color: #fff;
 border-left: 1px solid #ccc;
 text-decoration: none;
 background: url('images/menu_bg1.gif') no-repeat top left;
}
#menu li a:hover {
 background: url('images/menu_bg_active.gif') no-repeat top left;
}
#menu li:first-child { border: none; }
#menu li:first-child a { border: none; }






 

  
脚本下载
  
网页特效
  
教程文章
  
编程类库
  
最新更新
 

希望本文所述对大家的jquery程序设计有所帮助。