前端(各种demo)二:左侧导航栏的折叠和打开(不使用js)基础版和升级版

1.给div设置定位。

  复习一下——

  css中position有五种属性:

    static:默认值,没有定位

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

    relative:相对定位

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

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

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

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

主要属性是:

menu :checked + .menu-item-list {
        max-height: 500px;
    }

 

效果:

前端(各种demo)二:左侧导航栏的折叠和打开(不使用js)基础版和升级版_第1张图片

 

 

代码:




    
    
    
    Document
    


    

 

 

升级版

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

前端(各种demo)二:左侧导航栏的折叠和打开(不使用js)基础版和升级版_第2张图片

 

代码:




    
        
        
        
        
    

    
        
aliyun

 

转载于:https://www.cnblogs.com/chengxs/p/7711752.html

你可能感兴趣的:(前端(各种demo)二:左侧导航栏的折叠和打开(不使用js)基础版和升级版)