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

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实现左右摩擦的动画效果。