微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

1、高亮显示的导航条

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

效果图如下:

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

rush:xhtml;"> <Meta charset="UTF-8"> <a href="https://www.jb51.cc/tag/shouye/" target="_blank" class="keywords">首页</a>

css:

rush:css;"> *{ margin:0px; padding: 0px; font-family: "Microsoft Yahei",Lato; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width:100%; height:40px; margin-top:50px; background-color: #f6f6f6; } .nav .nav-content{ width:1000px; margin:0 auto; height: 40px; position: relative; } .nav .nav-list li{ float: left; } .nav .nav-list li a{ color:#333; height: 40px; line-height: 40px; display: block; padding:0 30px; } .nav .nav-line{ height:3px; background: #35b558; width:100px; position: absolute; top:40px; left:0px; } .nav .nav-list li a:hover{ color:#35b558; } .nav .nav-list li a.on{ color:#35b558; }

jquery:

rush:js;"> $(function () { var index = window.location.href.split("/").length-1; var href = window.location.href.split("/")[index]; $(".nav .nav-list li a[href='"+href+"']").addClass("on");

var li_width = $(".nav .nav-list li a.on").outerWidth();
var li_left = $(".nav .nav-list li a.on").position().left;
$(".nav-content .nav-line").css({width:li_width,left:li_left});

$(".nav .nav-list li").hover(function(){
var li_width = $(this).outerWidth();
var li_left = $(this).position().left;
$(".nav-content .nav-line").stop().animate({"width":li_width,"left":li_left},{duration:1500,easing:"eaSEOutElastic"});
},function(){
$(".nav-content .nav-line").stop().animate({"width":li_width,easing:"eaSEOutElastic"});
});
});

主要说几个方法的作用:

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

2)position().left获取元素的位置中left的值;

3)animate()实现动画效果

4)duration和easing都是jquery easing插件内容,即设置动画的效果

在这里,所有的分享就结束了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐