初学css就能做 好玩的隐藏式伸缩菜单
asiaqi
帮助1人
效果展示
代码
HTML 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伸缩式菜单</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://blog.csdn.net/m0_62200674/article/details/1.css">
</head>
<body>
<div class="container" >
<!-- --h为自定义变量，这里设置方便定义各个列表项样式top属性 -->
<li style="--h:0%;">
<a href="https://blog.csdn.net/m0_62200674/article/details/127201744">
<!--设置为#号是因为此例中无跳转链接-->
<i class="fa fa-user-circle-o" aria-hidden="true"></i> <!--图标-->
</a>
</li>
<li style="--h:20%;">
<a href="https://blog.csdn.net/m0_62200674/article/details/127201744">
<i class="fa fa-envelope-open-o" aria-hidden="true"></i>
</a>
</li>
<li style="--h:40%;">
<a href="https://blog.csdn.net/m0_62200674/article/details/127201744">
<i class="fa fa-folder" aria-hidden="true"></i>
</a>
</li>
<li style="--h:60%;">
<a href="https://blog.csdn.net/m0_62200674/article/details/127201744">
<i class="fa fa-cube" aria-hidden="true"></i>
</a>
</li>
<li style="--h:80%;">
<a href="https://blog.csdn.net/m0_62200674/article/details/127201744">
<i class="fa fa-share-square-o" aria-hidden="true"></i>
</a>
</li>
<!-- 选择签,为什么分三部分后续讲解 -->
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</body>
</html>
CSS 部分
* {
/* 初始化 */
margin: 0;
padding: 0;
}
body {
background-color: black;
height: 100vh;
/* vh指CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度。 */
}
.container {
height: 300px;
width: 15px;
position: absolute;
left: 0;
/* 实现垂直居中 */
top: 50%;
transform: translateY(-50%);
background-color: #222;
overflow: hidden;
border-radius: 0 15px 15px 0;
/* 动画过渡之后的伸展 */
transition: 0.3s;
}
.container::before {
/* 这是伪元素选择器,在元素内部开始的部分创建一个元素*/
content: "";
/* 一定要有content */
background-color: lightseagreen;
position: absolute;
width: 50%;
height: 100%;
left: 0;
top: 0;
/* 不可以遮蔽图标，在图标下层，置于底层 */
z-index: -1;
}
.container:hover {
/* 鼠标悬停后拉长 */
width: 100px;
border-radius: 0 30px 30px 0;
}
.container li {
/* 标签列表 */
position: absolute;
/* 不同标签高度不同，高度在HTML输入 */
top: var(--h);
/* li标签实现水平竖直居中 */
display: flex;
justify-content: center;
align-items: center;
height: 20%;
width: 100%;
font-size: 20px;
}
.container li a {
/* 图标在伸展开来之前是透明的 */
color: transparent;
transition: 0.3s;
}
.container:hover li a {
/* 鼠标悬停之后选卡展开，标签变成白色显示 */
color: white;
}
.container .top {
width: calc(100% - 30px);
margin-left: 30px;
height: 20%;
background-color: #222;
border-radius: 0 0 0 10px;
/* 动画过渡 */
transition: 0.2s;
}
.container .middle {
width: calc(100% - 50px);
height: 20%;
background-color: lightseagreen;
margin-left: 35px;
border-radius: 15px;
/* 动画过渡 */
transition: 0.2s;
}
.container .bottom {
width: calc(100% - 30px);
height: 100%;
margin-left: 30px;
background-color: #222;
border-radius: 10px 0 0 0;
}
/* li:nth-child(n)是伪类选择器，匹配属于其父元素的子元素的第n个li元素 */
/* ~是后继兄弟选择器 */
.container li:nth-child(1) ~ .top {
/* 这个选择器的含义是 匹配在container类下第一个li的后继所有top类的兄弟元素 */
height: 0%;
}
.container li:nth-child(2):hover ~ .top {
height: 20%;
}
.container li:nth-child(3):hover ~ .top {
height: 40%;
}
.container li:nth-child(4):hover ~ .top {
height: 60%;
}
.container li:nth-child(5):hover ~ .top {
height: 80%;
}
代码逻辑
其实重点要理解的是标签页为什么分为 top，middle，bottom 三个部分。
为了方便观察，我将 top 设为红色，middle 为绿色，bottom 为蓝色，如图。
光标移动导致 top 的 height 变动，也就是 top 模块的伸缩，间接推动 middle 模块的位置，使 middle 指向选中的图标。
（把 top 调回和 container 一样的颜色，就好像 middle“主动”在跑）
那似乎 bottom 没有也行嘛~
那我们实验一下，如果没有 bottom，效果是：
对比一下，有什么不同？
！对，最后两个滑块有一半变成了绿色，就是说 container::before 的块突出来了。
我们再看看源码，发现 before 的 width 是 50%，不是一个固定的 px 值，会随着 container 的变大而变大，始终占 container 的 50%。而 li 标签是居中的，那么必然会和 before 块有重合。那样不好看呀，不是我们想要的。所以我们拿了一个 bottom 块来把 before 块给重叠覆盖住。
注意：不是挤压，因为这几个块不是 flex，并且 before 在 bottom 块之前，要挤也是 before 挤 bottom。
（下图我把 before 置于底层取消了,验证了我的猜想）
小结
- 这个例子来自 b 站：HTML5 CSS3 小实例：隐藏式侧边栏菜单
- 模仿的时候一定要认真思考每一行代码的效果，每一个模块设置的原因！不懂的地方就改代码验证。
- 小组件也很考验前端实现逻辑，也很有思维含量~
- 举一反三，横着的菜单也该会做了
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhhafjhe
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13
