各式各样的导航条效果css3结合jquery代码实现

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

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

1、高亮显示的导航条 

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

效果图如下:

各式各样的导航条效果css3结合jquery代码实现

 

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <link href="https://www.jb51.net/css/demo1.css" type="text/css"> <script src="https://www.jb51.net/js/jquery-3.1.0.min.js" language="javascript" charset="utf-8"></script> <script src="https://www.jb51.net/js/demo1.js" language="javascript" charset="utf-8"></script> </head> <body> <div> <ul> <li><a href="https://www.jb51.net/index.html">首页</a></li> <li><a href="https://www.jb51.net/bbs.html">论坛</a></li> <li><a href="https://www.jb51.net/blog.html">博客</a></li> <li><a href="https://www.jb51.net/mall.html">商城</a></li> <li><a href="https://www.jb51.net/download.html">下载</a></li> </ul> </div> <div>首页</div> </body> </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; } <span>.nav-list li a.on{ color: #fff; background: #504d4d; }</span>jquery: $(function(){ var index = (window.location.href.split("https://www.jb51.net/").length)-1; var href = window.location.href.split("https://www.jb51.net/")[index].substr(0,4); if (href!=null){ $(".nav-list li a[href^='"+href+"']").addClass("on"); }else{ $(".nav-list li a[href='https://www.jb51.net/index.html']").addClass("on"); } });

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

2、中英文切换的导航条

先来看一下效果图: 

各式各样的导航条效果css3结合jquery代码实现

我采用了两种方式实现,一种用css3,另一种是用jquery实现。 

首先说一下用css3如何实现: 

html: 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <link href="https://www.jb51.net/css/demo2.css"> </head> <body> <div> <ul> <li> <a href="https://www.jb51.net/index.html"> <b>index</b> <i>首页</i> </a> </li> <li> <a href="https://www.jb51.net/index.html"> <b>bbs</b> <i>论坛</i> </a> </li> <li> <a href="https://www.jb51.net/index.html"> <b>blog</b> <i>博客</i> </a> </li> <li> <a href="https://www.jb51.net/index.html"> <b>mall</b> <i>商城</i> </a> </li> <li> <a href="https://www.jb51.net/index.html"> <b>download</b> <i>下载</i> </a> </li> </ul> </div> </body> </html>

css:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzjfzy.html