完全收缩折叠的导航
css代码：
<style>
* {
margin: 0;
padding: 0;
}
#s {
width: 30px;
height: 30px;
position: relative;
float: right;
background-color: black;
background-image: url(nav.png);
background-repeat: no-repeat;
background-size: 30px,30px;
margin-top: 10px;
margin-right: 10px;
cursor: pointer;
}
.f {
width: 160px;
height: 250px;
background-color: gray;
float: right;
position: relative;
display: none;
border: 1px solid white;
}
.s {
height: 50px;
line-height: 50px;
color: white;
text-align: center;
position: relative;
border-bottom: 1px solid white;
cursor: pointer;
}
.d {
color: white;
background-color: gray;
list-style-type: none;
line-height: 50px;
width: 160px;
display: none;
position: absolute;
right: 161px;
margin-top: -50px;
}
</style>
html代码：
<body>
<div style="width: 100%; height: 50px; background-color: black; position: relative;">
<div id="s">
</div>
</div>
<div class="f" id="t">
<div class="s">
监测监控
<ul class="d">
<li>长虹电视</li>
<li>联想电脑</li>
<li>苹果手机</li>
<li>海尔冰箱</li>
</ul>
</div>
<div class="s">
用户管理
<ul class="d">
<li>篮球</li>
<li>足球</li>
<li>排球</li>
</ul>
</div>
<div class="s">
系统设置
<ul class="d">
<li>轿车</li>
<li>吉普车</li>
<li>卡车</li>
<li>自行车</li>
<li>电动车</li>
</ul>
</div>
<div class="s">
数据查询
<ul class="d">
<li>可口可乐</li>
<li>美年达</li>
</ul>
</div>
<div class="s">
帮助
<ul class="d">
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
</div>
</div>
</body>
js代码：
<script> $('.f .s').hover(function () { $(this).children('ul').show(); }, function () { $(this).children('ul').hide(); }); $('.f').hover(function () { $(this).show(); }, function () { $(this).hide(); }); $('#s').click(function () { $('.f').show();}); </script>
