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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
HTML基础详解(下)
Oct 16 #HTML / CSS
HTML基础详解(上)
Oct 16 #HTML / CSS
CSS基础详解
You might like
谈谈关于php的优点与缺点
2013/04/11 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP生成唯一订单号
2015/07/05 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
javascript静态的url如何传递
2007/05/03 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
document.getElementById介绍
2011/09/13 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
node跨域请求方法小结
2017/08/25 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
Python多线程实例教程
2014/09/06 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
python算法表示概念扫盲教程
2017/04/13 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
存储过程和函数的区别
2013/05/28 面试题
大学生自我评价怎样写好
2013/10/23 职场文书
国家助学金获奖感言
2014/01/31 职场文书
五五普法心得体会
2014/09/04 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
酒桌上的开场白
2015/06/01 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python