码迷,mamicode.com
首页 > 其他好文 > 详细

淡入淡出(折叠效果)and点击切换背景图片

时间:2014-11-21 12:01:12      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   ar   color   os   sp   java   数据   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>left</title>
<!--jquery.js需要自己下载哦-->
<script language="JavaScript" src="js/jquery.js"></script>
<script type="text/jscript">
    //    //顶部导航切换
$(document).ready(function(){
    $(‘.menus li a‘).click(function(){
        $(‘.menus li a‘).removeClass(‘active‘)
         $(this).addClass(‘active‘)
        });
         //    //折叠效果
        $(‘.title‘).click(function(){
            var $ul=$(this).next(‘ul‘);
            $(‘.left_menu‘).find(‘ul‘).slideUp();
            if($ul.is(‘:visible‘)){
                $(this).next(‘ul‘).slideUp();
                }else{
                    $(this).next(‘ul‘).slideDown()
                }
            });        
        })
 </script>

<style>
#body{ background:#f0f9fd repeat; margin:0; padding:0;}
.left_top{ background:url(images/lefttop.gif) center repeat-x;height:40px; color:#FFF; line-height:40px;}
.left_top span{margin-left:8px; margin-top:10px;margin-right:8px; background:url(images/leftico.png) no-repeat; width:20px; height:21px;float:left;}
.left_menu{ width:185px; height:auto; border-right:#999 1px solid; }
.title{height:30px;width:185px; line-height:30px;  font-size:12px; font-weight:bold; background:#d4e6f0 center repeat-x; border-bottom:#999 1px solid;}
.title img{padding-left:20px; padding-right:5px; }
.menus{margin-top:0px; height:auto; display:none;}
.menus li{font-size:12px; list-style:none; height:30px;}
.active{ background:url(images/libg.png) center  repeat-x; height:30px; }
.menus li a{text-decoration:none; color:#000;  height:30px; display:block; line-height:30px;}
</style>
</head>
<body id="body">
<div class="left_top"><span></span>通讯录</div>
   <div class="left_menu">
    <div class="title">
     <span><img src="images/leftico01.png" /></span>管理信息
      </div>
      <!--想让哪个菜单默认是显示的只需将display:none;改为display:block;即可-->
        <ul class="menus" style="display:block;">
        <li><a href="#" >首页模版</a></li>
        <li><a href="#" class="active">数据列表</a></li>
        <li><a href="#">图片数据表</a></li>
        </ul>    
     <div class="title">
     <span><img src="images/leftico01.png" /></span>其他设置
      </div>
        <ul class="menus">
        <li><a href="#">编辑内容</a></li>
        <li><a href="#">发布信息</a></li>
        </ul>    
     </div>

</body>
</html>
bubuko.com,布布扣

淡入淡出(折叠效果)and点击切换背景图片

标签:style   http   io   ar   color   os   sp   java   数据   

原文地址:http://www.cnblogs.com/zhouyx/p/4112340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!