本文介绍使用JavaScript和CSS实现仿天猫风格的侧边网页菜单效果。该示例实现了主分类鼠标悬停时二级分类向右展开的功能，结构类似淘宝、京东等电商网站的导航栏。文章提供了完整的HTML/CSS/JS代码及在线演示地址，供开发者参考与二次开发。
JavaScript与CSS实现仿天猫侧边导航菜单
本文通过具体实例，展示如何利用JavaScript结合CSS技术，实现一个模仿天猫风格的侧边网页菜单效果，供读者参考学习。
这是一个手动编写的仿天猫菜单效果示例，目前已实现二级分类功能，但界面美化部分尚未完成，使用者可根据需求自行完善。JavaScript逻辑部分已调试通过：当鼠标移入主分类时，二级分类会向右展开显示。这种导航形式常见于淘宝网、天猫及京东等电商平台。测试时，需先点击菜单以激活主菜单显示。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-ftamil-web-menu-style-codes/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿天猫侧边网页菜单</title>
<style type="text/css">
*{margin:0; padding:0;}
body{ font-size:14px; font-family:"宋体";}
h1, h2, h3{ font-size:14px; font-weight:normal;}
li{ list-style:none;}
a{ color:#333; text-decoration:none;}
#nav{ width:202px; height:35px; background:#C00; margin:50px 0 0 20px;}
#nav h1{ padding-left:17px; line-height:35px; color:#fff; margin-right:17px;}
#box{ width:200px; border:1px solid #B00; border-top:none; margin-left:20px; display:none;}
#subnav{width:200px;}
#subnav .list{ width:200px; height:30px;}
#subnav .list h2{ width:160px; height:30px; padding-left:30px; line-height:30px; margin-right:10px;}
#subnav .list a:hover, #subnav .active a:hover{ color:#900; font-weight:bold;}
#subnav .active{ width:200px; height:30px; border-bottom:1px solid #b00; border-top:1px solid #b00; position:relative;}
#subnav .active h2{ width:170px; height:30px; padding-left:30px; line-height:30px; background:#fff; position:absolute; left:1px; top:0; z-index:4;}
#subnav .list_nav{ width:500px; overflow:hidden; border:1px solid #b00; position:absolute; left:200px; top:-1px; z-index:3; display:none;}
</style>
<script type="text/javascript">
window.onload=function()
{
var oNav=document.getElementById('nav');
var oBox=document.getElementById('box');
var oSubnav=document.getElementById('subnav');
var aLi=oSubnav.getElementsByTagName('li');
var i=0;
oNav.onclick=function()
{
if(oBox.style.display=='block')
{
oBox.style.display='none';
}
else
{
oBox.style.display='block';
}
}
for(i=0;i<aLi.length;i++)
{
if(aLi[i].className=='list')
{
aLi[i].onmousemove=function()
{
for(i=0;i<aLi.length;i++)
{
var aDivList=this.getElementsByTagName('div')[0];
aDivList.style.display='block';
this.className='active';
}
}
aLi[i].onmouseout=function()
{
for(i=0;i<aLi.length;i++)
{
var aDivList=this.getElementsByTagName('div')[0];
aDivList.style.display='none';
this.className='list';
}
}
}
}
};
</script>
</head>
<body>
<div id="nav">
<h1>所有商品分类</h1>
</div>
<div id="box">
<ul id="subnav">
<li class="list">
<h2><a href="#">服饰内衣、鞋靴运动</a></h2>
<div class="list_nav">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</li>
<li class="list">
<h2><a href="#">电子商品</a></h2>
<div class="list_nav">
<ul>
<li>222</li>
<li>2222</li>
<li>2222</li>
<li>22222</li>
</ul>
</div>
</li>
<li class="list">
<h2><a href="#">服饰内衣、鞋靴运动</a></h2>
<div class="list_nav">
<ul>
<li>3333</li>
<li>3333</li>
<li>3333</li>
<li>3333</li>
</ul>
</div>
</li>
<li class="list">
<h2><a href="#">服饰内衣、鞋靴运动</a></h2>
<div class="list_nav">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>希望本文所述对大家的javascript程序设计有所帮助。