横条导航窗体html代码,各式各样的导航条效果css3结合jquery代码实现

导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条(文字下面有横线)等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。

接下来将会一一介绍4种应用比较广的导航条，即：高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，具有摩擦运动动画的导航条。

1、高亮显示的导航条

这种导航条：当你点击某一个导航时，就让他高亮显示，其他的默认原来的样式，也就是说在不改变菜单CSS代码的情况下，用Js控制菜单的背景，假如该菜单项被点击后，将赋予它一个与众不同的背景颜色或背景图像，这样可以清淅的指引用户下在浏览的网站栏目，简单方便而且效果好。

效果图如下：

html:(这里省略了其他html文件的代码，只贴出一个index.html的代码)

首页

• 首页
• 论坛
• 博客
• 商城
• 下载

首页

css：

*{

margin:0px;

padding:0px;

font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;

}

.nav{

background-color: #222;

height: 40px;

width:100%;

margin-top:50px;

}

.nav-list{

width: 1000px;

margin: 0 auto;

}

.nav-list li{

list-style: none;

float: left;

}

.nav-list li a{

color: #aaa;

padding:0 40px;

text-decoration: none;

line-height: 40px;

display: block;

border: none;

}

.content{

margin:20px auto;

text-align: center;

}

.nav-list li a:hover{

color: #fff;

background: #504d4d;

}

.nav-list li a.on{

color: #fff;

background: #504d4d;

}jquery:

$(function(){

var index = (window.location.href.split("/").length)-1;

var href = window.location.href.split("/")[index].substr(0,4);

if (href!=null){

$(".nav-list li a[href^='"+href+"']").addClass("on");

}else{

$(".nav-list li a[href='index.html']").addClass("on");

}

});

其中主要的知识点在于如何检测当前网页的网址和a标签中的href对应，然后相应地改变样式，在这里用了window.location.href的方法去获取网页当前的网站，用split()切割，最后一部分的内容就是我们想要的。在正常情况下，并不需要完全匹配整个网址，所以在这里用了substr()的方法匹配前几位字母。我在css文件中添加了on类，通过给a标签增加class=“on”,然后通过js中的addClass()方法就完成了功能。

2、中英文切换的导航条

先来看一下效果图：

我采用了两种方式实现，一种用css3,另一种是用jque