效果如下图：

代码很简单，如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    *{margin:0;

     padding:0;

     font-size:13px;

     list-style:none;}

.menu{width:210px;

      margin:50px auto;

      border:1px solid #ccc;}

.menu p{height:25px;

        line-height:25px;

        font-weight:bold;

        background:#eee;

        border-bottom:1px solid #ccc;

        cursor:pointer;

        padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;

         line-height:24px;

         padding-left:5px;}

</style>

    <script type="text/javascript">

    window.onload=function(){

        var menu=document.getElementById('menu'),

            ps=menu.getElementsByTagName('p'),

            uls=menu.getElementsByTagName('ul');

            for(var i in ps){

                ps[i].id=i;

                ps[i].onclick=function(){

                    var u=uls[this.id];

                    if(u.style.display=='block'){

                        u.style.display='none';

                    }else{

                        u.style.display='block';

                    }

                }

            }

    }

    </script>

</head>

<body>

    <div class="menu" id="menu">

        <div>

            <p>Web前端</p>

            <ul style="display:block">

                <li>JavaScript</li>

                <li>DIV+CSS</li>

                <li>jQuery</li>

            </ul>

        </div>

        <div>

            <p>后台脚本</p>

            <ul>

                <li>PHP</li>

                <li>ASP.net</li>

                <li>JSP</li>

            </ul>

        </div>

        <div>

            <p>前端框架</p>

            <ul>

                <li>Extjs</li>

                <li>Esspress</li>

                <li>YUI</li>

            </ul>

        </div>

    </div>

</body>

</html>

网页中多一些常见效果之伸缩菜单（主要是学习js的书写方法）的更多相关文章

  1. IOS设备上网页中的页面滚动效果模拟

    可能咋一看不知道我说的是个啥,因为iOS本来就用这功能的啊,还模拟它干啥?先听我说下项目背景哈 我现在开发的是一个webapp,主要是用在ipad上,这个app的大小是固定大小的,为了防止触摸它出现弹 ...

  2. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

  3. 网页中的图片查看器viewjs使用

    需求分析: 对于网页中的图片进行连续放大(便于用户清晰查看内容).缩小,旋转等操作,可以使用viewjs图片查看器插件实现. viewjs官方网址:https://github.com/fengyua ...

  4. 网页中嵌入swf文件的几种方法

    1. object + embed       传统的方法 优点:浏览器兼容性好,是 Macromedia 一直以来的官方方法缺点:a.embed 标签是不符合 W3C 的规范的,无法通过验证.当然, ...

  5. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  6. ScrollMe – 在网页中加入各种滚动动画效果

    ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...

  7. [置顶] ios 网页中图片点击放大效果demo

    demo功能:点击网页中的图片,图片放大效果的demo.iphone6.1 测试通过. demo说明:通过webview的委托事件shouldStartLoadWithRequest来实现. demo ...

  8. 给网页中的button加动画效果

    网页中的很多事件交互都是通过点击页面中的按钮来实现的,给按钮加一点动画效果也会让网页看起来生动一些,以下就是一个简单的例子: 此按钮的动画主要是通过css的transform动画,伪元素,伪类来实现: ...

  9. 利用pandas库中的read_html方法快速抓取网页中常见的表格型数据

    本文转载自:https://www.makcyun.top/web_scraping_withpython2.html 需要学习的地方: (1)read_html的用法 作用:快速获取在html中页面 ...

随机推荐

  1. 设置每个datanode里面的map数目，提高运行效率

    首先可以通过hdfs.site.xml下面的dfs.block.size来设置数据的块大小,这个参数会决定map的总数目(4194304=4m) 然后通过mapred.site.xml下面的mapre ...

  2. MongoError: topology was destroyed解决方法

    MongoError: topology was destroyed 分析得出,出现这个问题是因为,当mongodb尝试写入某个数据的时候,连接被中断了! 解决方法:检查代码中是否存在操作数据的过程中 ...

  3. [BZOJ 1926] 粟粟的书架

    BZOJ 传送门 Luogu 传送门 BZOJ的sillyB评测机各种无故CE,只好去Luogu上A了o(╯□╰)o Solution: 从数据范围可以发现,这其实是2道题: (1)一个$R*C$的矩 ...

  4. 英尺和米之间的转换 Exercise06_09

    /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:英尺和米之间的转换 * */ public class Exercise06_09 { public static void ...

  5. Scala学习总结

    1)将Array转化为String,toStrings()方法应该是序列化了的. scala> val args = Array("Hello", "world&q ...

  6. 程序调控和监视（Logcat，Debug）

    1.Logcat 2.效果图:实现点击Button,提示Logcat信息 (1)activity_main.xml <?xml version="1.0" encoding= ...

  7. gns3 接口说明 转

    Dynamips 支持的模块首先从C7200 开始Slot 0:C7200-IO-FE <------> 支持1 个Fastethernet 接口C7200-IO-2FE <---- ...

  8. WebGL的颜色渲染-渲染一张DEM(数字高程模型)

    目录 1. 具体实例 2. 解决方案 1) DEM数据.XYZ文件 2) showDEM.html 3) showDEM.js 4) 运行结果 3. 详细讲解 1) 读取文件 2) 绘制函数 3) 使 ...

  9. oracle数据库维护常用操作

    查看用户相关信息 查看数据库里面所有用户,前提是你是有dba权限的帐号,如sys,system select * from dba_users; 查看你能管理的所有用户! select * from ...

  10. 笔记：git基本操作

    原文: http://www.cnblogs.com/pingwen/p/8098035.html 1. 快速入门的基本概念 相比SVN,TFS等集中式的版本管理系统,GIT分布式管理最重要的理念是本 ...