使用CSS实现有趣的汉堡菜单按钮
发布时间：2024-02-23 10:16:44 作者：设计师工作日常 
我要评论
我要评论这篇文章主要为大家详细介绍了如何使用CSS实现有趣的汉堡菜单按钮，适用于h5页面或者app页面中，隐藏菜单和打开菜单时使用,感兴趣的小伙伴可以跟随小编一起学习一下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
整体效果
使用 transition 过渡属性和 transform 变形属性，让汉堡图标和关闭图标之间进行过渡、变形，形成视觉效果。
适用于h5页面或者app页面中，隐藏菜单和打开菜单时使用。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
核心代码
html 代码
<label?class="label16"> ??<input?class="inp16"?type="checkbox"> ??<span?class="line16"></span> ??<span?class="line16"></span> ??<span?class="line16"></span> </label>
label 标签包裹 input 标签，input 设置为多选按钮，三个 span 标签形成汉堡图标。
css 部分代码
.label16{
??width:?48px;
??height:?36px;
??display:?block;
??position:?relative;
??cursor:?pointer;
}
.inp16{
??display:?none;
}
.line16{
??width:?inherit;
??height:?4px;
??border-radius:?2px;
??display:?block;
??background-color:?#3d3d3d;
??position:?absolute;
??top:?0;
??transition:?all?0.24s?ease-in-out;
}
.line16:nth-of-type(2){
??top:?16px;
}
.line16:nth-of-type(3){
??top:?32px;
}
.inp16:checked?~?.line16:nth-of-type(1){
??transform:?rotate(45deg);
??top:?16px;
}
.inp16:checked?~?.line16:nth-of-type(2){
??width:?0;
}
.inp16:checked?~?.line16:nth-of-type(3){
??transform:?rotate(-45deg);
??top:?16px;
}隐藏 input 多选按钮，设置 transition 过渡效果，当 input 多选按钮选中时，三个 span 标签设置变形效果，汉堡图标变形过渡到关闭图标。
完整代码如下
html 页面
<!DOCTYPE?html> <html?lang="zh"> ??<head> ????<meta?charset="utf-8"> ????<link?rel="stylesheet"?href="style.css"> ????<title>汉堡菜单按钮</title> ??</head> ??<body> ????<div?class="app"> ??????<label?class="label16"> ????????<input?class="inp16"?type="checkbox"> ????????<span?class="line16"></span> ????????<span?class="line16"></span> ????????<span?class="line16"></span> ??????</label> ????</div> ??</body> </html>
css 样式
/**?style.css?**/
.app{
??width:?100%;
??height:?100vh;
??background-color:?#ffffff;
??position:?relative;
??display:?flex;
??justify-content:?center;
??align-items:?center;
}
.label16{
??width:?48px;
??height:?36px;
??display:?block;
??position:?relative;
??cursor:?pointer;
}
.inp16{
??display:?none;
}
.line16{
??width:?inherit;
??height:?4px;
??border-radius:?2px;
??display:?block;
??background-color:?#3d3d3d;
??position:?absolute;
??top:?0;
??transition:?all?0.24s?ease-in-out;
}
.line16:nth-of-type(2){
??top:?16px;
}
.line16:nth-of-type(3){
??top:?32px;
}
.inp16:checked?~?.line16:nth-of-type(1){
??transform:?rotate(45deg);
??top:?16px;
}
.inp16:checked?~?.line16:nth-of-type(2){
??width:?0;
}
.inp16:checked?~?.line16:nth-of-type(3){
??transform:?rotate(-45deg);
??top:?16px;
}页面渲染效果
到此这篇关于使用CSS实现有趣的汉堡菜单按钮的文章就介绍到这了,更多相关CSS汉堡菜单按钮内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了CSS实现菜单按钮动画,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2019-04-12- 这篇文章主要介绍了CSS仿网易首页的头部菜单栏按钮和三角形制作方法的相关资料,需要的朋友可以参考下2016-08-15
- 这篇文章主要为大家介绍了CSS实现有立体感的横向按钮式菜单效果代码,可实现鼠标滑过呈现按钮按下的效果,具有极强的3D立体效果,涉及css基于hover属性的border边框设置技巧,2015-09-15
- 这篇文章主要为大家介绍了CSS实现自适应宽度的菜单按钮效果代码,实例分析了css针对页面自适应宽度的相关设置技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-11
- 网页制作Webjx文章简介：在当今标准的Web设计中，CSS是最重要的组成部分。为了让大家更好的理解如何通过CSS来设计，Webjx为大家收集了30个基于CSS的导航菜单和按钮的CSS设2009-04-02
- 网页制作Webjx文章简介：本文一步一步手把手教你打造一个极酷的三层分离的标准滑动门导航菜单. 导言：本文一步一步手把手教你打造一个极酷的三层分离的标2009-04-02
平时我们在浏览网页时，如下图的导航栏已经屡见不鲜了，当鼠标放上去时，右侧隐藏的内容就会慢慢平滑展开，非常美观且实用，今天小编通过本文给大家分享基于CSS实现网页悬2023-02-13
今天教大家用纯css实现一个单选的折叠菜单，不需要JavaScript就能用。折叠菜单和标签页差不多，逻辑上都是一种单选面板，只不过折叠菜单一般是垂直堆叠的，标签页是横着排2021-10-26
这篇文章主要介绍了纯CSS实现的下拉菜单的示例代码，帮助大家更好的理解和使用CSS特效，感兴趣的朋友可以了解下2020-12-07
这篇文章主要介绍了CSS实现Hover下拉菜单的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2020-12-03
最新评论