导航栏应用广泛，每个网站都会制作自己的导航栏。最近专门了解了各种类型的导航栏，比如高亮显示的导航栏，中英文切换的导航栏，有弹性动画的导航栏，甚至有摩擦动画的导航栏(文字下面有横线)。每个导航栏都有自己的特点。例如，高亮显示的导航栏看起来很简单，但视觉效果很好。具有动画效果的导航栏也有很好的视觉效果。

接下来，我们将介绍四种广泛使用的导航栏，即高亮导航栏、中英文切换导航栏、弹性动画导航栏和摩擦运动动画导航栏。

1.突出显示的导航栏

这种导航栏：当你点击某个导航时，让它高亮显示。其他默认的原始样式，也就是说在不改变菜单的CSS代码的情况下，使用Js来控制菜单的背景。如果点击菜单项，会给出不同的背景颜色或背景图像，可以清晰的引导用户浏览的网站栏目，简单方便有效。

效果图如下：

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

！doctype html lang=' en ' head meta charset=' utf-8 ' title主页/title链接href='./CSS/demo1.css' rel='样式表' type=' text/CSS ' script src=' http :/js/jquery-3 . 1 . 0 . min . js ' language=' JavaScript ' charset=' utf-8 '/script script src=' http :/js/Demon 1 . js ' language=' JavaScript ' charset=' utf-8 '/script/head body div class=' nav ' ul class=' nav-list ' lia href=' index . html '主页/a/Li lia href='bbs.html '论坛/a/li lia href='blog.html '博客/a/Li lia href=' mall . html ' mall/a/Li lia href=' download . html '下载/a/li /ul /div

* { margin:0pxpadding:0pxfont-family: '微软雅黑'，Helvetica，无衬线，拉托；} .nav { background-color : # 222；高度： 40px；宽度：100%；margin-top :50 px；} .nav-list { width : 1000 px；margin: 0 auto} .nav-list li{ list-style:无；向左浮动：} .导航列表阿利{ color: # aaapadding:0 40px文本装饰：无；线高： 40px；display:块；border:无；} .内容{ margin:20px auto文本对齐：中心；} .导航列表li a:hover { color: # fff背景# 504d4d} span style=' color: # ff0000'。{ color: # fff背景# 504d4d}/spanjquery:

$(function(){ var index=(window . location . href . split('/')。长度)-1；var href=window . location . href . split('/')[index]。substr(0，4)；if (href！=null){ $('。a[href^=''导航列表。add CLaSS(' on ')；}else{ $('。阿利导航列表。add CLaSS(' on ')；} });主要的知识点在于如何检测当前网页的URL与A标签中的href的对应关系，然后据此改变样式。这里我们用window.location.href的方法获取网页的当前网站，用split()进行剪切，最后一部分内容就是我们想要的。正常情况下，并不需要完全匹配整个网址，所以这里我们使用substr()来匹配前几个字母。我在css文件中添加了on class="on "，通过在A标签中添加class="on "，然后在js中使用addClass()方法，完成了这个函数。

2.用于在中文和英文之间切换的导航栏

我们先来看看效果图：

我采用了两种方式，一种是css3，另一种是jquery。

首先，我们来谈谈如何用css3实现它：

html:

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title首页/title link rel='样式表href='./CSS/demo 2。CSS/头体div class=' nav ' ul class=' nav-list '阿利href='index.html '索引I首页/i /a /li阿利论坛/i /a /li阿利博客/i /a /li阿利商城/i /a /li阿利下载/I/a/Li/ul/div/body/html CSS :

* { margin :0 pxpadding :0 pxfont-family : '微软雅黑，Helvetica，无衬线，拉托；}李{列表式：无；} a { text-decoration : none} .nav { width :100%；高度： 40px背景色： # 222;页边距-顶部：100像素；飞越：隐藏；} .导航列表{宽度：1000像素；margin:0汽车高度： 40px} .导航列表li {左侧浮动：} .阿利区块导航表；transition: 0.2s }。导航列表李b .导航列表li i { color: # aaa线高： 40px显示器：块；padding:0 30px文本对齐：中心；} .导航列表Li b { font-weight :正常；} .导航列表li i{ font-style:正常；color: # fff背景色： # 333;} .导航列表阿利：悬停{边缘-顶部：-40px；}红色部分就是这个过程的实现，利用位置的变化，当鼠标移上去的时候，显示中文，也就是将英文移开，值得注意的是，需要利用飞越：隐藏属性，将其隐藏。如果想要速度慢一点的话，可以利用过渡属性设置变化时间，就可以减慢变化速度。

接着是用jquery实现：

css:

* { margin :0 pxpadding :0 pxfont-family : '微软雅黑，Helvetica，无衬线，拉托；}李{列表式：无；} a { text-decoration : none} .nav { width :100%；高度： 40px背景色： # 222;页边距-顶部：100像素；飞越：隐藏；} .导航列表{宽度：1000像素；margin:0汽车高度： 40px} .导航列表li {左侧浮动：} .阿利区块导航表；} .导航列表李b .导航列表li i { color: # aaa线高： 40px显示器：块；padding:0 30px文本对齐：中心；} .导航列表Li b { font-weight :正常；} .导航列表li i{ font-style:正常；color: # fff背景色： # 333;}jquery:

$(function(){ $(').导航列表阿利')。悬停(function(){ $(this)).停止()。animate({'margin-top':-40，200) }，function(){ $(this).停止()。动画({'margin-top':0}，200)})；});实现功能的重点是动画()函数的实现，通过设置上边距和时间实现，为了防止快速经过时，所有的都会变化（如下图所示),需要在动画()函数前面加上停止()函数，即在所有动画之前，先停止其他的动画，然后再开始这个动画。

3、带有弹性动画的导航条

我采用了三种方式实现，第一种是css3，第二种是jquery，第三种是jquery宽松版实现。效果图如下：

因为三种的布局是一样的，所以就直接附上超文本标记语言的结构代码。

html:

阿利首页/a /li阿利论坛/a div class=' nav-down ' a href=' # ' Java论坛/a a href='#'js论坛/a a href='#'jquery论坛/a a href='#'css3论坛/a /div /li阿利博客/a div class='nav-down' a href='# '精彩博文/a a href='# '博客专栏/a a href='# '博客专家/a a href='# '我的博客/a /div /li阿利商城/a div class='nav-down' a href='# '软件商城/a a href='#'C币商城/a a href='#'C币充值/a /div /li阿利下载/a div class='nav-down' a href='# '资源分类/a a href='# '我的资源a/分区/Li/ul/分区第一种：css3实现

* { margin :0 pxpadding :0 pxfont-family : '微软雅黑，Helvetica，无衬线，拉托；}李{列表式：无；} a { text-decoration : none} .nav { width :100%；高度： 40px页边距-顶部：50像素；背景色： # 222;} .导航导航列表{宽度： 1000像素；高度： 40pxmargin:0 auto}。导航。导航列表li{左侧浮动：相对位置：} .导航。阿利区块导航表；高度： 40px线高： 40pxpadding:0 30pxcolor: # aaa宽度：60 px} .导航导航列表李：气垫{ color: # fff背景色： # 333;} span style=' color: # ff0000 ' .导航。导航列表李：悬停。向下导航{显示：块；}/span .向下导航{宽度：150像素；背景色： # 333;绝对位置：top :40 pxleft :0 pxdisplay :无；} .导航。导航列表。向下导航{ display:块；线高： 30pxcolor: # aaa左填充left :30 px } span style=' color : # ff 0000 ' .导航。导航列表。向下导航a:hover { color: # fff背景色： # 333;}/span实现方法很简单，即刚开始让下拉的菜单隐藏，然后当鼠标经过的时候，将隐藏的菜单显示即可，具体实现代码如上的红色部分，这里不作详细讲解，代码很简单。

第二种：用jquery实现。

css:

* { margin :0 pxpadding :0 pxfont-family : '微软雅黑，Helvetica，无衬线，拉托；}李{列表式：无；} a { text-decoration : none} .nav { width :100%；高度： 40px页边距-顶部：50像素；背景色： # 222;} .导航导航列表{宽度： 1000像素；高度： 40pxmargin:0 auto}。导航。导航列表li{左侧浮动：相对位置：} .导航。阿利区块导航表；高度： 40px线高： 40pxpadding:0 30pxcolor: # aaa宽度：60 px} .导航导航列表李：气垫{ color: # fff背景色： # 333;} .向下导航{宽度：150像素；背景色： # 333;绝对位置：top :40 pxleft :0 pxdisplay :无；} .导航。导航列表。向下导航{ display:块；线高： 30pxcolor: # aaa左填充left:30px}。导航。导航列表。向下导航a:hover { color: # fff背景色： # 333;}jquery:

$(function(){ $(').导航。导航列表李' .悬停(function(){ $(this)).查找('。向下导航)。停止()。slideDown() }，function(){ $(this).查找('。向下导航)。停止()。向上滑动()})；});实现方法之前也讲过，在仿造百度换肤功能的部分，在这里采用的是向下滑动()和向上滑动()方法，如果想要设置变化时间，可以直接在括号中填入时间即可。

第三种：用jquery.easing实现。

钢性铸铁的样式跟用jquery实现的样式一样，这里就不增加空间再复制一遍了。

jquery:

pre name=' code ' class=' JavaScript ' $(function(){ $(').导航。导航列表李' .悬停(function(){ $(this)).查找('。向下导航)。停止()。slideDown({duration:500，eas : ' easeoboundound ' })}，function(){ $(this).查找('。向下导航)。停止()。slideUp({duration:500，eas : ' easoutbounce ' })})；});使用这种方法实现时记得引进包jquery.easing.1.3.min.js(我用的是这个版本，大家可以自行在网上下载)。在这里重点说一下思路：当鼠标移动的时候，弹性下拉菜单会跟随着下滑，当鼠标移开的时候，弹性下拉菜单会上滑，同样用到了前面所说的向下滑动()和向上滑动()方法，唯一不同的是在这里增加了动画，即采用松开实现，它其实就是类似于json的格式，插入期间和松开方式就可以，如果不懂里面的实现过程，可以查一下相关的说明文档，看看就会了。

4、摩擦运动动画跟随的导航条

实现思路就是：将鼠标移动的时候，把横条的位置移动到当前文字的下方。所以需要获取当前鼠标移动到的位置，即顶端和向左，然后将横条的顶端和左边的相应地改变就可以实现，具体实现如下html:(这里只贴上一个页面的代码)

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title摩擦运动动画跟随的导航条/title link href='./CSS/demo 7 . CSS“rel=”样式表'脚本src='http:/js/jquery-3。1 .0 .量滴js ' language=' JavaScript ' charset=' utf-8 '/script script src=' http :/js/jquery。放松。1 .3 .量滴js ' language=' JavaScript ' charset=' utf-8 '/script script src=' http :/js/demo 7。js ' language=' JAVAScript ' charset=' utf-8 '/script/head body div class=' nav ' div class=' nav-content ' ul class=' nav-list ' lia href=' index。' html '首页/a/li lia href='bbs.html '论坛/a/li lia href='blog.html '博客/a/li lia href='mall.html '商城/a/li lia href='download.html '下载/a/Li/ul div class=' nav-line '/div/div/div/body/html CSS :

* { margin :0 pxpadding : 0pxfont-family : '微软雅黑，Helvetica，无衬线，拉托；}李{列表式：无；} a { text-decoration : none} .nav { width :100%；高度：40 px页边距-顶部：50像素；背景-颜色： # f6f 6；} .导航nav-content { width :1000 px；margin:0汽车高度： 40px相对位置：} .导航。导航列表li{左侧浮动：} .导航。导航列表阿利{ color: # 333高度： 40px线高： 40px显示器：块；padding:0 30px }。导航。导航线{ height:3px背景技术# 35b558宽度宽度：100像素绝对位置：top:40pxleft:0px}。导航。导航列表阿利：悬停{ color : # 35b 558} .导航{ color: # 35b558}jquery:

$(function(){ var index=window。位置。href。拆分('/').长度-1;var href=window。位置。href。split('/')[index]；$('.导航。阿利导航列表添加CLaSS(“on”)；var li_width=$(' .导航。导航列表李安').out width()；var li_left=$(' .导航。导航列表李安').位置()。向左；$('.导航内容。导航线')。css({width:li_width，left : Li _ left })；$('.导航。导航列表李' .悬停(function(){ var li_width=$(this)).out width()；var li_left=$(this).位置()。向左；$('.导航内容。导航线')。停止()。animate({'width':li_width，' left':li_left}，{duration:1500，eas : ' easeOutElastic ' })；}，function(){ $(' .导航内容。导航线')。停止()。animate({'width':li_width，' left':li_left}，{duration:1500，eas : ' easeOutElastic ' })；});});主要说几个方法的作用：

1)外部宽度()获取元素的宽度（因为文字的个数不同，宽度就不一样，为了好看，横条需要适应文字的宽度);

2)位置()。左边的获取元素的位置中左边的的值；

3)动画化()实现动画效果；

4)持续时间和松开都是jquery宽松版插件的内容，即设置动画的效果。

以上所述是小编给大家介绍的jQuery CSS3实现四种应用广泛的导航条制作实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对我们网站的支持！