js+css实现导航效果实例_javascript技巧

 本文实例讲述了js+css实现导航效果的方法。分享给大家供大家参考。具体实现方法如下：

1. 程序代码如下：

代码如下:





document.execCommand("BackgroundImageCache", false, true);

菜单1

菜单选项1-2

菜单选项1-2

菜单选项1-2-1

菜单选项1-2-2

菜单选项1-2

菜单选项1-2

菜单2

菜单选项2-2

菜单选项2-2

菜单选项2-2-1

菜单选项2-2-2

菜单选项2-2-1

菜单选项2-2-2

菜单选项2-2

菜单选项2-2

菜单3

菜单选项3-2

菜单选项3-2

菜单选项3-2-1

菜单选项3-2-2

菜单选项3-2-1

菜单选项3-2-2

菜单选项3-2-1

菜单选项3-2-2

菜单选项3-2

菜单选项3-2

for(var x = 1; x < 4; x++)
{
var menuid = document.getElementById("menu"+x);
menuid.num = x;
type();
}
function type()
{
var menuh2 = menuid.getElementsByTagName("h2");
var menuul = menuid.getElementsByTagName("ul");
var menuli = menuul[0].getElementsByTagName("li");
menuh2[0].onmouseover = show;
menuh2[0].onmouseout = unshow;
menuul[0].onmouseover = show;
menuul[0].onmouseout = unshow;
function show()
{
menuul[0].className = "clearfix typeul block"
}
function unshow()
{
menuul[0].className = "typeul"
}
for(var i = 0; i < menuli.length; i++)
{
menuli[i].num = i;
var liul = menuli[i].getElementsByTagName("ul")[0];
if(liul)
{
typeshow()
}
}
function typeshow()
{
menuli[i].onmouseover = showul;
menuli[i].onmouseout = unshowul;
}
function showul()
{
menuli[this.num].getElementsByTagName("ul")[0].className = "block";
}
function unshowul()
{
menuli[this.num].getElementsByTagName("ul")[0].className = "";
}
}

2. 程序效果

希望本文所述对大家的javascript程序设计有所帮助。