js模拟淘宝网的多级选择菜单实现方法_javascript技巧

本文实例讲述了js模拟淘宝网的多级选择菜单实现方法。分享给大家供大家参考。具体如下：

这是一款基于js模拟淘宝网的多级选择菜单代码，这款菜单是模拟淘宝网的，是很早时候的淘宝网，现在已经没有了，本款菜单可以像级联菜单那样一级一级的选择数据，最后确定出数据。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-ftaobao-select-menu-codes/

具体代码如下：

<title>模拟淘宝网菜单选择</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css" media="all">
body *{
 font-size:14px;
 margin:0;
 padding:0;
}
#CategorySelector{
 clear:both;
 width:778px;
 height:220px;
 background-color:#FFF;
 margin-bottom:8px;
}
#CategorySelector ul{
 margin:0 3px 0 0;
 padding:0;
 border:1px solid #CCC;
 float:left;
 width:189px;
 height:218px;
 overflow:auto;
}
#CategorySelector ul.Blank{
 background-color:#F6F6F6;
}
#CategorySelector li{
 list-style-type:none;
 width:auto;
 height:20px;
 margin:0 1px !important;
 margin /**/:0 1px 0 -15px;
 padding:0;
 border:1px solid #FFF;
 line-height:20px;
 color:#444;
 text-indent:3px;
 cursor:default;
}
#CategorySelector li.Selected{
 background-color:#CAFFC0;
 border:1px solid #0A9800;
 color:#006623;
}
#CategorySelector li.IsParent{
 background-image:url(http://files.jb51.net/file_images/article/201508/201581893903737.gif);
 background-position:99% 50%;
 background-repeat:no-repeat;
}
#CategorySelector li.RecentUsed{
 color:#170;
}
#CategoryTitle{
 clear:both;
 width:778px;
 background-color:#FFF;
}
#CategoryTitle ul{
 float:left;
}
#CategoryTitle li{
 margin:0 3px 0 0;
 float:left;
 border:1px solid #CCC;
 width:189px;
 color:#0063C8;
 font-weight:bold;
 border-bottom:0px;
 height:23px;
 line-height:23px;
}
</style><div id="CategoryTitle">
 <ul id="TitleContent"><li>  </li></ul>
</div>

Java免费学习笔记：立即学习
解锁 Java 大师之旅：从入门到精通的终极指南