jquery导航效果（jquery导航栏代码）
本文目录一览：
- 1、jquery导航条效果请教，点击后更改对应标签的背景颜色。
- 2、jquery怎么控制当前页的导航菜单效果？
- 3、jQuery实现的导航动画效果(附demo源码)
- 4、如何用jquery来制作侧边导航栏？
jquery导航条效果请教，点击后更改对应标签的背景颜色。
可以这样做：
1、首先a{display：block；
width：60px;
height:40px;
}
把每个导航超链接a标签都设置成块儿，设置好尺寸，具体根据图片的尺寸。不做成块儿，就无法设置宽高，也就看不到你设置的背景图片的
然后
a:hover{
background:url(images/bg_2.jpg);
}
举例的这个bg_2.jpg就
2、首先制作好一个自己喜欢的导航条背景，长度和宽度都可设置成和官方一样的。
将自己制作好的导航条背景名字改成nv.png记住如果你做出来的是其他格式的话要转换成.png格式的才行。
3、打开你的ftp上传工具连接到网站目录。
1然后找到template/default/style/t5/下面的nv.png文件，这是官方默然的文件路径，如果你用的是其他模板的话找到nv.png。上传覆盖自己弄好的背景至template/default/style/t5里面后台更新缓存就完成更换了。
【延展】
导航条：
导航条起到了各个页面的关联作用，导航条的类型有很多，有通栏导航条，有为了美观性的中英切换导航，还有带有下拉框的导航条，这些导航条都是根据网站内容而定，因此学习该课程你能够了解现在网站经常出现的导航条样式，并可以灵活的运用。
jquery怎么控制当前页的导航菜单效果？
例如导航的div
div
class="6c15-9542-b602-53e9 nav"a
href="index.html"首页/aa
href="product.html"产品/aa
href="case.html"案例中心/a/div
下面的html内容：
div
class="9542-b602-53e9-7a40 main"
div
class="b602-53e9-7a40-4856 content"首页的内容/div
div
class="53e9-7a40-4856-78d3 content"产品的内容/div
div
class="7a40-4856-78d3-c221 content"案例中心的内容/div
/div
至于class=“content”可以是你自己加上的为了便于jQuery获取，没有这个样式类
script
type="text/javascript"
$(document).ready(function()
{
var
tabs
=
$('.nav
a');
var
cons
=
$('.main
div.content');
tabs.first().addClass("now").show();
//默认第一个显示
cons.first().show().nextAll().hide();
//默认第一个显示，其他隐藏
tabs.each(function(index){
$(this).mouseover(function(){
$(this).addClass("now").siblings().removeClass("now");
cons.eq(index).show().siblings().hide();
});
});
});
/script
jQuery实现的导航动画效果(附demo源码)
本文实例讲述了jQuery实现的导航动画效果。分享给大家供大家参考，具体如下：
经常在网上看到的，鼠标在导航上移动时，导航底部的横条会自动移动到鼠标悬浮的导航项上。
效果如下图：
利用jquery的
animate
函数，很好实现。代码很简单！
代码如下：
!DOCTYPE
html
html
head
meta
charset="utf-8"
title测试/title
script
src="jquery-1.9.1.min.js"/script
/head
body
div
class="4856-78d3-c221-1949 nav"
style="margin:
100px
auto;
width:960px;"
a
class="78d3-c221-1949-b39f active"
href="#"首页/a
a
href="#"产品/a
a
href="#"新闻中心/a
a
href="#"关于我们/a
a
href="#"联系我们/a
a
href="#"首页/a
a
href="#"首页/a
div
class="c221-1949-b39f-2edc line"/div
/div
style
.nav{
position:relative;
}
.nav
a{
padding:10px
20px;
border-bottom:solid
3px
#fff;
text-decoration:
none;
color:#666;
}
.nav
a:hover{
color:#66f;
}
.nav
.active,
.nav
.active:hover{
color:#f33;
}
.nav
.line{
position:absolute;
border-top:solid
2px
red;
width:0;
left:0;
top:0;
}
/style
script
function
navLine(o,
bo)
{
var
x
=
''
+
(o.position().top
+
o.outerHeight()
-
2)
+
'px';
var
y
=
''
+
o.position().left
+
'px';
var
w
=
''
+
o.outerWidth()
+
'px';
var
h
=
'2px';
$('.nav
.line').stop();
if
(bo)
{
$('.nav
.line').css({width:w,
height:h,
top:x,
left:y});
}
else
{
$('.nav
.line').animate({width:w,
height:h,
top:x,
left:y});
}
}
$(function(){
navLine($('.nav
.active'),
true);
$('.nav
a').hover(function(){
navLine($(this));
},
function(){
navLine($('.nav
.active'));
});
});
/script
/body
/html
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
如何用jquery来制作侧边导航栏？
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlejQuery动画垂直折叠导航效果/title
style type="text/css"
.menu_list{width:268px;margin:0 auto;}
.menu_head{
height: 47px;
line-height: 47px;
padding-left: 38px;
font-size: 14px;
color: #525252;
cursor: pointer;
border-left: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-top: 1px solid #F1F1F1;
position: relative;
margin: 0px;
font-weight: bold;
background: #f1f1f1 url(images/pro_left.png) center right no-repeat;
}
.menu_list .current{background:#f1f1f1 url(images/pro_down.png) center right no-repeat;}
.menu_body{
line-height: 38px;
border-left: 1px solid #e1e1e1;
backguound: #fff;
border-right: 1px solid #e1e1e1;
}
.menu_body a{display:block;height:38px;line-height:38px;padding-left:38px;color:#777777;background:#fff;text-decoration:none;border-bottom:1px solid #e1e1e1;}
.menu_body a:hover{text-decoration:none;}
/style
/head
body
!-- 代码部分begin --
div id="firstpane" class="1949-b39f-2edc-6cca menu_list"
h3 class="b39f-2edc-6cca-a3e0 menu_head current"哲学/h3
div style="display:block" class="2edc-6cca-a3e0-31f3 menu_body"
a href=""科学技术哲学/a
a href="#"宗教学/a
a href="#"美学/a
a href="#"伦理学/a
a href="#"逻辑学/a
a href="#"外国哲学/a
a href="#"中国哲学/a
a href="#"马克思主义哲学/a
/div
h3 class="cb80-0294-5091-281a menu_head"经济学/h3
div style="display:none" class="0294-5091-281a-6c15 menu_body"
a href="#"应用经济学/a
a href="#"理论经济学/a
a href="#"国民经济学/a
a href="#"区域经济学/a
a href="#"产业经济学/a
a href="#"国际贸易学/a
a href="#"劳动经济学/a
a href="#"政治经济学/a
/div
h3 class="5091-281a-6c15-9542 menu_head"法学/h3
div style="display:none" class="281a-6c15-9542-b602 menu_body"
a href="#"马克思主义基本原理/a
a href="#"马克思主义发展史/a
a href="#"马克思主义中国化研究/a
a href="#"国外马克思主义研究/a
a href="#"思想政治教育/a
/div
h3 class="6c15-9542-b602-53e9 menu_head"教育学/h3
div style="display:none" class="9542-b602-53e9-7a40 menu_body"
a href="#"体育人文社会学/a
a href="#"体育教育训练学/a
a href="#"民族传统体育学/a
a href="#"发展与教育心理学/a
a href="#"应用心理学/a
a href="#"教育学原理/a
a href="#"课程与教学论/a
a href="#"比较教育学/a
/div
/div
script src="js/jquery.js"/script
script
$(document).ready(function(){
$("#firstpane .menu_body:eq(0)").show();
$("#firstpane h3.menu_head").click(function(){
$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("current");
});
$("#secondpane .menu_body:eq(0)").show();
$("#secondpane h3.menu_head").mouseover(function(){
$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("current");
});
});
/script
!-- 代码部分end --
/body
/html
你自己引入jQuery。还有下面这两张图片啊
