写在前面：
1、前端新手
2、欢迎交流
3、
源代码百度云页面示例链接： http://pan.baidu.com/s/1nt0yjd3
链接失效请留言
效果图：
代码部分：jquery部分：
<script> $(function(){ $("#1,#2").toggle( function(){ var ss=$(this).attr("id"); $(this).children().parent().next().slideDown(1000); }, function(){ $(this).children().parent().next().hide(500); }); }); </script>
HTML部分：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style> 7 html{ 8 padding:0px;margin:0px;} 9 body{ 10 padding:0px;margin:0px;background-color:#f1f2f2;} 11 a{ 12 text-decoration:none;} 13 a:hover{ 14 text-decoration:none; 15 } 16 17 #left{ 18 float:left;210.4px; background-color:#1d6ab2;} 19 #main{ 20 float:left;84.4%;position:absolute;left:210.4px;} 21 #left table{ 22 margin-left:20px;margin-right:auto;margin-top:4px; text-align:left;} 23 #left table td{ 24 color:#FFF;font-size:14px;font-family:宋体; font-weight:400;} 25 #left table td a{ 26 color:#1d6ab2;font-size:12px;font-family:宋体; font-weight:400; background-color:#fff; 27 border-radius:4px;padding:5px;} 28 #left table td a:hover{ 29 background-color:#1d6ab2;color:#FFF; 30 } 31 #left table td button{ 32 background:#3f85c0;color:#fff;border:0px;padding:6px;border-radius:4px;font-size:12px; 33 } 34 #left table td button:hover{ 35 background:#2e2d80; 36 } 37 #menu{ 38 100%; margin-left:auto; margin-right:auto;margin-bottom:4px;} 39 #menu1,#menu2{ 40 144px;display:none;margin-left:auto; margin-right:auto;clear:left;margin-bottom:3px;margin-top:3px;} 41 #menu button{ 42 100%;height:30px;border:0px;margin:0px 0px 0px 0px; background-color:#1D6ab2;color:#FFF; 43 font-size:14px;font-family:宋体; font-weight:600;border-radius:1px; 44 } 45 #menu button:hover{ 46 background-color:#f1f2f2;color:#1D6ab2; 47 } 48 #menu1 a,#menu2 a{ 49 font-size:14px;font-family:宋体; font-weight:600;padding:0px 50px 0px 50px; 50 background-color:#f1f2f2;color:#1D6ab2; text-align:center;} 51 #menu1 a:hover,#menu2 a:hover{ 52 background-color:#AAD5E8;color:#1D6ab2; 53 } 54 55 56 </style> 57 <script src="js/jquery.min.js"></script> 58 59 </head> 60 61 <body> 62 <div id="left" > 63 <table> 64 <tr><td>用户名：</td><td>李丽</td></tr> 65 <tr><td>学 号：</td><td>12</td></tr> 66 <tr height="30px"><td ><a href="#">[修改资料]</a></td> 67 <td><a href="#">[修改密码]</a></td></tr> 68 <tr ><td><button type="button">切换账户</button></td> 69 <td><button type="button">用户登录</button></td></tr> 70 </table> 71 <hr style="border:1px solid #f1f2f2;height:0px;"> 72 73 <div id="menu" > 74 <button type="button" id="1" >左边导航 <span style="float:right;margin-right:74px;">></span></button> 75 <div id="menu1"> 76 <a href="#">text2</a><br> 77 <a href="#">text2</a><br> 78 <a href="#">text2</a><br> 79 <a href="#">text2</a><br> 80 </div> 81 <button type="button" id="2">左边导航 <span style="float:right;margin-right:74px;">></span></button> 82 <div id="menu2"> 83 <a href="#">text2</a><br> 84 <a href="#">text2</a><br> 85 <a href="#">text2</a><br> 86 <a href="#">text2</a><br> 87 </div> 88 <button type="button" >左边导航 <span style="float:right;margin-right:74px;">></span></button> 89 <button type="button" >左边导航 <span style="float:right;margin-right:74px;">></span></button> 90 <button type="button" >左边导航 <span style="float:right;margin-right:74px;">></span></button> 91 <button type="button" >左边导航 <span style="float:right;margin-right:74px;">></span></button> 92 </div> 93 94 </div> 95 </body> 96 </html>