伸缩栏菜单(左侧伸缩栏,右侧内容)

原创 2018年04月17日 14:15:31
<!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 ps = document.getElementsByTagName("p");
    var uls = document.getElementsByTagName("ul");

     // 遍历所有要点击的标题且给它们添加索引及绑定事件
    for(var i = 0, n = ps.length; i <n; i += 1){

        ps[i].id = i;
        ps[i].onclick = function(){
            for(var j = 0; j < n ; j += 1){
               uls[j].style.display = "none";
            }
            uls[this.id].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>

COFF格式续篇—Lib文件的结构

    上一篇文章介绍了COFF目标文件的结构。如果你试着做一个应用程序的连接器(Linker),就会发现,仅仅有目标文件是不够的。我们在连接程序时,不仅仅要用到目标文件,库文件也是必不可少的。   ...
  • redleaves
  • redleaves
  • 2003-10-14 00:57:00
  • 2415

可伸缩右侧边栏导航菜单

体验效果:http://keleyi.com/keleyi/phtml/jqmenu/3.htm 完整代码: 侧边固定栏导航菜单-柯乐义 侧边固定栏导航菜单" /> 侧...
  • sweetyhyh
  • sweetyhyh
  • 2017-05-09 15:54:41
  • 1510

c#实现左侧伸缩菜单那

好久没写博客了,今天总结一下前几周的一个例子 希望今后有人可以一起分享自己的发现。 使用C#开发实现左侧伸缩菜单栏,最开始我想用panle+label实现但是终究没有是实现,于是我开始网上搜索,有说用...
  • u010786215
  • u010786215
  • 2017-02-28 15:09:28
  • 701

使用bootstrap实现左侧伸缩菜单

首页                                                                                              ...
  • easyboot
  • easyboot
  • 2017-03-02 11:40:09
  • 4615

jquery实现侧边栏左右伸缩

jquery实现点击侧边栏伸缩效果。点击收缩,侧边栏向左收缩,显示按钮显示;点击显示按钮,显示按钮向左收缩,侧边栏显示。 具体代码如下: *{margin: ...
  • ziwoods
  • ziwoods
  • 2016-04-21 09:01:29
  • 5768

jquery左侧悬浮收缩菜单

  • 2013年11月14日 16:38
  • 39KB
  • 下载

一个简单地可伸缩左侧导航栏

效果图 left.html 设备预约
  • world_er
  • world_er
  • 2015-12-23 13:45:13
  • 3712

HTML/CSS导航菜单-伸缩菜单的制作(垂直方向)

*{ padding:0px; margin:0px; font-size: 14px; } ul{ height: 31px; padd...
  • qq_35354855
  • qq_35354855
  • 2017-09-17 20:40:20
  • 712

jQuery页面左侧伸缩下拉导航菜单

  • 2017年12月11日 14:25
  • 132KB
  • 下载

h5+css 伸缩菜单---改变高度

伸缩菜单—改变高度
  • baidu_32731497
  • baidu_32731497
  • 2016-07-03 12:02:57
  • 1136
收藏助手
不良信息举报
您举报文章:伸缩栏菜单(左侧伸缩栏,右侧内容)
举报原因:
原因补充:

(最多只允许输入30个字)