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制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
HTML基础详解(下)
Oct 16 #HTML / CSS
HTML基础详解(上)
Oct 16 #HTML / CSS
CSS基础详解
You might like
FCKeditor添加自定义按钮
2008/03/27 PHP
php jsonp单引号转义
2014/11/23 PHP
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
仓管岗位职责范本
2014/02/08 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
党支部先进事迹材料
2014/12/24 职场文书
2015年司法所工作总结
2015/04/27 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
起诉意见书范文
2015/05/19 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
Java 写一个简单的图书管理系统
2022/04/26 Java/Android