制作侧边栏导航(手风琴)
<div id="aside"> <ul> <li> <div class="nav"><a href="javascript:;">主页</a></div> <ul class="sum"> <li class="list"><a href="javascript:;">主页一</a></li> <li class="list"><a href="javascript:;">主页二</a></li> <li class="list"><a href="javascript:;">主页三</a></li> </ul> </li> <li> <div class="nav"><a href="javascript:;">应用</a></div> <ul class="sum"> <li class="list"><a href="javascript:;">应用一</a></li> <li class="list"><a href="javascript:;">应用二</a></li> <li class="list"><a href="javascript:;">应用三</a></li> </ul> </li> </ul> </div>
<script> $(".nav").click( function(){ $(".sum").slideUp(); if($(this).next().is(":hidden")){ $(this).next().slideDown(); } } ) </script>
<style> *{ margin: 0; padding: 0; } ul{ list-style:none; } a{ text-decoration: none; color:#e6e6e8; } #aside{ position:fixed; top:0; left:0; bottom: 0; width: 100px; background: #333333; } #aside>ul{ padding:30px 0 0 0px; background: black; text-align: center; } .nav{ line-height: 40px; border-bottom: 1px solid #333333; } .sum{ display: none; } .list{ font-size: 14px; line-height: 40px; border-bottom: 1px solid #333333; } </style>