效果如下图：

代码很简单，如下：

<!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. vs2008下Error LINK2005: already defined in ...的一种解决方式

    原因:不同的库之间都定义了相同的名称. 方法:右键工程->Properties->Configuration->Linker->Input 在右侧的Additional Dep ...

  2. Python 统一动态创建多个model对应的modelForm类（type()函数）

    一.ModelForm的用法 ModelForm对用户提交的数据有验证功能,但比Form要简单的多 from django.forms import ModelForm # 导入ModelFormcl ...

  3. lca最短公共祖先模板（hdu2586）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2586 #include<iostream> #include<cstdio> ...

  4. 洛谷——P1033 自由落体

    P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,…．n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...

  5. 1、Django实战第1天：建立项目mxonline

    工具版本: python3.6.3 django1.9.8 安装工具 mkvirtualenv --python="C:\Python36\python.exe" mxonline ...

  6. WebApi 的三种寄宿方式 (二) - 宿主和控制器不在一个程序集

    新建一个类库: SelfHost: 方法一: 1.添加对MyControllers类库的引用. 2.在控制台代码中加入一行代码: 当然,可以添加多个程序集.(记得引用) var config = ne ...

  7. [Codeforces 8E] Beads

    Brief Intro: 将所有n位二进制串中满足字典序不大于其逆序串,取反串,逆序取反串中按字典序排序的第m个输出 n<=50 Algorithm: 首次接触数位DP的题目 根据数据范围,我们 ...

  8. JS面向对象之原型

    面向对象之原型 为什么要使用原型 由于 js 是解释执行的语言, 那么在代码中出现的函数与对象, 如果重复执行, 那么会创建多个副本, 消耗更多的内存, 从而降低性能 传统构造函数的问题 functi ...

  9. oracle 11g jdbc jar包在哪个文件目录

    一. 如果装了oracle数据库的话, 大致是这样的目录:    D:\oracle\product\11.2.0\client_1\oui\jlib\classes12.jar 或者    D:\o ...

  10. Oracle Service Bus Socket Adapter调整的参数

    之前在一个客户中做压力测试时候Oracle Service Bus性能大概达到900tps左右,和客户期望的1600tps有很大差距. 在研究了Socket Adapter的工作原理之后,判断可能是O ...