Html5-横向导航菜单实现,原生js和jquery分别实现横向导航菜单效果

本文实例为大家分享了原生js和jquery横向导航菜单的制作方法，供大家参考，具体内容如下

原生javascript实现：

这一次要实现的是鼠标放上去以后，菜单栏被选中的那一栏水平拉伸，鼠标离开后水平收缩。并带有一定的时间性，使肉眼能够看出其拉伸收缩的动画效果。

开始用javascript进行编写：

首先在之前水平方向的导航栏上进行操作，将第一栏和选中栏的样式只改变为背景变黑色，文字变白色

.on,a:hover{background:#000000;color:#FFFFFF;}

之后开始写javascript脚本：

window.οnlοad=function(){

var A=document.getElementsByTagName("a");

for(var i=0;i

{

A[i].οnmοuseοver=function(){

clearInterval(this.time);

var This=this;

This.time=setInterval(function(){

if(This.offsetWidth>=200)

{

clearInterval(This.time);

}

This.style.width=This.offsetWidth+8+"px";

},50)

}

A[i].οnmοuseοut=function(){ </