嵌入式开发之web---js简单左侧菜单导航栏goahead


1.给div设置定位。

  复习一下——

  css中position有五种属性:

    static:默认值,没有定位

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

    relative:相对定位

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

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

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

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

主要属性是:

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

效果:

代码:




    
    
    
    Document
    


    

升级版

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

代码:




    
        
        
        
        
    

    
        
aliyun

鸣谢: 

https://www.cnblogs.com/xhznl/p/13517332.html vue 登陆功能对接 

https://www.cnblogs.com/chengxs/p/9465482.html node+vue+redis+mysql+es6

https://www.cnblogs.com/chengxs/p/7711752.html 

https://www.cnblogs.com/silencehuan/p/10983404.html  

https://www.cnblogs.com/silencehuan/p/10972610.html  移植

https://www.cnblogs.com/silencehuan/p/10975774.html 自定义开发

https://www.embedthis.com/goahead/doc/ doc