前端（各种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: ...
- ElementUI 复杂顶部和左侧导航栏实现
描述:如图 项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...
- ElementUI+命名视图实现复杂顶部和左侧导航栏
在了解了命名视图的用途后,发现用命名视图来实现复杂导航更加省力.更多知识请参考这里 这里只说明重要配置内容,其他内容配置请参考上一篇初始版本: ElementUI 复杂顶部和左侧导航栏实现 或参考文末 ...
- Bootstrap入门Demo——制作路径导航栏
今天在在群里聊天的时候看到一仅仅程序猿发了一张用Bootstrap做的界面.感觉挺好看.然后去官网看了下组件.发现都挺美丽的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源代 ...
- 修改layui的后台模板的左侧导航栏可以伸缩
原生的左侧导航栏代码: <div class="layui-side layui-bg-black"> <div class="layui-side-s ...
- dedecms左侧导航栏不显示问题
dedecms左侧导航栏不显示问题 在做织梦项目时,经常会碰到后台左侧导航栏不显示的问题,如下所示: 这主要是由于文件权限不足造成的.有两种方法 第一种:把 /data 文件夹全部改成 777 权 ...
- CI框架后台添加左侧导航栏出现的一系列问题
- MFC office2007风格设置左侧导航栏 [转]
当基础的框架搭好以后,我想为其添加一个左侧导航栏,过程如下:在框架类的头文件添加一个导航栏参数: CMFCOutlookBar m_navigation; 为了完善功能,在导航栏里面我添加了一个CTr ...
- 使用jsonp形式跨域访问实现电商平台的左侧导航栏
电商平台有个具备的左侧商品类目的导航栏的结构. 通过jsonp跨域访问电商平台的后台管理系统商品分类.(主要实现后台Java代码) 实现基本步骤: 1.在后台管理系统中准备相应的json数据. poj ...
随机推荐
- [转]PHP实现页面静态化的超简单方法
为什么要页面静态化? 1.动态文件执行过程:语法分析-编译-运行 2.静态文件,不需要编译,减少了服务器脚本运行的时间,降低了服务器的响应时间,直接运行,响应速度快:如果页面中一些内容不经常改动,动态 ...
- Linux 体系结构
Linux 体系结构 Linux 嵌入式系统的组成 层次结构图 bios 1.硬件检测 2.初始化系统设备 3.装入os 4.调os向硬件发出的指令 bsp 板级支持包 硬件相关 开发板原理图 开 ...
- Spring Cloud项目MVN编译 -- Non-resolvable import POM
最近利用闲余时间,打算搭建一套基于Spring Cloud G版的微服务架构(Spring boot 2.1.0),一顿操作之后,IDEA也没有提示什么错误,自认为微服务搭建完毕.启动项目前,习惯性的 ...
- 05解决flask循环引用的问题
1, 什么是循环引用问题?为什么会导致循环引用? 1.1先讲是什么? 主文件中class类过多会导致主文件冗余,如下图,所以我们单独给class类一个文件,然后再引用它. 1.2再讲为什么? 主文件为 ...
- VMware Workstation安装Red hat7.0联网问题总结
1.在red hat7当中iconfig命令是被取消了的,开发者用ip addr命令取代了ifconfig命令. 当然也是可以用ifconfig命令的 (前提是你安装的linux是可以联网的): 1) ...
- SharePoint2016: 使用powerShell启用project web app
1. 创建pwa承载的webApplication 在SharePoint2016管理中心>应用程序管理>管理web应用程序,新建web应用程序>sharepoint-1001, ...
- SpringBoot报错：Table 'database_name.hibernate_sequence' doesn't exist
引起条件: SpringBoot+JPA插入包含自增字段的对象 @Id @GeneratedValue private Integer id; 解决方法: 给注解添加属性 @Id @Generated ...
- imagecreatefrombmp、imagebmp php处理bmp文件
/*格式组成典型的BMP图像文件由四部分组成: 1:位图头文件数据结构,它包含BMP图像文件的类型.显示内容等信息: 2:位图信息数据结构,它包含有BMP图像的宽.高.压缩方法,以及定义颜色等信息: ...
- zstd --压缩工具
Zstandard (也被称为zstd )是一款免费的开源,快速实时数据压缩程序,具有更好的压缩比 (约为 10:1). 安装 yum group install "Development ...
- 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别
二.也是平时经常用到的offsetheight 它返回的高度是内容高+padding+边框,但是注意哦,木有加margin哦,当然一般也木有啥需要把margin加进去的,以上代码为例,结果显示上图h2 ...