前端开发各种导航条实现原理

合肥 前端开发 招聘
前端开发南京招聘
常州前端开发招聘

1.当前页面高亮显示的通栏导航条
.on{高亮显示的样式}
当前页面高亮显示的通栏导航条实现远离的js部分
$(function(){
var index=window.location.href.split(“/”).length-1;
var href=window.location.href.split(“/”).[index].substr(0,4);
$(“.list li a[href^=”’+href+”’]”).addClass(“on”);
})

2.滑过中英切换的导航条
li标签里的中英文的格式标签样式display设置成block,鼠标移入导航条中的li里的a标签时margin-top设成负的导航条高度,给a的初始值加入transition样式(或者使用jquery的animate),给父级加overflow:hidden

3.带下拉框导航条
css实现方法:鼠标移入(hover)display的改变;
jquery实现方法:鼠标移入(hover)slideDown和slideUp ;
另外使用jquery插件easing可以实现下拉菜单的弹性动画。

4.导航条下面有横线高亮的导航条
利用当前a的jquery.outerWidth() 和jquery.position().left 定位下面的高亮横线,实现默认或者鼠标移入的高亮横线显示。可使用jquery插件easing实现左右摩擦的动画效果。

网站前端开发 招聘要求
泰顺web前端开发招聘
前端开发招聘任职要求
» 本文来自:前端开发者 » 《前端开发各种导航条实现原理》
» 本文链接地址:https://www.rokub.com/7300.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!