效果：
/** * @author Administrator */ $(document).ready(function(){ init(); }); function init(){ $("#firstDd").slideDown(); everyDd(".topTitle"); } function everyDd(obj){ $(obj).each(function(){ var theSpan = $(this); theSpan.bind("click",function(){ showHide(theSpan); }); }); } function showHide(obj){ $("dd").slideUp(); $("dt a").removeClass("minus"); obj.next("dd").slideDown(); obj.find("a").addClass("minus"); }
*{ margin:0; padding:0; list-style-type:none; color:black; text-decoration: none; } html,body{ width:100%; height:100%; } nav.nav_menu{ width:400px; height: 700px; margin : 0 auto; } nav.nav_menu dl{ width:100%; height: 100%; } nav.nav_menu dt{ width:100%; height:8%; background-color: #E7F5FC; } nav.nav_menu dt a{ margin:0 auto; display:block; width:100%; height:59%; padding-top:6%; border-left: 1px solid #83BBD9; border-right: 1px solid #83BBD9; text-align: center; background: #93BFDB; /* 为较旧的或者不支持的浏览器设置备用属性 */ background: -moz-linear-gradient(top, #DEE8ED, #8ED1FC 80%); background: -webkit-gradient(linear, 0 0, 0 80%, from(#DEE8ED), to(#8ED1FC)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DEE8ED', endColorstr='#8ED1FC'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#DEE8ED', endColorstr='#8ED1FC')"; /* IE8 */ } nav.nav_menu dt a:hover{color:#3366cc;} nav.nav_menu dl dd { display: none; width: 80%; margin : 0 auto; } nav.nav_menu dd ul>li{ height: 50px; line-height:50px; text-align: center; border: 1px solid #D0D6DD; } nav.nav_menu dd ul>li a:hover{ color:green; font-weight: bold; } .minus{ font-weight: bold; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link type="text/css" href="css/2.css" rel="stylesheet"> <script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script> <script type="text/javascript" src = "js/2.js"></script> </head> <body> <nav class="nav_menu"> <dl> <dt class="topTitle"><a href="javascript:void(0);" class="minus">应用商城管理</a></dt> <dd id="firstDd"> <ul> <li><a href="javascript:void(0);">应用管理</a></li> <li><a href="javascript:void(0);">类别管理</a></li> <li><a href="javascript:void(0);">海报管理</a></li> <li><a href="javascript:void(0);">公告管理</a></li> <li><a href="javascript:void(0);">信息统计</a></li> </ul> </dd> <dt class="topTitle"><a href="javascript:void(0);" >开发者社区管理</a></dt> <dd> <ul> <li><a href="javascript:void(0);">消息管理</a></li> <li><a href="javascript:void(0);">应用上下架管理</a></li> <li><a href="javascript:void(0);">开发者管理</a></li> <li><a href="javascript:void(0);">社区资源管理</a></li> </ul> </dd> <dt class="topTitle"><a href="javascript:void(0);" >管理员账号管理</a></dt> <dd> <ul> <li><a href="javascript:void(0);">账号管理</a></li> <li><a href="javascript:void(0);">权限管理</a></li> </ul> </dd> </dl> </nav> </body> </html>
下载地址：https://files.cnblogs.com/qduanlu/%E5%AF%BC%E8%88%AA%E6%A0%8F.rar