下午忙着搞后台.一直没个好的思路,就在网上download 后台模板,看了几个觉得还界面设计看的还蛮好的.
然后，就准备着手研究一下,看了代码，就觉得不是好的作品,全是img和table推起来的.很是囊肿.
很快就放弃了,但有急着把完成后台，没办法。只有自己动手了.
今天就和大家分享一个 实现导航隐藏和弹出的效果
其实,懂jQuery的朋友就知道这个其实 就是用非常excellent的 toggle函数就ok的 一切也就变的这么简单
先贴上核心的jQuery代码
<script src=‘jquery.min.js’></script>
<script>
$(function(){
$(“.main1″).click(function(){
$(“.son1″).toggle();
});
$(“.main2″).click(function(){
$(“.son2″).toggle();
});
$(“.main3″).click(function(){
$(“.son3″).toggle();
});
})
</script>
HTML代码：
<div id=‘all’>
<div class=‘main1′>用户管理</div>
<div class=‘son1′>添加用户</div>
<div class=‘son1′>查看用户</div>
<div class=‘son1′>在线用户</div>
<div class=‘main2′>店铺管理</div>
<div class=‘son2′>选择地区</div>
<div class=‘son2′>查看店铺</div>
<div class=‘son2′>添加店铺</div>
<div class=‘main3′>订单管理</div>
<div class=‘son3′>查看订单</div>
<div class=‘son3′>添加订单</div>
</div>
在贴上个CSS代码美化一下
#all{
width:200px;
border:1px solid red;
text-align:center;
}
.main1,.main2,.main3{
background:#336600;
border:1px solid blue;
font-size:20px;
color:white;
}
.son1,.son2,.son3{
display:none;
}
看了上面的代码是不是就真的觉得很简单呢 真正实现的效果的jQuery代码就3行而已.
在写blog的过程中难免会出现漏洞和错误,希望大家拍砖.交流学习，本文是刚刚原创,如 转载 请注明:http://www.jigwang.com/