# LayoutDemo

**Repository Path**: FifiYu/layout-demo

## Basic Information

- **Project Name**: LayoutDemo
- **Description**: 控制左侧菜单展开收起的简单布局；点击控制按钮展开或收起，鼠标移入拖拽区域，点击拖拽控制菜单宽度；菜单收起状态下，鼠标放上菜单悬浮展开，鼠标移开菜单收起；
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-09
- **Last Updated**: 2024-04-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 介绍
- 实现左侧菜单收起展开，悬停展开
- 实现拖拽控制左右内容动态宽度
## 1.flex布局实现右侧内容自适应
- 左侧为 aside，右侧为 main
- 将 main 设置为 flex:1

## 2.控制菜单状态
- 通过 css 变量 --left-side-width 即菜单的宽度，判断菜单收起展开状态
- 折叠菜单，设置宽度，添加折叠类名 collapse，控制按钮图标，收起时不允许拖拽
- 展开菜单，设置宽度，移除折叠类名 collapse，控制按钮图标，展开时允许拖拽
### 2.1 获取/设置 css 变量
```js
var r = document.querySelector(':root');
// 设置
r.style.setProperty('变量名', '变量值');
// 获取
var rs = getComputedStyle(r);
var result = rs.getPropertyValue('变量名')
```

## 3.收起状态，鼠标移入后展开nav
- 通过类名 collapse，为 aside 添加 hover伪类，展开nav层，并控制sideBar位置

### 3.1 “悬停”CSS伪状态冒泡DOM树。
- 实现 hover 展开菜单后，当鼠标放到 switchBar 上点击收起时，菜单确实改变宽度呈现收起状态，但是同时触发了 aside 的 hover 效果，nav层展开。
- 查阅后发现，如果悬停元素，则会自动悬停其所有祖先。
- 解决办法：将 sideBar 和 aside 设置成同级。
- 但是这样修改后又有了新的问题，hover展开菜单的情况下，不能点击 switchBar 了，只能在菜单收起的情况下点击 switchBar 。。。。TAT。
- 所以菜单收起时我把 switchBar 隐藏了
```css
aside.collapse:hover + .side-bar .switch-bar {
  opacity: 0;
}
```