简单的树形菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head >
<meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
<title > 简单的树形菜单</title >
<style type ="text/css" >
ul {
list-style :none ;
font-size :12 px ;
display :none ;
}
a {
text-decoration :none ;
font-size :13 px ;
color :#666 ;
}
a :hover {
color :#ff7300 ;
}
</style >
<script type ="text/javascript" >
function showList () {
if ($("game" ).style.display=="none" ){
$("game" ).style.display="block" ;
}else {
$("game" ).style.display="none" ;
}
}
function $ (id) {
return document.getElementById(id);
}
</script >
</head >
<body >
<p > <a href ="javascript:showList();" > <img src ="images/fclose.gif" /> 热门网游</a > </p >
<ul id ="game" >
<li > <img src ="images/doc.gif" /> 英雄联盟</li >
<li > <img src ="images/doc.gif" /> 魔兽世界</li >
<li > <img src ="images/doc.gif" /> 节奏大师</li >
<li > <img src ="images/doc.gif" /> 天天酷跑</li >
</ul >
</body >
</html >
高级树形菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head >
<meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
<title > 高级树形菜单</title >
<style type ="text/css" >
ol {
display : none ;
}
a :hover {
color :#ff7730 ;
}
</style >
<script type ="text/javascript" >
function showList1 () {
if ($("first" ).style.display=="none" ){
$("first" ).style.display="block" ;
$("second" ).style.display="none" ;
$("third" ).style.display="none" ;
$("fouth" ).style.display="none" ;
}else {
$("first" ).style.display="none" ;
$("second" ).style.display="none" ;
$("third" ).style.display="none" ;
$("fouth" ).style.display="none" ;
}
}
function showList2 () {
if ($("second" ).style.display=="none" ){
$("second" ).style.display="block" ;
$("first" ).style.display="none" ;
$("third" ).style.display="none" ;
$("fouth" ).style.display="none" ;
}else {
$("second" ).style.display="none" ;
$("first" ).style.display="none" ;
$("third" ).style.display="none" ;
$("fouth" ).style.display="none" ;
}
}
function showList3 () {
if ($("third" ).style.display=="none" ){
$("third" ).style.display="block" ;
$("first" ).style.display="none" ;
$("second" ).style.display="none" ;
$("fouth" ).style.display="none" ;
}else {
$("third" ).style.display="none" ;
$("first" ).style.display="none" ;
$("second" ).style.display="none" ;
$("fouth" ).style.display="none" ;
}
}
function showList4 () {
if ($("fouth" ).style.display=="none" ){
$("fouth" ).style.display="block" ;
$("first" ).style.display="none" ;
$("second" ).style.display="none" ;
$("third" ).style.display="none" ;
}else {
$("fouth" ).style.display="none" ;
$("first" ).style.display="none" ;
$("second" ).style.display="none" ;
$("third" ).style.display="none" ;
}
}
function $ (id) {
return document.getElementById(id);
}
</script >
</head >
<body >
<p > <a href ="javascript:showList1();" > <img src ="images/fclose.gif" /> 注册认证</a > </p >
<ol id ="first" >
<li > <img src ="images/doc.gif" /> 注册激活</li >
<li > <img src ="images/doc.gif" /> 安全认证</li >
<li > <img src ="images/doc.gif" /> 支付宝认证</li >
</ol >
<p > <a href ="javascript:showList2();" > <img src ="images/fclose.gif" /> 买家帮助</a > </p >
<ol id ="second" >
<li > <img src ="images/doc.gif" /> 买家管理</li >
<li > <img src ="images/doc.gif" /> 买家注册</li >
<li > <img src ="images/doc.gif" /> 买家评价</li >
<li > <img src ="images/doc.gif" /> 买家退货</li >
</ol >
<p > <a href ="javascript:showList3();" > <img src ="images/fclose.gif" /> 卖家帮助</a > </p >
<ol id ="third" >
<li > <img src ="images/doc.gif" /> 店铺设置</li >
<li > <img src ="images/doc.gif" /> 店铺装修</li >
<li > <img src ="images/doc.gif" /> 店铺发货</li >
<li > <img src ="images/doc.gif" /> 店铺入库</li >
</ol >
<p > <a href ="javascript:showList4();" > <img src ="images/fclose.gif" /> 个人资料修改</a > </p >
<ol id ="fouth" >
<li > <img src ="images/doc.gif" /> 修改密码</li >
<li > <img src ="images/doc.gif" /> 修改图像</li >
<li > <img src ="images/doc.gif" /> 修改手机号码</li >
<li > <img src ="images/doc.gif" /> 修改信息</li >
</ol >
</body >
</html >