CSS实现单选折叠菜单功能


Posted in HTML / CSS onNovember 01, 2021

不到万不得已的时候千万别引入前端UI框架,因为HTML5和CSS3已经能实现绝大多数的功能,比如上期的《CSS实现最简洁的开关》

CSS实现单选折叠菜单功能

而很多人的思维还停留在web2.0时代,用各种库来做UI,导致网页臃肿。今天教大家用纯css实现一个单选的折叠菜单,不需要JavaScript就能用。折叠菜单和标签页差不多,逻辑上都是一种单选面板,只不过折叠菜单一般是垂直堆叠的,标签页是横着排列。

CSS实现单选折叠菜单功能

标签页:

CSS实现单选折叠菜单功能

既然是单选的,就可以用<input type="radio">单选按钮来实现。首先这些单选按钮组的父元素用<form>,因为<form>可以监听按钮组的变化,同时还能通过name属性直接得到RadioNodeList列表和变化值,非常方便,不用设置其他的css选择器了。所以这个折叠菜单的html如下:

<form id="form">
    <input type="radio" name="collapse">
    <div></div>
 
    <input type="radio" name="collapse">
    <div></div>

    <input type="radio" name="collapse">
    <div></div>
</form>

给<form>设置id,这样可以直接通过window[id]找到它,每个<radio>的name属性要一致,然后通过form[name]得到单选组,form[name].value就是当前选中的按钮的value,也就是折叠按钮的标题,每个<radio>后面跟着一个<div>就是菜单展开的内容。但是<radio>默认是这样的:

CSS实现单选折叠菜单功能

还是先用appearance: none禁用如上图的默认样式,然后利用::before作为按钮左侧的名称(读取value属性),::after作为右侧的小箭头(字符>和v),通过:checked属性表示折叠状态。

input[type="radio"] {       
      cursor: pointer;
      appearance: none;
      display: block;
}
 
 
input[type="radio"]::before {
      content: attr(value);
}
 
 
input[type="radio"]::after {       
      float: right;
      content: ">";
}
 
 
input[type="radio"]:checked::after {
      content: "v";
}

对于<div>,默认是隐藏的,只有被选中的<radio>后面的<div>才显示。至于折叠动画的话,就看需求了,对我来说,没有动画会更清爽一点。

input[type="radio"] + div {
      display: none;
}
 
 
input[type="radio"]:checked + div {
      display: block;
}

以上就是基本布局,再加上一点其他样式,就成了:

CSS实现单选折叠菜单功能

但是由于<radio>的特性,无法反选,菜单展开后想要折叠只能点别的菜单项,当然这也没什么,如果非要实现反选菜单的功能,需要记录上次展开的菜单项,每次发生点击事件时,判断是否重复点击:

// for every <radio>
radio.onclick = () => {
  if (window.radio === radio) {
    input.checked = false;
    window.radio = null;
  } else window.radio = radio;
};

这样就实现了单选折叠菜单的反选能力:

CSS实现单选折叠菜单功能

对了,图中混乱的文字是原来文字被打乱的结果(隐私需要),可以通过下面的代码将一个字符串打乱:

string.split('').sort(() => Math.random() - 0.5).join('')

到此这篇关于CSS实现单选折叠菜单功能的文章就介绍到这了,更多相关CSS单选折叠菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
HTML基础详解(下)
Oct 16 #HTML / CSS
HTML基础详解(上)
Oct 16 #HTML / CSS
CSS基础详解
You might like
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
再论Javascript的类继承
2011/03/05 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
angular动态表单制作
2018/02/23 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
python安装requests库的实例代码
2019/06/25 Python
简单介绍python封装的基本知识
2019/08/10 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
python如何查看安装了的模块
2020/06/23 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Python代码需要缩进吗
2020/07/01 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
互动出版网:专业书籍
2017/03/21 全球购物
C#实现启动一个进程
2016/10/01 面试题
留学自荐信写作方法
2014/01/27 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
Python使用scapy模块发包收包
2021/05/07 Python