1.给div设置定位。

　　复习一下——

　　css中position有五种属性：

　　　　static:默认值，没有定位

　　　　absolute:绝对定位，相对于父级元素进行定位

　　　　relative:相对定位

　　　　fixed:固定定位,相对于浏览器窗口进行定位

　　　　inherit:从父元素继承定位信息　　

除了默认值static和inherit之外，添加其他三种都可以实现窗口自适应。

在做管控类的项目的时候总会遇到右侧的导航栏的折叠和打开问题，不使用js实现，纯粹的css实现，更准确的说应该是使用css3的checked实现的。

主要属性是：

menu :checked + .menu-item-list {

        max-height: 500px;

    }

效果：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    * {

        padding: 0;

        margin: 0;

        box-sizing: border-box;

    }

    menu {

        width: 180px;

        max-height: 100%;

        overflow: auto;

        background-color: #15f5f5;

    }

    menu .menu-item {

        position: relative;

    }

    menu .menu-item > input {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 46px;

        opacity: 0;

        cursor: pointer;

    }

    .menu-parent:hover{

        background-color: rgba(0, 0, 0, 0.06);

    }

    .menu-parent:visited{

        color: #fff;

        background-color: #5375f1;

    }

    menu span {

        display: block;

        padding: 5px 10px;

        font-size: 16px;

        line-height: 36px;

        cursor: pointer;

    }

    menu span:hover {

        background-color: rgba(0, 0, 0, 0.06);

    }

    menu span:active{

        color: #fff;

        background-color: #5375f1;

    }

    menu span.menu-child {

        font-size: 14px;

        text-indent: 20px;

    }

    menu .menu-item-list {

        max-height: 0;

        overflow: hidden;

        transition: all .3s ease;

    }

    menu :checked + .menu-item-list {

        max-height: 500px;

    }

    </style>

</head>

<body>

    <div class="box">

        <menu>

            <div class="menu-item">

                <span class="menu-parent">菜单1</span>

                <input type="checkbox" name="" value="">

                <div class="menu-item-list">

                    <span class="menu-child">子菜单1</span>

                    <span class="menu-child">子菜单2</span>

                    <span class="menu-child">子菜单3</span>

                    <span class="menu-child">子菜单4</span>

                </div>

            </div>

            <div class="menu-item">

                <span class="menu-parent">菜单2</span>

                <input type="checkbox" name="" value="">

                <div class="menu-item-list">

                    <span class="menu-child">子菜单1</span>

                    <span class="menu-child">子菜单2</span>

                    <span class="menu-child">子菜单3</span>

                    <span class="menu-child">子菜单4</span>

                </div>

            </div>

            <div class="menu-item">

                <span class="menu-parent">菜单3</span>

                <input type="checkbox" name="" value="">

                <div class="menu-item-list">

                    <span class="menu-child">子菜单1</span>

                    <span class="menu-child">子菜单2</span>

                    <span class="menu-child">子菜单3</span>

                    <span class="menu-child">子菜单4</span>

                </div>

            </div>

        </menu>

    </div>

</body>

</html>

升级版

例如要实现这样的：左侧的底部长度不会随着下拉而拉高。

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            * {

                padding: 0;

                margin: 0;

                box-sizing: border-box;

            }

            html,body{

                width: 100%;

                height: 100%;

            }

            header {

                width: 100%;

                height: 50px;

                background: #1A2940;

                color: #fff;

            }

            .box{

                width: 180px;

                height: 100%;

                background-color: #6a8bbc;

            }

            menu {

        width: 180px;

        /*height: calc(height-50);*/

        /*max-height: 100%;*/

        overflow: auto;

        background-color: #6a8bbc;

    }

    menu .menu-item {

        position: relative;

    }

    menu .menu-item > input {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 46px;

        opacity: 0;

        cursor: pointer;

    }

    menu .menu-parent:hover{

         background: #1A2940;

    }

    menu .menu-parent:active{

        color: #fff;

        background-color: #5375f1;

    }

    menu .menu-parent:visited{

        color: #fff;

        background-color: #5375f1;

    }

    menu span {

        display: block;

        padding: 5px 10px;

        font-size: 16px;

        line-height: 36px;

        cursor: pointer;

    }

    menu span:hover {

        background: #1A2940;

        color: #fff;

    }

    menu span:active{

        color: #fff;

        background-color: #5375f1;

    }

    menu span.menu-child {

        font-size: 14px;

        text-indent: 20px;

    }

    menu .menu-item-list {

        max-height: 0;

        overflow: hidden;

        transition: all .3s ease;

    }

    menu :checked + .menu-item-list {

        max-height: 500px;

    }

     .tdcolor { color:red }

        </style>

        <script type="text/javascript">

            var menu = document.getElementsByTagName('menu-parent');

            window.onload = function(){

                for(var i=0;i<menu.length;i++){

                    menu[i].onclick = function(){

                        menuOnclick(this);

                    }

                }

            }

            function menuOnclick(obj){

                for(var j=0;j<menu.length;j++){

                    if(menu[j]==obj){

                        menu[j].className = 'tdcolor';

                    }

                }

            }

        </script>

    </head>

    <body>

        <header>

            <img src="/" />aliyun

        </header>

        <div class="box">

            <menu>

                <div class="menu-item">

                    <span class="menu-parent active">概览</span>

                </div>

                <div class="menu-item">

                    <span class="menu-parent">软件服务</span>

                </div>

                <div class="menu-item">

                    <span class="menu-parent">菜单1</span>

                    <input type="checkbox" name="" value="">

                    <div class="menu-item-list">

                        <span class="menu-child">子菜单1</span>

                        <span class="menu-child">子菜单2</span>

                        <span class="menu-child">子菜单3</span>

                        <span class="menu-child">子菜单4</span>

                    </div>

                </div>

                <div class="menu-item">

                    <span class="menu-parent">菜单2</span>

                    <input type="checkbox" name="" value="">

                    <div class="menu-item-list">

                        <span class="menu-child">子菜单1</span>

                        <span class="menu-child">子菜单2</span>

                        <span class="menu-child">子菜单3</span>

                        <span class="menu-child">子菜单4</span>

                    </div>

                </div>

                <div class="menu-item">

                    <span class="menu-parent">菜单3</span>

                    <input type="checkbox" name="" value="">

                    <div class="menu-item-list">

                        <span class="menu-child">子菜单1</span>

                        <span class="menu-child">子菜单2</span>

                        <span class="menu-child">子菜单3</span>

                        <span class="menu-child">子菜单4</span>

                    </div>

                </div>

            </menu>

        </div>

    </body>

</html>

前端（各种demo）二：左侧导航栏的折叠和打开（不使用js）基础版和升级版的更多相关文章

  1. 前端（各种demo）：右侧导航栏的折叠和打开（不使用js）基础版和升级版

    1.给div设置定位. 复习一下—— css中position有五种属性: static:默认值,没有定位 absolute:绝对定位,相对于父级元素进行定位 relative:相对定位 fixed: ...

  2. ElementUI 复杂顶部和左侧导航栏实现

    描述:如图 项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...

  3. ElementUI+命名视图实现复杂顶部和左侧导航栏

    在了解了命名视图的用途后,发现用命名视图来实现复杂导航更加省力.更多知识请参考这里 这里只说明重要配置内容,其他内容配置请参考上一篇初始版本: ElementUI 复杂顶部和左侧导航栏实现 或参考文末 ...

  4. Bootstrap入门Demo——制作路径导航栏

    今天在在群里聊天的时候看到一仅仅程序猿发了一张用Bootstrap做的界面.感觉挺好看.然后去官网看了下组件.发现都挺美丽的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源代 ...

  5. 修改layui的后台模板的左侧导航栏可以伸缩

    原生的左侧导航栏代码: <div class="layui-side layui-bg-black"> <div class="layui-side-s ...

  6. dedecms左侧导航栏不显示问题

    dedecms左侧导航栏不显示问题 在做织梦项目时,经常会碰到后台左侧导航栏不显示的问题,如下所示: ​ 这主要是由于文件权限不足造成的.有两种方法 第一种:把 /data 文件夹全部改成 777 权 ...

  7. CI框架后台添加左侧导航栏出现的一系列问题

  8. MFC office2007风格设置左侧导航栏 [转]

    当基础的框架搭好以后,我想为其添加一个左侧导航栏,过程如下:在框架类的头文件添加一个导航栏参数: CMFCOutlookBar m_navigation; 为了完善功能,在导航栏里面我添加了一个CTr ...

  9. 使用jsonp形式跨域访问实现电商平台的左侧导航栏

    电商平台有个具备的左侧商品类目的导航栏的结构. 通过jsonp跨域访问电商平台的后台管理系统商品分类.(主要实现后台Java代码) 实现基本步骤: 1.在后台管理系统中准备相应的json数据. poj ...

随机推荐

  1. Motrix for Mac(百度网盘加速/全能下载软件) v1.3.7最新版！

    Motrix for Mac最新版第一时间在本站上线!Mac上最强大实用百度网盘加速器Motrix for Mac分享给您!Motrix for Mac是一款非常优秀的下载工具,采用Aria 2作为核 ...

  2. haproxy快速安装

    haproxy是一款提供负载均衡的代理服务器,它可基于modetcp 实现伪四层调度,还可以基于modehttp实现七层调度,类似于nginx,因为他没有web服务所以不像nginx那样进行控制. 通 ...

  3. 安装pwntools

    使用手册 http://pwntools.readthedocs.io/en/stable/ 环境 全新的ubuntu 14.04 64位 py2.7 实测ubuntu 18.04 64位同样适用 过 ...

  4. js中的传值和传引用,判断两个数组是否相等

    所谓js的中的传值,其实也就是说5种基本数据类型(null,undefind,boolean,number,string) 传引用也就是说的那个引用数据类型,(array和objec) 基本数据类型的 ...

  5. android studio 开发免安装的app之目录结构

    尚未深入分析,暂且外链到我看到的,对此有帮助的博客,在此,感谢你们. 1.https://blog.csdn.net/tscyds/article/details/74331085 2.https:/ ...

  6. vue样式控制的方式

    创建vue对象: 1.样式控制第一种方式: 直接传递一个数组,注意: 这里的 class 需要使用  v-bind 做数据绑定. 2.样式控制第二种方式: 在数组中使用三元表达式 3.样式控制第三种方 ...

  7. Sightseeing trip POJ - 1734 -Floyd 最小环

    POJ - 1734 思路 : Floyd 实质 dp ,优化掉了第三维. dp [ i ] [ j ] [ k ] 指的是前k个点优化后    i  ->  j   的最短路. 所以我们就可以 ...

  8. 使用JumpServer管理你的服务器

    本文介绍CentOS 7从安装jumpserver到简单使用jumpserver管理服务器. 1.Jumpserver介绍 Jumpserver是一款开源的开源的堡垒机,如下图是官网介绍. 官网地址: ...

  9. JAVA基础复习与总结<四> 抽象类与接口

    抽象类(Abstract Class) 是一种模版模式.抽象类为所有子类提供了一个通用模版,子类可以在这个模版基础上进行扩展.通过抽象类,可以避免子类设计的随意性.通过抽象类,我们就可以做到严格限制子 ...

  10. 动态规划——Best Time to Buy and Sell Stock IV

    这是这个系列题目的第四个,题目大意和之前的差不多,但是这次提供最多k次的操作,操作还是不能同时操作即必须结束前一个操作才能进行后一个操作. 状态比较好理解,就是题目要求的缩小版,dp[k][i]表示进 ...