CSS实现单选折叠菜单功能

  发布时间:2021-10-26 15:04:22   作者:xosg   我要评论
今天教大家用纯css实现一个单选的折叠菜单,不需要JavaScript就能用。折叠菜单和标签页差不多,逻辑上都是一种单选面板,只不过折叠菜单一般是垂直堆叠的,标签页是横着排列,对实现代码感兴趣的朋友跟随小编一起看看吧

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

dca0a8cfcb26d3cd87aed4ceeceee3b4.png

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

873ecdccbd4a9eda8905fa3dda8a95f3.gif

标签页:

6af435a8d5daf3680c52d09d86cf2254.gif

既然是单选的,就可以用<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>默认是这样的:

3734ce405520be5e763445ce517388d4.gif

还是先用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;
}

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

192e7d623a0ddedcc4811c5fab7db066.png

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

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

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

a92c5f3b16fb6ea25513791832948417.gif

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

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

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

相关文章

  • 纯css实现多级折叠菜单折叠树效果

    这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考
    2018-03-29
  • 纯CSS制作的响应式折叠菜单分享

    这篇文章主要介绍了纯CSS制作的响应式折叠菜单分享,请看文章开头的示例,并不要用到JavaScript代码~需要的朋友可以参考下
    2015-07-20
  • 纯CSS实现的滑动的可折叠菜单

    纯CSS实现的二级纵向下拉菜单,可以滑动折叠,无需JavaScript代码,兼容性好
    2010-12-18
  • CSS 折叠的菜单实现代码

    这个是用纯CSS实现的折叠菜单代码,暖色调非常漂亮哦,测试发现兼容性也挺好,有用的朋友先收藏一下吧。
    2009-10-15

最新评论