html菜单效果,HTML+JS实现的简单菜单效果

一、实现的功能：

鼠标移至菜单项，显示子菜单；

鼠标移开菜单项，隐藏子菜单。

二、实现原理简述：

菜单及子菜单项位于同一容器中(我用了

)，各子容器为

(每一行内容放在一个div中)；

鼠标进入

事件，显示子菜单

，鼠标离开，隐藏子菜单。

三、部分代码：

HTML布局部分

菜单 菜单项1 菜单项2

JS脚本部分

function fun1()

{

document.getElementById('index').style.backgroundColor="#FFF0F5";

document.getElementById('info1').style.display='block';

document.getElementById('info2').style.display='block';

}

function fun2()

{

document.getElementById('index').style.backgroundColor="#FFF";

document.getElementById('info1').style.display='none';

document.getElementById('info2').style.display='none';

}

function fun3()

{

document.getElementById('info1').style.backgroundColor="#FFFAF0";

}

function fun4()

{

document.getElementById('info1').style.backgroundColor="#FFF";

}

function fun5()

{

document.getElementById('info2').style.backgroundColor="#FFFAF0";

}

function fun6()

{

document.getElementById('info2').style.backgroundColor="#FFF";

}