效果如下图：

代码很简单，如下：

<!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. HDU 1558 Segment set（并查集）

    题意: 给你一些线段的起点和终点的坐标,最后问和某个线段相连的或者间接相连的线段有多少个(包括本身)? P X1 Y1X2 Y2  起点(X1,X2)终点(X2,Y2):按照出现次数依次编号为1,2, ...

  2. 11、Django实战第11天：templates模板继承

    Django模板的继承,它首先定义一个整体的框架(父类),然后动态的部分(子类)只需要重写自己本身的代码就可以了. 1.在templates目录下创建base.html 2.把org-list.htm ...

  3. 博弈论与SG函数

    巴什博奕: 两个顶尖聪明的人在玩游戏,有n个石子,每人可以随便拿1−m个石子,不能拿的人为败者,问谁会胜利 结论: 设当前的石子数为\(n=k∗(m+1)\)即\(n%(m+1)==0\)时先手一定失 ...

  4. 【母函数】hdu1028 Ignatius and the Princess III

    大意是给你1个整数n,问你能拆成多少种正整数组合.比如4有5种: 4 = 4;  4 = 3 + 1;  4 = 2 + 2;  4 = 2 + 1 + 1;  4 = 1 + 1 + 1 + 1; ...

  5. python3-os模块中的os.walk(目录树生成器)

    #先看源码 def walk(top, topdown=True, onerror=None, followlinks=False): """Directory tree ...

  6. Linux中线程的挂起与恢复（进程暂停）

    http://www.linuxidc.com/Linux/2013-09/90156.htm 今天在网上查了一下Linux中对进程的挂起与恢复的实现,相关资料少的可怜,大部分都是粘贴复制.也没有完整 ...

  7. Android Service完全解析，关于服务你所需知道的一切

    来自:http://www.360doc.com/content/14/0415/18/2793098_369238276.shtml 相信大多数朋友对Service这个名词都不会陌生,没错,一个老练 ...

  8. 关于shape和selector和layer-list的drawable详细说明

    在Android开发中,但凡涉及控件的的特效问题,<shape>,<selector>以及<layer-list>都是不可或缺的drawable.但是发现有同事并不 ...

  9. Docker实践1:Virtualbox安装Oracle Enterprise Linux R6 U5

    先下载OracleLinux-R6-U5-Server-x86_64-dvd.iso文件,然后打开virtualbox 因为weblogic docker镜像都比较大,因此最好容量最好大一点,采用30 ...

  10. 【Todo】Apache-Commons-Pool及对象池学习

    有这篇文章: http://www.cnblogs.com/tommyli/p/3510095.html 方案提供了三种类型的pool,分别是GenericKeyedObjectPool,SoftRe ...