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 相关文章推荐
css3media响应式布局实例
Jul 08 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
HTML基础详解(下)
Oct 16 #HTML / CSS
HTML基础详解(上)
Oct 16 #HTML / CSS
CSS基础详解
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
php MySQL与分页效率
2008/06/04 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
php实现天干地支计算器示例
2014/03/14 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
最新pycharm安装教程
2020/11/18 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
培训演讲稿范文
2014/01/12 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
四风问题对照检查材料
2014/09/22 职场文书
家长评语怎么写
2014/12/30 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python