前端（各种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;

    }

效果：

代码：

<!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）基础版和升级版的更多相关文章

前端（各种demo）二：左侧导航栏的折叠和打开（不使用js）基础版和升级版
1.给div设置定位. 复习一下—— css中position有五种属性: static:默认值,没有定位 absolute:绝对定位,相对于父级元素进行定位 relative:相对定位 fixed: ...
右侧导航栏(动态添加数据到list)
页面样式 <style> .scroll { position: fixed; right: 5%; top: 5em; background: #ccc; display: none; ...
【前端】javascript实现导航栏筋斗云效果特效
实现效果: 实现效果如下图所示实现原理: 什么是筋斗云效果: 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: 鼠标经过的时候,利用offsetLeft获 ...
前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
Bootstrap入门Demo——制作路径导航栏
今天在在群里聊天的时候看到一仅仅程序猿发了一张用Bootstrap做的界面.感觉挺好看.然后去官网看了下组件.发现都挺美丽的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源代 ...
ElementUI 复杂顶部和左侧导航栏实现
描述:如图项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...
ElementUI+命名视图实现复杂顶部和左侧导航栏
在了解了命名视图的用途后,发现用命名视图来实现复杂导航更加省力.更多知识请参考这里这里只说明重要配置内容,其他内容配置请参考上一篇初始版本: ElementUI 复杂顶部和左侧导航栏实现或参考文末 ...
简单仿京东"筛选"界面双导航栏控制器共存 by Nicky.Tsui
大概就是这么一个效果如图.大概可以看到,"筛选"视图后面有一层视图盖住了后面原来的视图那么我们可以通过加一个view到导航栏控制器的view里面来实现 //该view作为全局变 ...
iOS 解决导航栏左右 BarButtonItem偏移位置的问题
iOS7 之后,我们直接在导航栏添加barbuttonItem时候,会发现有一定偏移量, 比如: self.navigationItem.leftBarButtonItem ＝ UIBarButton ...

随机推荐

PHP字符串常用操作
常用操作有: PHP中有两个内建的函数:count() 和sizeof(),可以实现得到数组的长度 count($sttr);数组长度字符串长度:strlen(string $a); 判断是否相同, ...
Java I/O 从0到1 - 第Ⅰ滴血 File
前言 File 类的介绍主要会依据<Java 编程思想>以及官网API .相信大家在日常工作中,肯定会遇到文件流的读取等操作,但是在搜索过程中,并没有找到一个介绍的很简洁明了的文章.因此, ...
JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】
什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...
python实现裴波那契数列
def Fib(n): ''' 假定序号为0或者1,返回1,序号为2时返回2 ''' before = 1 after = 1 for i in range(n): before, after = a ...
Java 异常机制
Java 异常机制什么是异常异常指不期而至的各种状况,如:文件找不到.网络连接失败.非法参数等.异常是一个事件,它发生在程序运行期间,干扰了正常的指令流程为什么要有异常什么出错了哪里出错了 ...
XML的序列化（Serializer）
步骤: //1获取XmlSerializer 类的实例通过Xml这个工具类去获取 XmlSerializer xmlSerializer = Xml.newSerializer(); try { / ...
从输入 URL 到页面加载完成的过程中都发生了什么
从输入 URL 到页面加载完成的过程中都发生了什么过程描述浏览器查找域名对应的 IP 地址: 浏览器根据 IP 地址与服务器建立 socket 连接: 浏览器与服务器通信: 浏览器请求,服务器处理 ...
【 js 基础】关于this
this 关键字是 Javascript 中很特别的一个关键字,被自动定义在所有函数的作用域中.this提供了一种更优雅的方式隐式"传递"一个对象的引用.今天就来说说 this 的 ...
AF_INET
AF_INET(又称PF_INET)是 IPv4 网络协议的套接字类型,AF_INET6 则是 IPv6 的:而AF_UNIX 则是Unix系统本地通信. 选择AF_INET 的目的就是使用IPv4 ...
JSP入门 el表达式
我们已经知道el是jsp-2.0规范的一部分,tomcat-5.x版本以上都已经能够支持jsp-2.0规范,但在更低版本的tomcat和webphere,weblogic中还是无法使用这一便捷方式. ...

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

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

随机推荐

热门专题