效果如下图：

代码很简单，如下：

<!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. 曼哈顿距离、欧几里得距离、闵氏距离(p→∞为切比雪夫距离)

    曼哈顿距离: 是由十九世纪的赫尔曼·闵可夫斯基所创词汇 ,是种使用在几何度量空间的几何学用语,用以标明两个点在标准坐标系上的绝对轴距总和. 曼哈顿距离——两点在南北方向上的距离加上在东西方向上的距离, ...

  2. HDU 3045 Picnic Cows

    $dp$,斜率优化. 设$dp[i]$表示$1$至$i$位置的最小费用,则$dp[i]=min(dp[j]+s[i]-s[j]-(i-j)*x[j+1])$,$dp[n]$为答案. 然后斜率优化就可以 ...

  3. 【AC自动机】【动态规划】poj3691 DNA repair

    http://blog.csdn.net/kk303/article/details/6929641 http://blog.csdn.net/human_ck/article/details/657 ...

  4. java web（学习笔记）项目路径问题

    最近刚接触java web特别是是关于项目路径这一块很晕,就把自己遇到的一些疑惑和理解写下来. 首先贴上路径,这里用的是eclipse. 其中我们要注意看WebContent目录,这是web程序的根目 ...

  5. mysql获取分类数量

    1.sql <select id="getTypeNum" resultType="TypeNum" > select count(*) as al ...

  6. [转]C++中关于new和delete的使用

    转载的地址 近一直在啃 C++ Primer 中文版第4版,发现 C++中new和delete应用遍布全书,现对其使用作简单总结.在C++中,可以使用new和delete动态创建和释放数组或者单个对象 ...

  7. java实现发送邮件功能

    项目中实现发送邮件功能,先书写一个小Demo,记录如下: POM.XML中导入依赖 <!-- start java 提供的支持邮件发送相关业务的类 --> <dependency&g ...

  8. [web] Get和Post区别,EncType提交数据的格式详解

    转载自:http://www.cnblogs.com/sunxucool/archive/2012/12/11/2813113.html 1. get是从服务器上获取数据,post是向服务器传送数据. ...

  9. Python - 文本处理模块

    文本处理模块 本文地址: http://blog.csdn.net/caroline_wendy/article/details/27050431 Python的文本处理模块, 使用四种内置库. st ...

  10. 【译】你对position的了解有多少？

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...