<!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="data: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="data:images/leftico01.png" /></span>其他设置
      </div>
        <ul class="menus">
        <li><a href="#">编辑内容</a></li>
        <li><a href="#">发布信息</a></li>
        </ul>    
     </div>

</body>
</html>

淡入淡出(折叠效果)and点击切换背景图片的更多相关文章

  1. 练习：javascript淡入淡出半透明效果

    划过无透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  3. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  4. js+jq 淡入淡出轮播（点击+定时+鼠标进入移出事件）

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  5. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  6. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  7. WPF 渐隐渐现切换背景图片

    最近学习WPF,尝试着自己做一些小玩意,也遇到了一些问题,于是整理记录以便日后查阅. 我们都知道WPF可以实现一些很炫的效果,然而有时候为达到这个目的却并不是一件很容易的事情.比如:在软件中我希望能够 ...

  8. 网页html随机切换背景图片

    首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量. 在script中将这些图像编为一个数组,便于调用.数组的长 ...

  9. android小功能：checkbox使用自己的背景点击切换背景

    xiazai_checkbox.xml <?xml version="1.0" encoding="utf-8"?> <selector xm ...

随机推荐

  1. 在 Linux 使用 GCC 编译C语言共享库

    对任何程序员来说库都是必不可少的.所谓的库是指已经编译好的供你使用的代码.它们常常提供一些通用功能,例如链表和二叉树可以用来保存任何数据,或者是一个特定的功能例如一个数据库服务器的接口,就像MySQL ...

  2. gradle 两种更新方法

    第一种.Android studio更新 第一步:在你所在项目文件夹下:你项目根目录gradlewrappergradle-wrapper.properties 替换 distributionUrl= ...

  3. 【转载】.NET中锁6大处理方法 悲观乐观自己掌握

    我们为什么需要锁? 在多用户环境中,在同一时间可能会有多个用户更新相同的记录,这就会产生冲突,这个就是著名的并发性问题. 图 1 并行性问题漫画 如何解决并发性问题? 借助正确的锁定策略可以解决并发性 ...

  4. 《转》Python学习(15)-对文件的操作（二）

    转自 http://www.cnblogs.com/BeginMan/p/3169020.html 一.文件系统 从系统角度来看,文件系统是对文件存储器空间进行组织和分配,负责文件存储并对存入的文件进 ...

  5. linux Tar 命令参数详解

    tar命令 . 作用 tar命令是Unix/Linux系统中备份文件的可靠方法,几乎可以工作于任何环境中,它的使用权限是所有用户. . 格式 tar [主选项+辅选项] 文件或目录 eg: tar z ...

  6. 使用Phoenix通过sql语句更新操作hbase数据

    hbase 提供很方便的shell脚本,可以对数据表进行 CURD 操作,但是毕竟是有一定的学习成本的,基本上对于开发来讲,sql 语句都是看家本领,那么,有没有一种方法可以把 sql 语句转换成 h ...

  7. Esper学习之十二：EPL语法（八）

    今天的内容十分重要,在Esper的应用中是十分常用的功能之一.它是一种事件集合,我们可以对这个集合进行增删查改,所以在复杂的业务场景中我们肯定不会缺少它.它就是Named Window. 由于本篇篇幅 ...

  8. Hive学习之Union和子查询

    Union的语法格式如下: select_statement UNION ALL select_statement UNION ALL select_statement ... Union用于将多个S ...

  9. 【转】CCScale9Sprite和CCControlButton

    转自:http://blog.csdn.net/nat_myron/article/details/12975145 在2dx下用到了android下的.9.png图片,下面是原图   查了一下2dx ...

  10. 使用zsh 替换 bash

    摘自:http://macshuo.com/?p=676#wechat_redirect Shell是Linux/Unix的一个外壳,你理解成衣服也行.它负责外界与Linux内核的交互,接收用户或其他 ...