CSS基础测试10 - Githubissues

zhangxinxu / quiz

小测答题收集区

536 stars 43 forks source link

CSS基础测试10 #37

Open zhangxinxu opened 5 years ago

zhangxinxu commented 5 years ago

本期题目如下，实现一个简单的下拉导航：

请附上对应的CSS代码，注意缩进和代码高亮，可以使用下面语法：

```css
你的代码在这里
```

请提供在线的可访问的demo地址（精力有限，没有demo减1分），如jsbin.com、jsfiddle.net或codepen.io，使用国内的类似工具也可以。

本周六因为有事，所以小测直播答疑为本周日8月11日上午10:00，大约30分钟，直播地址：https://live.bilibili.com/21193211

首位答题者有机会被翻牌，每位答题者都可获得2积分底分。

感谢您的参与！

XboxYan commented 5 years ago

纯css大概就这些吧。

summary

demo

<div class="ui-menu-wrap">
        <details class="ui-menu" open>
            <summary class="ui-menu-summary">布局</summary>
            <div class="ui-menu-list">
                <a class="ui-btn">Flex 布局</a>
                <a class="ui-btn">Grid 布局</a>
                <a class="ui-btn">Shapes 布局</a>
                <a class="ui-btn">Flex 布局</a>
                <a class="ui-btn">Flex 布局</a>
            </div>
        </details>
        <details class="ui-menu" open>
            <summary class="ui-menu-summary">组件</summary>
            <div class="ui-menu-list">
                <a class="ui-btn">按钮</a>
                <a class="ui-btn">输入框</a>
                <a class="ui-btn">下拉列表</a>
                <a class="ui-btn">单选框</a>
            </div>
        </details>
    </div>

::-webkit-details-marker {
    display: none;
}

::-moz-list-bullet {
    font-size: 0;
}

summary {
    outline: 0;
}

.ui-btn {
    line-height: 40px;
    padding: 0 25px;
    font-size: 14px;
    color: #666;
    transition: .3s;
    cursor: pointer;
}

.ui-btn:hover {
    background: #edf9ff;
    color: #33b2ee;
}

.ui-menu-list .ui-btn {
    display: block;
}

.ui-menu-summary {
    position: relative;
    padding:0 10px;
    line-height: 40px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.ui-menu-summary::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: 3px;
    width: 6px;
    height: 6px;
    border: 2px solid;
    border-width: 2px 2px 0 0;
    transform: translateY(-8px) rotate(135deg);
    transition: .3s;
}

.ui-menu[open] .ui-menu-summary::after {
    transform: translateY(-8px)  rotate(-45deg);
}

checkbox

demo

<div class="ui-menu-wrap">
        <div class="ui-menu">
            <input type="checkbox" id="menu01" checked>
            <label class="ui-menu-summary" for="menu01">布局</label>
            <div class="ui-menu-list">
                <a class="ui-btn">Flex 布局</a>
                <a class="ui-btn">Grid 布局</a>
                <a class="ui-btn">Shapes 布局</a>
                <a class="ui-btn">Flex 布局</a>
                <a class="ui-btn">Flex 布局</a>
            </div>
        </div>
        ...
    </div>

/*同上*/
.ui-menu-list{
  display:none;
}
.ui-menu>input[type="checkbox"]:checked+.ui-menu-summary::after {
    transform: translateY(-8px)  rotate(-45deg);
}
.ui-menu>input[type="checkbox"]{
  position:absolute;
  clip:rect(0,0,0,0)
}
.ui-menu>input[type="checkbox"]:checked+.ui-menu-summary+.ui-menu-list{
    display:block;
}

tagert

仅支持手风琴效果 demo

<div class="ui-menu-wrap">
        <div class="ui-menu">
            <a class="ui-menu-summary" id="menu01"  href="#menu01">布局</a>
            <div class="ui-menu-list">
                <a class="ui-btn">Flex 布局</a>
                <a class="ui-btn">Grid 布局</a>
                <a class="ui-btn">Shapes 布局</a>
                <a class="ui-btn">Flex 布局</a>
                <a class="ui-btn">Flex 布局</a>
            </div>
        </div>
        ...
    </div>

/*同上*/
.ui-menu-list{
  display:none;
}
.ui-menu-summary:target::after {
    transform: translateY(-8px)  rotate(-45deg);
}
.ui-menu-summary:target+.ui-menu-list{
    display:block;
}

focus, focus-within

demo

仅支持手风琴效果

<div class="ui-menu-wrap">
<div class="ui-menu">
<button class="ui-menu-summary">布局</button>
<div class="ui-menu-list">
<button class="ui-btn">Flex 布局</button>
<button class="ui-btn">Grid 布局</button>
<button class="ui-btn">Shapes 布局</button>
<button class="ui-btn">Flex 布局</button>
<button class="ui-btn">Flex 布局</button>
</div>
</div>
...
</div>

/*同上*/
.ui-menu-list{
display:none;
}
.ui-menu:focus-within .ui-menu-summary::after {
transform: translateY(-8px)  rotate(-45deg);
}
.ui-menu:focus-within .ui-menu-list{
display:block;
}

brenner8023 commented 5 years ago

在线demo

<div class="container">
  <dl class="list">
    <input type="checkbox" id="box1" class="checkbox" />
    <dt class="list_title">
      <span>布局</span>
      <label for="box1">
        <svg class="icon_up" t="1565179412806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3378" width="200" height="200"><path d="M935.674 685.582L540.081 286.395c-14.055-14.175-36.936-14.272-51.11-0.22l-0.008 0.007c-0.145 0.145-0.184 0.33-0.32 0.464-0.61 0.574-1.408 0.719-2.02 1.34L87.475 683.551c-14.188 14.069-14.285 36.974-0.219 51.161 14.069 14.189 36.974 14.286 51.162 0.22l375.566-372.197 370.389 373.78c13.84 14.392 36.723 14.838 51.113 1 14.392-13.84 14.838-36.724 0.999-51.114a25.475 25.475 0 0 0-0.81-0.819z" p-id="3379"></path></svg>
      </label>
    </dt>
    <dd class="list_li">Flex布局</dd>
    <dd class="list_li">Grid布局</dd>
    <dd class="list_li">Shapes布局</dd>
    <dd class="list_li">Columns布局</dd>
  </dl>
  <dl class="list">
    <input type="checkbox" id="box2" class="checkbox" />
    <dt class="list_title">
      <span>组件</span>
      <label for="box2">
        <svg class="icon_up" t="1565179412806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3378" width="200" height="200"><path d="M935.674 685.582L540.081 286.395c-14.055-14.175-36.936-14.272-51.11-0.22l-0.008 0.007c-0.145 0.145-0.184 0.33-0.32 0.464-0.61 0.574-1.408 0.719-2.02 1.34L87.475 683.551c-14.188 14.069-14.285 36.974-0.219 51.161 14.069 14.189 36.974 14.286 51.162 0.22l375.566-372.197 370.389 373.78c13.84 14.392 36.723 14.838 51.113 1 14.392-13.84 14.838-36.724 0.999-51.114a25.475 25.475 0 0 0-0.81-0.819z" p-id="3379"></path></svg>
      </label>
    </dt>
    <dd class="list_li">按钮</dd>
    <dd class="list_li">输入框</dd>
    <dd class="list_li">下拉列表</dd>
    <dd class="list_li">单复选框</dd>
  </dl>
</div>

.container {
  border-left: 2px solid #ccc;
  border-right: 2px solid #ccc;
  width: max-content;
  min-width: 140px;
  min-height: 200px;
  margin: 50px auto; /* 居中 */
}

.list_title {
  font-weight: bold;
  padding-left: 4px;
  padding-right: 4px;
}

.icon_up {
  width: 16px;
  height: 16px;
  float: right;
  cursor: pointer;
}

.checkbox { display: none; }

.list_li {
  margin: 0;
  padding: 4px 20px;
}

.list_li:hover {
  background: lightblue;
  color: rgb(0, 153, 255);
  cursor: pointer;
}

/****** 点击展开的交互效果实现 ******/
#box1:checked ~ .list_li {
  display: none;
}

#box1:checked ~ .list_title .icon_up {
  transform: rotate(180deg);
}

#box2:checked ~ .list_li {
  display: none;
}

#box2:checked ~ .list_title .icon_up {
  transform: rotate(180deg);
}
/****** 点击展开的交互效果实现 ******/

wingmeng commented 5 years ago

> 在线 DEMO <

思路：

利用 :checked 伪类，配合 +（临近选择器）和 ~（兄弟选择器），来实现子导航展开/折叠的交互效果；
利用 max-height 和 opacity，配合 transition 实现过渡动画效果；
注意 max-height 应根据实际情况设置合适的值，太大会造成“卡顿”现象，太小会剪裁掉内容；
保留 checkbox 的键盘可访问性，即不使用 display: none 或 visibility: hidden 的方式隐藏 checkbox；
使用 visibility 来控制元素的可见性，避免元素视觉不可见时（max-height: 0; opacity: 0），被 Tab 键索引。

<main class="container">
  <nav class="navbar">
    <div class="navbar-group">
      <input class="navbar-group-switch" id="switch1" type="checkbox" checked>
      <label class="navbar-group-title" for="switch1">布局</label>
      <ul class="navbar-group-list">
        <li>
          <a href="#" class="navbar-link">Flex布局</a>
        </li>
        <li>
          <a href="#" class="navbar-link is-active">Grid布局</a>
        </li>
        <li>
          <a href="#" class="navbar-link">Shapes布局</a>
        </li>
        <li>
          <a href="#" class="navbar-link">Columns布局</a>
        </li>
      </ul>
    </div>
    <div class="navbar-group">
      <input class="navbar-group-switch" id="switch2" type="checkbox" checked>
      <label class="navbar-group-title" for="switch2">组件</label>
      <ul class="navbar-group-list">
        <li>
          <a href="#" class="navbar-link">按钮</a>
        </li>
        <li>
          <a href="#" class="navbar-link">输入框</a>
        </li>
        <li>
          <a href="#" class="navbar-link">下拉列表</a>
        </li>
        <li>
          <a href="#" class="navbar-link">单复选框</a>
        </li>
      </ul>
    </div>
  </nav>
</main>

body {
  margin: 0;
  font-size: 14px;
  line-height: 1.42858;
}

.container {
  max-width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

/* 导航容器 */
.navbar {
  width: 160px;
  height: 100vh;
  overflow: auto;
  color: #353535;
  box-shadow: inset 1px 0 0 #e0e0e0,
              inset -1px 0 0 #e0e0e0;
}

/* 导航分组标题（点击折叠/展开子导航） */
.navbar-group-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  font-weight: 700;
  cursor: pointer;
}
.navbar-group-title::after {
  content: "";
  width: 6px;
  height: 6px;
  transform: rotate(225deg);
  border-style: solid;
  border-width: 2px 0 0 2px;
  transition: transform .3s;
}

/* 子导航列表 */
.navbar-group-list {
  max-height: 0;  /* 用以实现过渡动画 */
  padding: 0;
  margin: 0;
  visibility: hidden;  /* 元素不可见，避免被 tab-index 索引 */
  opacity: 0;  /* 用以实现过渡动画 */
  overflow: hidden;
  transition: all ease-in-out .3s;
  list-style: none;
}

/* 导航链接 */
.navbar-link {
  display: block;
  padding: 0 calc(10px + 1.5em);
  line-height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: inherit;
}
.navbar-link:hover,
.navbar-link.is-active {
  color: #36b3ee;
  background: rgb(54, 179, 238, .1);
}

/* 控制子导航展开/折叠的复选框 */
.navbar-group-switch {
  /* 剪切式隐藏，保留键盘可访问性 */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
.navbar-group-switch:focus + .navbar-group-title {
  background: rgb(54, 179, 238, .1);
}
.navbar-group-switch:checked + .navbar-group-title::after {
  transform: rotate(45deg);
}
.navbar-group-switch:checked ~ .navbar-group-list {
  max-height: 500px;  /* 根据实际情况合理设置其值 */
  visibility: visible;
  opacity: 1;
}

ziven27 commented 5 years ago

JS Bin地址：点我

能想到的纯 CSS 实现该效果方法：

input:checked: 用 label for 触发对应 id 的 input checked 属性;
details[open]：用 summary 触发 details 的 open「兼容性要求较高」;
.acc-bd:target: 用 a的 hash 来触发对应 id 的 target 属性「一次只能展开一个」;

为了更好的兼容性，这里采用了第一种作为开关触发器，其它两个方式类似。

.box {
    width: 15em;
    padding: 1em;
    float: left;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin-right: 1em;
}

.acc-hd {
    margin: 0;
    padding: 1em 0;
    font-size: 1.1em;
    position: relative;
}

.acc-hd label {
    display: block;
    cursor: pointer;
}

.acc-bd {
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms;
}

.acc-switch {
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
}

.acc-bd a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-decoration: none;
    padding: 1em 1em 1em 2em;
    color: #333;
    transition: background-color 200ms, color 200ms;
}

.acc-bd a:hover, .acc-bd ._selected {
    background-color: #edf9ff;
}

.acc-bd ._selected, .acc-bd a:active {
    color: #41baf1;
}

.acc-bd + .acc-hd {
    margin-top: 1em;
}

.acc-switch:checked + .acc {
    height: auto;
}

/* 这个高度要高于最长的列表高度 */
.acc-switch:checked + .acc-hd + .acc-bd {
    max-height: 300px;
}

/* 三角形 */
.acc-hd label:after, .acc-hd label:before {
    position: absolute;
    content: '';
    top: 50%;
    right: 0;
    border-top: 5px solid;
    border-right: 5px dashed transparent;
    border-left: 5px dashed transparent;
    transition: margin-top 200ms, border-width 200ms;
}

.acc-hd label:after {
    border-top-color: #ffffff;
    margin-top: -2px;
}

.acc-switch:checked + .acc-hd label:after {
    border-bottom: 5px solid #ffffff;
    border-top: none 0;
    margin-top: 2px;
}

.acc-switch:checked + .acc-hd label:before {
    border-bottom: 5px solid;
    border-top: none 0;
}

<div class="box">
    <input id="accSwitch1" type="checkbox" checked class="acc-switch">
    <h3 class="acc-hd"><label for="accSwitch1">布局</label></h3>
    <p class="acc-bd">
        <a href="##" title="Flex布局">Flex布局</a>
        <a href="##" title="Grid布局" class="_selected">Grid布局</a>
        <a href="##" title="Shapes布局">Shapes布局</a>
        <a href="##" title="Columns布局">Columns布局</a>
    </p>
    <input id="accSwitch2" type="checkbox" checked class="acc-switch">
    <h3 class="acc-hd"><label for="accSwitch2">组件</label></h3>
    <p class="acc-bd">
        <a href="##" title="按钮">按钮</a>
        <a href="##" title="输入框">输入框</a>
        <a href="##" title="下拉列表">下拉列表</a>
        <a href="##" title="单复选框">单复选框</a>
    </p>
</div>
<div class="box">
    <input id="accSwitch3" type="checkbox" class="acc-switch">
    <h3 class="acc-hd"><label for="accSwitch3">布局</label></h3>
    <p class="acc-bd">
        <a href="##" title="Flex布局">Flex布局</a>
        <a href="##" title="Grid布局" class="_selected">Grid布局</a>
        <a href="##" title="Shapes布局">Shapes布局</a>
        <a href="##" title="Columns布局">Columns布局</a>
    </p>
    <input id="accSwitch4" type="checkbox" checked class="acc-switch">
    <h3 class="acc-hd"><label for="accSwitch4">组件</label></h3>
    <p class="acc-bd">
        <a href="##" title="按钮">按钮</a>
        <a href="##" title="输入框">输入框</a>
        <a href="##" title="下拉列表">下拉列表</a>
        <a href="##" title="单复选框">单复选框</a>
    </p>
</div>

Despair-lj commented 5 years ago

demo

<div class="main">
  <div class="aside">
    <i class="bg"></i>
    <details open>
      <summary><dt>布局</dt></summary>
      <dd><a href="javascript:" role="button">Flex布局</a></dd>
      <dd><a href="javascript:" role="button">Grid布局</a></dd>
      <dd><a href="javascript:" role="button">Shapes布局</a></dd>
      <dd><a href="javascript:" role="button">Columns布局</a></dd>
    </details>
    <details open>
      <summary><dt>组件</dt></summary>
      <dd><a href="javascript:" role="button">按钮</a></dd>
      <dd><a href="javascript:" role="button">输入框</a></dd>
      <dd><a href="javascript:" role="button">下拉列表</a></dd>
      <dd><a href="javascript:" role="button">单选框</a></dd>
    </details>
  </div>
</div>

body {
  margin: 0;
  font-size: 16px;
}
/* 隐藏默认三角 */
::-webkit-details-marker {
  display: none;
}
::-moz-list-bullet {
  font-size: 0;
  float: left;
}
.main {
  overflow: hidden;
  font-size: 16px;
  margin-left: 10px;
}
.aside {
  float: left;
  width: 198px;
  padding-bottom: 3999em;
  margin-bottom: -3991em;
  background-color: #fff;
  border-right: 1px solid;
  border-left: 1px solid;
  border-color: lightgray;
}
.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  margin-right: -1px;
  width: 198px;
  border-right: 1px solid;
  border-left: 1px solid;
  border-color: lightgray;
  background-color: #fff;
}

details {
  position: relative;
}
summary {
  user-select: none;
  outline: 0;
}
dt::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 6px;
  right: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23000000' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E %3C/svg%3E")
    no-repeat;
  background-size: 100% 100%;
  transition: transform 0.2s;
}
[open] dt::after {
  transform: rotate(180deg);
}
dd,
dt {
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}
dt {
  position: relative;
  font-weight: bold;
  padding-left: 0.7em;
}
dd {
  margin-left: 0px;
  font-size: 14px;
  color: #666;
}

a {
  padding-left: 2em;
  display: block;
  text-decoration: none;
  color: inherit;
  outline: 0;
}

dd:hover,
a:focus,
summary:focus {
  background-color: #edf9ff;
  color: #4cbaef;
}

livetune commented 5 years ago

DEMO

<section>
    <aside class="fold-wrapper">
        <input class="fold-title-hidden" type="checkbox" name="" id="title1">
        <label class="fold-title" for="title1">布局</label>
        <div class="fold-body">
            <a role="button"><input type="radio" name="fold-item"><label>Flex布局</label> </a>
            <a role="button"><input type="radio" name="fold-item"><label>Grid布局</label> </a>
            <a role="button"><input type="radio" name="fold-item"><label>Shapes布局</label></a>
            <a role="button"><input type="radio" name="fold-item"><label>Columns布局</label></a>
        </div>
    </aside>
    <aside class="fold-wrapper">
        <input class="fold-title-hidden" type="checkbox" name="" id="title2">
        <label class="fold-title" for="title2">组件</label>
        <div class="fold-body">
            <a role="button"><input type="radio" name="fold-item"><label>按钮</label> </a>
            <a role="button"><input type="radio" name="fold-item"><label>输入框</label> </a>
            <a role="button"><input type="radio" name="fold-item"><label>下拉列表</label></a>
            <a role="button"><input type="radio" name="fold-item"><label>单复选框</label></a>
        </div>
    </aside>

</section>

.fold-wrapper {
    width: 150px;
    margin-bottom: 10px;
}

.fold-title {
    display: flex;
    align-items: center;
    font-weight: bold;
}

.fold-title::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-left: 2px solid #000;
    border-top: 2px solid #000;
    transform: rotateZ(45deg);
    transition: all .2s linear;

}

.fold-title-hidden {
    display: none;
    /* position: absolute; */
}

.fold-title-hidden:checked+label::after {
    color: red;
    transform: rotateZ(225deg);
}

.fold-title-hidden:checked~.fold-body {
    display: none
}

.fold-body {
    padding-left: 1.5em;
}

.fold-body a {
    position: relative;
    display: block;
    margin: 10px 0;
}

.fold-body a:hover {
    color: #03a9f4;
}

.fold-body a:active {
    color: #03a9f4;
}

.fold-body input {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.fold-body input:checked+label {
    color:#03a9f4;
}

GitHdu commented 5 years ago

demo

<div class="menu-wrap">
  <ul class="menu-item">
    <input type="checkbox" id="check1">
    <label class="menu-item-label" for="check1">布局</label>
    <div class="menu-item-list">
      <a class="menu-item-nav">Flex 布局</a>
      <a class="menu-item-nav">Grid 布局</a>
      <a class="menu-item-nav">Shapes 布局</a>
      <a class="menu-item-nav">Flex 布局</a>
      <a class="menu-item-nav">Flex 布局</a>
    </div>
  </ul>
  <ul class="menu-item">
    <input type="checkbox" id="check2">
    <label class="menu-item-label" for="check2">组件</label>
    <div class="menu-item-list">
      <a class="menu-item-nav">按钮</a>
      <a class="menu-item-nav">输入框</a>
      <a class="menu-item-nav">下拉列表</a>
      <a class="menu-item-nav">单选框</a>
    </div>
  </ul>
</div>

ul {
  padding: 0;
  margin: 0;
}
.menu-wrap {
  width: 180px;
  background: #ccc;
}
.menu-item {
  padding-left: 20px;
  position: relative;
  border-bottom: 1px solid #fff;
}
.menu-item-label {
  display: inline-block;
  width: 100%;
  position: relative;
  line-height: 40px;
  cursor: pointer;
}
.menu-item-label::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: 3px;
  width: 6px;
  height: 6px;
  border: 2px solid;
  border-width: 2px 2px 0 0;
  transform: translateY(-10px) rotate(135deg);
  transition: 0.3s;
}
input[type="checkbox"] {
  display: none;
}
.menu-item-list {
  max-height: 0;
  overflow: hidden;
  padding: 0 14px;
  transition: all 0.3s;
}
.menu-item-nav {
  display: inline-block;
  line-height: 40px;
  padding: 0 20px;
  width: 100%;
  margin-left: -30px;
}
.menu-item-nav:hover {
  background: #666;
  color: #fff;
  cursor: pointer;
}
input[type="checkbox"]:checked ~ .menu-item-list {
  max-height: 666px;
}
input[type="checkbox"]:checked ~ .menu-item-label::after {
  transform: translateY(-8px) rotate(-45deg);
}

Tenwq commented 5 years ago

Demo

<ul class="menu-list">
    <li class="menu-item">
        <input type="checkbox" id="menu1" class="menu-checkbox" checked />
        <label class="menu-title" for="menu1">布局<i class="arrow"></i></label>
        <div class="sub-menu-list">
            <a href="#" class="menu-link">Flex布局</a>
            <a href="#" class="menu-link">Grid布局</a>
            <a href="#" class="menu-link">Shapes布局</a>
            <a href="#" class="menu-link">Columns布局</a>
        </div>
    </li>
    <li class="menu-item">
        <input type="checkbox" id="menu2" class="menu-checkbox" checked />
        <label class="menu-title" for="menu2">组件<i class="arrow"></i></label>
        <div class="sub-menu-list">
            <a href="#" class="menu-link">按钮</a>
            <a href="#" class="menu-link">输入框</a>
            <a href="#" class="menu-link">下拉框</a>
            <a href="#" class="menu-link">单复选框</a>
        </div>
    </li>
</ul>

.menu-list{
    width: 180px;
    height: 408px;
    margin: 0 auto;
    padding: 4px 0;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    list-style: none;
    padding-left: 0;
}
.menu-link,
.menu-title{
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    text-decoration: none;
}
.menu-title{
    position: relative;
    padding: 0 10px;
    color: #333;
    cursor: pointer;
}
.menu-title .arrow{
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -3px;
    border-color: #333 transparent transparent transparent;
}
.menu-title .arrow:before{
    content:"";
    position: absolute;
    left: -6px;
    border-color: #fff transparent transparent transparent;
    bottom: 2px;
}
.menu-title .arrow,
.menu-title .arrow:before{
    width: 0;
    height: 0;
    border-width: 6px 6px 0 6px;
    border-style: solid;
}
.menu-title:hover{
    background-color: rgb(241, 250, 255);
}
.menu-link{
    padding-left: 30px;
    color: #666;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.menu-link:hover{
    background-color: rgb(237, 249, 255);
    color: rgb(65, 181, 236);
}
.menu-checkbox{
    display: none;
}
.menu-checkbox:checked + .menu-title .arrow,
.menu-checkbox:checked + .menu-title .arrow:before{
    border-width: 0 6px 6px 6px;
}
.menu-checkbox:checked + .menu-title .arrow{
    border-color: transparent transparent #333 transparent;
}
.menu-checkbox:checked + .menu-title .arrow:before{
    bottom: auto;
    top: 2px;
    border-color: transparent transparent #fff transparent;
}
.sub-menu-list{
    display: none;
}
.menu-checkbox:checked ~ .sub-menu-list{
    display: block;
}

NeilChen4698 commented 5 years ago

Demo https://codepen.io/crazyboy/pen/zgRgQX

<ul class="nav-list">
    <li>
        <input type="checkbox" class="group-check" id="group-check-1"/>
        <label for="group-check-1" class="group-title">布局</label>
        <ul class="item-list">
            <li>Flex布局</li>
            <li>Grid布局</li>
            <li>Shapes布局</li>
            <li>Columns布局</li>
        </ul>
    </li>
    <li>
        <input type="checkbox" class="group-check" id="group-check-2"/>
        <label for="group-check-2" class="group-title">组件</label>
        <ul class="item-list">
            <li>按钮</li>
            <li>输入框</li>
            <li>下来列表</li>
            <li>单复选框</li>
        </ul>
    </li>
</ul>

.nav-list {
    position: fixed;
    padding: 0;
    border-style: solid;
    border-color: #ebedee;
    border-width: 0 1px;
}
.nav-list ul {
    padding: 0;
}
.nav-list li {
    list-style: none;
}
.item-list {
    transition: max-height 1s ease;
    overflow: hidden;
    max-height: 0;
}
.item-list li, .group-title {
    cursor: pointer;
}
.item-list li:hover, .group-title:hover {
    background-color: #edf9ff;
    color: #62c4f2;
}
.item-list li {
    padding: 0.7em 1.5em;
    color: #64676f;
}
.group-check {
    display: none;
}
.group-title {
    display: block;
    padding: 0.7em 0.5em;
    color: #62656d;
    font-weight: bolder;
}
.group-title::after {
    content: '';
    border-width: 0.15em;
    padding: 0.15em; 
    border-style: solid;
    float: right;
    border-color: #62656d #62656d transparent transparent;
    transform: rotate(135deg);
    margin-top: 0.15em;
    transition: transform 1s ease, margin 1s ease;
}
.group-check:checked + .group-title::after {
    transform: rotate(-45deg);
    margin-top: 0.65em;
}
.group-check:checked + .group-title + .item-list {
    max-height: 1000px;
}

guqianfeng commented 5 years ago

demo

<div class="vertical-nav">
    <details class="ui-menu" open>
        <summary class="ui-title">布局</summary>
        <ul class="ui-list">
            <li>Flex布局</li>
            <li>Grid布局</li>
            <li>Shapes布局</li>
            <li>Columns布局</li>
        </ul>
    </details>
    <details class="ui-menu">
        <summary class="ui-title">组件</summary>
        <ul class="ui-list">
            <li>按钮</li>
            <li>输入框</li>
            <li>下拉列表</li>
            <li>单复选框</li>
        </ul>
    </details>
</div>

        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        .vertical-nav {
            width: 200px;
            padding: 0 15px;
            margin: 100px auto;
            border-width: 0 1px 0 1px;
            border-style: solid;
            border-color: #ccc;
        }

        details.ui-menu {
            padding: 5px 0;
            user-select: none;
        }

        summary.ui-title {
            outline: none;
            position: relative;
        }

        ul.ui-list > li {
            padding: 12px 20px;
            cursor: pointer;
            transition: .2s;
        }

        ul.ui-list > li:hover {
            background: #edf9ff;
            color: #33b2ee;
        }

        summary::-webkit-details-marker {
            display: none;
        }

        summary:after {
            position: absolute;
            content: "";
            width: 8px;
            height: 8px;
            top: 5px;
            right: 30px;
            border-width: 2px 2px 0 0;
            border-style: solid;
            border-color: #000;
            transform: rotate(135deg);
            transition: .2s;
            cursor: pointer;
        }

        details.ui-menu[open] > summary.ui-title:after {
            transform: rotate(-45deg);
        }

juzhiqiang commented 5 years ago

demo展示 html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <div class="menu">
      <div class="menu-group">
        <input type="checkbox" class="select-btn">
        <div class="menu-title">布局</div>
        <ul class="menu-list">
          <li class="cur">Flex 布局</li>
          <li>Grid 布局</li>
          <li>Shapes 布局</li>
          <li>Flex 布局</li>
        </ul>
      </div>
      <div class="menu-group">
         <input type="checkbox" class="select-btn">
         <div class="menu-title">组件</div>
         <ul class="menu-list">
          <li>按钮</li>
          <li>输入框</li>
          <li>下拉列表</li>
          <li>单选复选</li>
        </ul>
      </div>
    </div>
</body>
</html>

css

ul{
  list-style:none;
   padding:0;
    margin:0;
}

.menu{
  color:#434343;
  background:#fff;
  font-size:14px;
  border: solid #ccc;
  border-width: 0 1px;
  line-height:40px;
  margin:0;
  width:200px;

}

.menu-group{
    position:relative;
}

.select-btn{
  width:100%;
  margin:0;
  height:40px;
  position:absolute;
  opacity:0;
}

.select-btn:checked ~ .menu-list{
  display:none;
}

.menu-title{
  padding:0 10px;
}

.menu-title:after{
  content:"∧";
  float:right;
  font-weight:bold;
  font-size:16px;
}

.select-btn:checked + .menu-title:after{
  content:"∨";
}

.menu-list li{
  padding: 0 30px;
  cursor:pointer;
}

.menu .cur,.menu li:hover{
  color:#32b2ed;
  background:#edf9ff;
}

les-lee commented 5 years ago

demo

想到两种方法, 一种input加label 一种就是details了.

liyongleihf2006 commented 5 years ago

我是参考了张老师的这篇文章来实现的借助HTML5 details,summary无JS实现各种交互效果

这道题中我将a标签的href去掉了,因为a是锚点的话我这里有两个问题:

点击的时候总是自动的跳到页面的顶部
点击的时候单选框按钮不能被选中

我本来打算将dl标签放到details标签中去的,可惜收起的动画效果不能实现,老师将dl放的跟detail标签同级是有意义的

jsbin

这是借助张老师的css代码

/* 隐藏默认三角 */
::-webkit-details-marker {
    display: none;
}

::-moz-list-bullet {
    font-size: 0;
}

summary {
    user-select: none;
    outline: 0;
}

summary::after {
    content: '';
    width: 12px;
    height: 12px;
    transition: transform .2s;
    background-size: 100%;
    background-repeat: no-repeat;

}

/* 动画效果 */
details+dl {
    max-height: 0;
    transition: max-height .25s;
    margin: 0 0 1rem;
    overflow: hidden;
}

[open]+dl {
    /* 原值是100,我改成了200 */
    max-height: 200px;
}

该题目中我自己的具体实现

.sidebar {
    width: 200px;
}

.sidebar summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000;
    font-weight: bold;
}

.sidebar summary::after {
    /* 我改成了svg直接内联 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' class='icon' viewBox='0 0 1024 1024' version='1.1' width='128' height='128'%3E%3Cdefs%3E%3Cstyle type='text/css'/%3E%3C/defs%3E%3Cpath d='M472.064 272.448l-399.232 399.232c-22.08 22.08-22.08 57.792 0 79.872 22.016 22.016 57.792 22.08 79.872 0L512 392.256l359.296 359.296c22.016 22.016 57.792 22.08 79.872 0 22.08-22.08 22.016-57.792 0-79.872L551.936 272.448C529.856 250.432 494.144 250.432 472.064 272.448z' /%3E%3C/svg%3E");
    transform: rotate(180deg);
}

.sidebar [open] summary::after {
    transform: rotate(0deg);
}

.sidebar dd {
    margin-left: 0;
}
.sidebar dd label{
    display:block;
}
.sidebar dd a {
    display:block;
    padding:10px 0 10px 32px;
    color: #333;
    text-decoration: none;
}

/* 使用radio作为选中激活的办法 */
.sidebar [name=sidebar-radio] {
    /*键盘上下左右这种写法没办法高亮*/
    /* visibility: hidden; */
    clip-path: circle(0);
    position: absolute;
}

.sidebar [name=sidebar-radio]:checked+a {
    background: #edf9ff;
    color: #36b3ee;
}

html

<div class="sidebar">
    <details open>
        <summary>布局</summary>
    </details>
    <dl>
        <dd>
            <label>
                <input type="radio" name="sidebar-radio" checked autofocus />
                <a>Flex布局</a>
            </label>
        </dd>
        <dd>
            <label>
                <input type="radio" name="sidebar-radio" />
                <a>Grid布局</a>
            </label>
        </dd>
        <dd>
            <label>
                <input type="radio" name="sidebar-radio" />
                <a>Shapes布局</a>
            </label>
        </dd>
        <dd>
            <label>
                <input type="radio" name="sidebar-radio" />
                <a>Columns布局</a>
            </label>
        </dd>
    </dl>
    <details open>
        <summary>组件</summary>
    </details>
    <dl>
        <dd>
            <label>
                <input type="radio" name="sidebar-radio" />
                <a>按钮</a>
            </label>
        </dd>
        <dd>
            <label>
                <input type="radio" name="sidebar-radio" />
                <a>输入框</a>
            </label>
        </dd>
        <dd>
            <label>
                <input type="radio" name="sidebar-radio" />
                <a>下拉列表</a>
            </label>
        </dd>
        <dd>
            <label>
                <input type="radio" name="sidebar-radio" />
                <a>单复选框</a>
            </label>
        </dd>
    </dl>
</div>

JaimeCheng commented 5 years ago

> demo <

* { padding: 0; margin: 0; }
ul,li { list-style: none; }
.menu-list { width: 160px; height: 90vh; border: 1px solid #ccc; border-top: none; border-bottom: none; padding: 20px 0; }
.menu-sub { display: none;  transition: .2s;}
.menu-item-icon { display: inline-block; transform: rotate(90deg); transition: .2s; }
.menu-item { display: flex; justify-content: space-between; padding: 0 10px; line-height: 40px; }
.menu-group input { position: absolute; display: block; width: 100%; height: 40px; top: 0; opacity: 0; z-index: 0;}
.menu-group {position: relative; }
.menu-group input:checked+.menu-item .menu-item-icon{ transform: rotate(270deg); }
.menu-group input:checked+.menu-item+.menu-sub { display: block; }
.menu-sub-item {line-height: 40px; padding-left: 30px; font-size: 14px; cursor:default; }
.menu-sub-item:hover { background: #EDF9FF; color: #33b2ee; }

<div class="menu-list">
  <div class="menu-group">
    <input type="checkbox">
    <div class="menu-item">
      <b>布局</b>
      <span class="menu-item-icon">></span>
    </div>
    <ul class="menu-sub">
      <li class="menu-sub-item">Flex布局</li>
      <li class="menu-sub-item">Grid布局</li>
      <li class="menu-sub-item">Shapes布局</li>
      <li class="menu-sub-item">Columns布局</li>
    </ul>
  </div>
  <div class="menu-group">
    <input type="checkbox">
    <div class="menu-item">
      <b>组件</b>
      <span class="menu-item-icon">></span>
    </div>
    <ul class="menu-sub">
      <li class="menu-sub-item">按钮</li>
      <li class="menu-sub-item">输入框</li>
      <li class="menu-sub-item">下拉列表</li>
      <li class="menu-sub-item">单复选框</li>
    </ul>
  </div>
</div>

ZhangXDong commented 5 years ago

demo

<div class="aside">
    <details open class="menu">
        <summary class="menu-summary">布局</summary>
        <ul class="menu-ul">
            <li class="menu-li"><a href="javascript:;">Flex布局</a></li>
            <li class="menu-li"><a href="javascript:;">Grid布局</a></li>
            <li class="menu-li"><a href="javascript:;">Shapes布局</a></li>
            <li class="menu-li"><a href="javascript:;">Columns布局</a></li>
        </ul>
    </details>
    <details class="menu">
        <summary class="menu-summary">组件</summary>
        <ul class="menu-ul">
            <li class="menu-li"><a href="javascript:;">按钮</a></li>
            <li class="menu-li"><a href="javascript:;">输入框</a></li>
            <li class="menu-li"><a href="javascript:;">下拉列表</a></li>
            <li class="menu-li"><a href="javascript:;">单复选框</a></li>
        </ul>
    </details>
</div>

/* reset */
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    color: #888a90;
    text-decoration: none;
}
/* 去掉默认箭头样式 */
::-webkit-details-marker {
    display: none;
}
::-moz-list-bullet {
    font-size: 0;
    float: flex;
}
/* 主要样式 */
.aside {
    width: 200px;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}
.menu {
    cursor: pointer;
}
.menu-summary {
    position: relative;
    padding: 0 10px;
    line-height: 40px;
    font-weight: 900;
    user-select: none;
    outline: none;
}
.menu-summary::after {
    content: '';
    position: absolute; right: 10px; top: 50%;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    border: 2px solid;
    border-width: 2px 2px 0 0;
    transform: rotate(135deg);
    transition: all .2s;
}
.menu[open] .menu-summary::after {
    transform: rotate(-45deg);
}
.menu-li {
    padding-left: 40px;
    line-height: 30px;
}
.menu-li:hover {
    color: #5dc2f1;
    background: #edf9ff;
}
.menu-li:hover a {
    color: #5dc2f1;
}

asyncguo commented 5 years ago

demo

<div class="menu-list">
   <details open> 
    <summary>布局</summary> 
    <dl>
      <dd>Flex布局</dd>
      <dd>Grid布局</dd>
      <dd>Shapes布局</dd>
      <dd>Columns布局</dd>
    </dl>
  </details>
  <details> 
    <summary>组件</summary> 
    <dl>
      <dd>按钮</dd>
      <dd>输入框</dd>
      <dd>下拉列表</dd>
      <dd>单复选框</dd>
    </dl>
  </details>
</div>

.menu-list {
  width: 150px;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
details {
  width: 100%;
  font-size: 14px;
}
details > summary {
  position: relative;
  padding: 0 10px;
  line-height: 40px;
  outline: 0;
  font-weight: 500;
  color: #333;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 清除summary默认样式(除了chrome浏览器，其他浏览器(Firefox也支持)可以通过list-style进行清除默认样式) */
  list-style: none;
}
/* Chrome清除summary默认样式 */
details > summary::-webkit-details-marker {
  display: none;
}
details > summary::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 2px solid #666;
  border-left: none;
  border-top: none;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .2s;
}
details[open] > summary::after {
  transform: translateY(-50%) rotate(-135deg);
}
details dl {
  margin: 0;
  max-height: 0;
  transition: max-height .25s;
  overflow: hidden;
}
details[open] dl {
  max-height: 200px;
}
details dd {
  margin-left: 0;
  padding-left: 2em;
  line-height: 40px;
  cursor: pointer;
  color: #666;
}
details dd:hover {
  background-color: #eff9fe;
  color: #33b2ee;
}

WGHwebitem commented 5 years ago

Demo: https://codepen.io/wghwebitem/pen/rXdgrX

* {
                font-family: "微软雅黑";
            }

            ul {
                padding: 0;
                margin: 0;
                list-style: none;
                display: none;
                position: relative;
                top: 5px;
            }

            ul li {
                width: 100%;
                height: 35px;
                line-height: 35px;
                margin: 0 auto;
            }

            ul li div {
                width: 90%;
                height: 35px;
                text-decoration: none;
                display: block;
                color: #666;
                padding-left: 10%;
                cursor: pointer;
            }

            input {
                display: none;
            }

            .znav {
                width: 200px;
                border-left: 1px solid #ccc;
                border-right: 1px solid #ccc;
                background: #fafafa;
            }

            .znav .znav-div {
                position: relative;
                padding-top: 10px;
                padding-bottom: 10px;
            }

            .znav-div-tle {
                padding-left: 8px;
                cursor: pointer;
            }

            .znav-icon {
                position: absolute;
                top: 8px;
                right: 10px;
                width: 10px;
                height: 10px;
                border: solid #666;
                border-width: 2px 2px 0 0;
                display: block;
                transform: rotate(135deg);
                -webkit-transform: rotate(135deg);
                cursor: pointer;
            }

            .checks:checked~ul {
                display: block;
            }

            .checks:checked+.znav-icon {
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
                margin-top: 10px;
                color: red;
            }

            .tradio:checked+div {
                background: #bdeffc;
                color: deepskyblue;
            }
**html**
<div class="znav">
            <div class="znav-div">
                <label for="ipt1">
                    <input type="checkbox" class="checks" id="ipt1" checked/>
                    <span class="znav-icon"></span>
                    <div class="znav-div-tle">布局</div>
                    <ul>
                        <label for="rad1"><li><input type="radio" class="tradio" id="rad1" name="r"><div>Flex布局</div></li></label>
                        <label for="rad2"><li><input type="radio" class="tradio" id="rad2" name="r"><div>Grid布局</div></li></label>
                        <label for="rad3"><li><input type="radio" class="tradio" id="rad3" name="r"><div>Shapes布局</div></li></label>
                        <label for="rad4"><li><input type="radio" class="tradio" id="rad4" name="r"><div>Columns布局</div></li></label>
                     </ul>
                </label>
            </div>
            <div class="znav-div">
                <label for="ipt2">
                    <input type="checkbox" class="checks" id="ipt2"/>
                    <span class="znav-icon"></span>
                    <div class="znav-div-tle">组件</div>
                    <ul>
                        <label for="rad5"><li><input type="radio" class="tradio" id="rad5" name="r"><div>按钮</div></li></label>
                        <label for="rad6"><li><input type="radio" class="tradio" id="rad6" name="r"><div>输入框</div></li></label>
                        <label for="rad7"><li><input type="radio" class="tradio" id="rad7" name="r"><div>下拉列表</div></li></label>
                        <label for="rad8"><li><input type="radio" class="tradio" id="rad8" name="r"><div>单选选框</div></li></label>
                    </ul>
                </label>
            </div>
        </div>

zengqingxiao commented 5 years ago

demo 解析

将details中的隐藏元素去除，并将其写出来的原因是，如果写进去那么隐藏部分的height初始是auto，没办法从0开始所以不可以形成过渡动画，所以再将移除部分根据open属性值来给高度，因此就可以有过渡动画效果除了details这样的写法还有就算只要是有点击标签元素，标签元素会添加特定属性的就可以了例如input[type='checkbox']，当我们点击input的时候会自动添加checkbox的属性，但是从语言上来说还是details会好一点 CSS

<style>
    .container {
      width: 180px;
      min-height: 600px;
      border-left: 1px solid #999;
      border-right: 1px solid #999;
    }

    .details-box {
      margin: 10px;
      /* max-height: 20px;
      overflow: hidden;
      transition: all 1s; */
    }

    .details-box summary {
      position: relative;
      font-weight: bold;
      cursor: pointer;
      /* 阻止选中 */
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      outline: 0;
    }

    .details-box summary a {
      color: inherit;
      text-decoration: none;
    }

    .details-box summary::after {
      content: '';
      position: absolute;
      width: 1em;
      height: 1em;
      top: .2em;
      right: 5px;
      background: url('https://www.zhangxinxu.com/study/201801/arrow-on.svg') no-repeat;
      background-size: 100% 100%;
      transform: rotate(180deg);
      transition: transform .2s;
    }

    .details-box:not([open]) summary::after {
      margin-top: .25em;
      transform: rotate(0deg);
    }

    /* 隐藏默认三角 */
    .details-box ::-webkit-details-marker {
      display: none;
    }

    .details-box ::-moz-list-bullet {
      font-size: 0;
    }

    .details-box+ul li {
      line-height: 2;
      color: #999999;
    }

    details+ul {
      margin: 0 0 0 10px;
      padding: 0 0 0 1em;
      max-height: 0;
      transition: max-height 1s;
      overflow: hidden;
      list-style-type: none;
    }

    details[open]+ul {
      max-height: 200px;
    }
  </style>

HTML

<div class="container">
    <details class="details-box layout">
      <!-- 解决outline交互体验 -->
      <summary   tabindex="-1"><a href="javascript:" onClick="this.parentNode.click();">布局</a></summary>
      <!-- <ul>
        <li>Flex布局</li>
        <li>Grid布局</li>
        <li>Shapes布局</li>
        <li>Columns布局</li>
      </ul> -->
    </details>
    <ul>
      <li>Flex布局</li>
      <li>Grid布局</li>
      <li>Shapes布局</li>
      <li>Columns布局</li>
    </ul>
    <details class="details-box component">
      <!-- 解决outline交互体验 -->
      <summary   tabindex="-1"><a href="javascript:" onClick="this.parentNode.click();">组件</a></summary>
      <!-- <ul>
        <li>按钮</li>
        <li>输入框</li>
        <li>下拉列表</li>
        <li>单复选框</li>
      </ul> -->
    </details>
    <ul>
      <li>按钮</li>
      <li>输入框</li>
      <li>下拉列表</li>
      <li>单复选框</li>
    </ul>
  </div>

fzpijl commented 5 years ago

这题不会！

Seasonley commented 5 years ago

demo

<!--  过度无障碍设置，优先使用语义化标签 -->
<ul class="mtree-wrapper" role="tree" aria-label="菜单"> 
 <li role="none"> 
  <details role="none" > 
   <summary class="mtree-title" role="treeitem" aria-level="1" aria-setsize="2" aria-posinset="1">布局</summary> 
   <ul class="mtree-group" role="group"> 
    <li> <a class="mtree-item" role="treeitem" aria-level="2" aria-setsize="5" aria-posinset="1" href="#flex" id="flex">Flex布局</a> </li> 
    <li> <a class="mtree-item" role="treeitem" aria-level="2" aria-setsize="5" aria-posinset="2" href="#grid" id="grid">Grid布局</a> </li> 
    <li> <a class="mtree-item" role="treeitem" aria-level="2" aria-setsize="5" aria-posinset="3" href="#shapes" id="shapes">Shapes布局</a> </li> 
    <li> <a class="mtree-item" role="treeitem" aria-level="2" aria-setsize="5" aria-posinset="4" href="#columns" id="columns">Columns布局</a> </li> 
    <li class="mtree-item" role="treeitem" aria-level="2" aria-setsize="5" aria-posinset="5" >
     <details role="none" > 
     <summary class="mtree-title" role="treeitem" aria-level="1" aria-setsize="1" aria-posinset="1">其他布局</summary> 
     <ul class="mtree-group" role="group"> 
      <li> <a class="mtree-item" role="treeitem" aria-level="2" aria-setsize="2" aria-posinset="1" href="#table" id="table">table布局</a> </li> 
      <li > <a class="mtree-item" role="treeitem" aria-level="2" aria-setsize="2" aria-posinset="2" href="#float" id="float">float布局</a> </li> 
     </ul> 
     </details>
    </li>
   </ul> 
  </details>
 </li> 
 <li role="none">
  <details role="none" > 
   <summary class="mtree-title" role="treeitem" aria-level="1" aria-setsize="2" aria-posinset="2">组件</summary> 
    <ul class="mtree-group" role="group"> 
     <li> <a class="mtree-item" role="treeitem" aria-level="2" aria-setsize="4" aria-posinset="1" href="#button" id="button">按钮</a> </li> 
     <li> <a class="mtree-item" role="treeitem" aria-level="2" aria-setsize="4" aria-posinset="2" href="#input" id="input">输入框</a> </li> 
     <li> <a class="mtree-item" role="treeitem" aria-level="2" aria-setsize="4" aria-posinset="3" href="#dropdown" id="dropdown">下拉列表</a> </li> 
     <li > <a class="mtree-item" role="treeitem" aria-level="2" aria-setsize="4" aria-posinset="4" href="#checkradio" id="checkradio">单复选框</a> </li> 
    </ul> 
  </details>
 </li> 
</ul>

.mtree-wrapper{
  border:1px solid lightgray;
  margin:0;
  padding:0;
  font-family:sans-serif;
}
.mtree-wrapper ::-webkit-details-marker {
    display: none;
}
.mtree-wrapper ::-moz-list-bullet {
    font-size: 0;
}
.mtree-wrapper ul,.mtree-wrapper li{
  list-style:none;
}
.mtree-group{
  padding-left:0;
}
.mtree-title{
  font-weight:bold;
  color:#333;
  line-height:3rem;
  height:3rem;
  text-indent:.5rem;
  cursor:pointer;
}
.mtree-title:hover{
  background:rgba(0,0,0,0.02);
}
.mtree-title::after{
  content:"";
  display:block;
  width:3rem;
  height:3rem;
  float:right;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M19.293 7.293l1.414 1.414L12 17.414 3.293 8.707l1.414-1.414L12 14.586z'/%3E%3C/svg%3E");
  background-size:1rem;
  background-position:center;
  background-repeat:no-repeat;
}
.mtree-item{
  line-height:3rem;
  display:block;
}
.mtree-wrapper [open] .mtree-title::after{
  transform:rotate(180deg);
}
.mtree-item:hover{
  background:rgba(0,0,0,0.02);
}
.mtree-item{
  padding-left:1.5rem;
  text-decoration:none;
  color:#333;
} 
.mtree-item:target{
    background: #edf9ff;
    color: #33b2ee;
}

zy017 commented 5 years ago

demo

<ul class="menu-box">
  <li>
    <input class="menu-checkbox" type="checkbox" checked id="menu-1" />
    <label class="menu-header" for="menu-1"><span>布局</span><i class="icon-arrow"></i></label>
    <ul class="menu-item">
      <li role="button">Flex布局</li>
      <li role="button">Grid布局</li>
      <li role="button">Shapes布局</li>
      <li role="button">Columns布局</li>
    </ul>
  </li>
  <li>
    <input class="menu-checkbox" type="checkbox" checked id="menu-2" />
    <label class="menu-header" for="menu-2"><span>组件</span><i class="icon-arrow"></i></label>
    <ul class="menu-item">
      <li role="button">按钮</li>
      <li role="button">输入框</li>
      <li role="button">下拉菜单</li>
      <li role="button">单复选框</li>
    </ul>
  </li>
</ul>

body {
  font-size: 16px;
}
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-box {
  width: 155px;
  margin-left: 32px;
  border: 1px solid #ccc;
}
.menu-header {
  font-size: 16px;
  height: 36px;
  line-height: 36px;
  text-indent: 8px;
  position: relative;
  display: flex;
  font-weight: bold;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.menu-checkbox {
  position: absolute;
  width: 0;
}
.menu-item {
  display: none;
}
.menu-item li {
  text-indent: 25px;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
}
.menu-checkbox:checked ~ .menu-item {
  display: block;
}
.menu-checkbox:checked ~ .menu-header .icon-arrow {
  transform: rotate(45deg);
}
.menu-item li:hover,
.menu-item li:focus {
  background: #edf9ff;
  color: #6ec9f2;
}
.icon-arrow {
  width: 6px;
  height: 6px;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  transform: rotate(225deg);
  margin: 0 20px;
  transition: all 0.5s;
}

ghost commented 5 years ago

demo

html 代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <nav>
    <section>
      <input id='id-input-layout' class='toggle' type='checkbox' hidden>
      <label for='id-input-layout'>布局</label>
      <ol>
        <li>Flex布局</li>
        <li>Grid布局</li>
        <li>Shapes布局</li>
        <li>Columns布局</li>
      </ol>
    </section>

    <section>
      <input id='id-input-component' class='toggle' type='checkbox' hidden>
      <label for='id-input-component'>组件</label>
      <ol>
        <li>按钮</li>
        <li>输入框</li>
        <li>下拉列表</li>
        <li>单复选框</li>
      </ol>
    </section>
  </nav>
</body>
</html>

css 代码

* {
  padding: 0px;
  margin: 0px;
}

nav {
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  display: inline-block;
}

label {
  display: flex;
  justify-content: space-between;

  padding: 0px 6px;
  margin: 10px 0px;

  font-weight: bold;
}
label::after {
  content: '∨';

  transform: rotate(0deg);
  transition: transform 0.5s;
}
.toggle:checked ~ label::after {  
  transform: rotate(180deg);
}

ol {
  visibility: hidden;
  max-height: 0px;

  padding: 0px;
  list-style-type: none;

  transition: max-height 0.5s;
}
.toggle:checked ~ ol{
  visibility: visible;
  max-height: 500px;
}

li {
  padding: 10px 24px;
}
li:hover {
  background-color: #edf9ff;
  color: #2fb0ec;
}

EmmaYXY commented 5 years ago

CSS基础测试10

<section class="wrapper">
        <div class="outer">
            <span class="title">布局</span>
            <ul class="inner">
                <li class="item">Flex布局</li>
                <li class="item">Grid布局</li>
                <li class="item">Shapes布局</li>
                <li class="item">Columns布局</li> 
            </ul>
        </div>
        <div class="outer">
            <span class="title">组件</span>
            <ul class="inner">
                <li class="item">按钮</li>
                <li class="item">输入框</li>
                <li class="item">下拉列表</li>
                <li class="item">单复选框</li>  
            </ul>
        </div>
    </section>

        .wrapper {
            width: 200px;
            margin: 0 auto;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
        }
        .inner {
            display: none;
            margin: 0;
            padding: 0;
        }
        .outer:hover .inner {
            display: block;
        }
        .title {
            display: inline-block;
            padding: 10px;
            color: black;
            font-weight: bold;
            cursor: pointer;
        }
        .title::after {
            content: '>';
            display: inline-block;
            transform: rotate(90deg) translateY(-130px);
        }
        .outer:hover .title::after {
            transform: rotate(-90deg) translateY(130px);
        }
        .item {
            padding: 8px 20px;
            list-style: none;
            font-size: 15px;
            cursor: pointer;
        }
        .item:hover {
            background: #edf9ff;
            color: #11a5e9;
        }

lifelikejuly commented 5 years ago

DEMO HTML

<div class="togglebox">
  <!--外层嵌套div，改变menu:checked只影响内部-->
  <div>
    <input id="menu-layout" class="menu" type="checkbox" />
    <label for="menu-layout" class="menu-title">布局</label>
    <div class="menu-layout-item">
      <a>Flex布局</a>
      <a>Grid布局</a>
      <a>Shapes布局</a>
      <a>Columns布局</a>
    </div>
  </div>
  <div>
    <input id="menu-component" class="menu" type="checkbox" />
    <label for="menu-component" class="menu-title">组件</label>
    <div class="menu-layout-item">
      <a>按钮</a>
      <a>输入框</a>
      <a>下拉列表</a>
      <a>单复选框</a>
    </div>
  </div>
</div>

CSS

.togglebox {
  width: 200px;
  margin: 0 auto;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.menu {
  position: absolute;
  opacity: 0;
}

.menu-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 50px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 700;
  border-top: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}
/*::after选择器在元素后面插入内容*/
.menu-title::after {
  content: "";
  width: 6px;
  height: 6px;
  transform: rotate(225deg);
  border-style: solid;
  border-width: 2px 0 0 2px;
  transition: transform 0.3s;
}
/*菜单内容默认高度为0隐藏，通过input的check状态变化修改高度大小做显示*/
.menu-layout-item {
  height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.menu-layout-item a {
  line-height: 40px;
  padding: 0 25px;
  font-size: 14px;
  display: block;
  font-size: 12px;
  color: #666;
  cursor: pointer;
}

a:hover {
  background: #edf9ff;
  color: #33b2ee;
}
/*~选择器 父级以下对应的所有元素 如上述在父级添加div过滤外部相同元素*/
.menu:checked ~ .menu-layout-item {
  height: auto;
  opacity: 1;
}
/*+相邻兄弟选择器 获取相邻元素，两者具有相同父元素*/
.menu:checked + .menu-title::after {
  transform: rotate(45deg);
}

bugaosunihhh commented 5 years ago

demo链接: https://jsbin.com/zutoyaleyu/

<nav class="nav-wrap">
    <ul class="outter-ul">
        <li class="outter-li">
            <input id="outter-input-1" class="outter-input" type="checkbox" hidden />
            <label for="outter-input-1" class="outter-label">布局</label>
            <ul class="inner-ul">
                <li class="inner-li"><a href="javascript:;" class="active">flex布局</a></li>
                <li class="inner-li"><a href="javascript:;">grid布局</a></li>
                <li class="inner-li"><a href="javascript:;">shapes布局</a></li>
                <li class="inner-li"><a href="javascript:;">columns布局</a></li>
            </ul>
        </li>
        <li class="outter-li">
            <input id="outter-input-2" class="outter-input" type="checkbox" hidden />
            <label for="outter-input-2" class="outter-label">组件</label>
            <ul class="inner-ul">
                <li class="inner-li"><a href="javascript:;">按钮</a></li>
                <li class="inner-li"><a href="javascript:;">输入框</a></li>
                <li class="inner-li"><a href="javascript:;">下拉列表</a></li>
                <li class="inner-li"><a href="javascript:;">单复选按钮</a></li>
            </ul>
        </li>
    </ul>
</nav>

body {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.nav-wrap {
    box-sizing: border-box;
    max-width: 200px;
    min-height: 100vh;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
}

.outter-ul {
    .outter-label {
        display: block;
        padding:0 10px;
        line-height: 40px;
        color: #333;
        font-weight: 700;
    }
}

.inner-ul {
    overflow: hidden;
    max-height: 0;
    .inner-li {
        >a {
            display: block;
            padding: 0 20px;
            line-height: 40px;
            color: #888;
        }
        .active{
            color: #39b4ee;
            background-color: #edf9ff
        }
    }
}

input[type="checkbox"]+label {
    position: relative;
    display: block;
    line-height: 40px;
    color: #333;
    font-weight: 700;
    &::after {
        position: absolute;
        right: 10px;
        top: 50%;
        content: '';
        border-top: 1px solid #333;
        border-left: 1px solid #333;
        width: 10px;
        height: 10px;
        transform: translateY(-50%) rotate(45deg);
    }
}

input[type="checkbox"]:checked+label::after {
    // transition: transform 1s ease;
    transform: translateY(-50%) rotate(-135deg);
}

input[type="checkbox"]:checked+label+.inner-ul {
    max-height: 100vh;
    transition: max-height 1s ease;
}

silverWolf818 commented 5 years ago

demo

看到这道题想到了张老师的一篇文章，以前看张老师写过关于纯css交互效果

借助HTML5 details,summary无JS实现各种交互效果

ul, li {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}
summary{
    user-select: none;
    outline: 0;
}
summary a {
    text-decoration: none;
    color: inherit;
}
summary::-webkit-details-marker {
    display: none;
}

summary::-moz-list-bullet {
    font-size: 0;
}

.side-wrap {
    width: 180px;
    height: 500px;
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
}

.side-menu summary {
    position: relative;
    padding: 10px;
    color: #474a54;
}

.side-menu .side-submenu li {
    padding: 10px 30px;
    color: #87898f;
}

.side-menu .side-submenu li:hover {
    cursor: pointer;
    color: #3cb5ee;
    background: #edf9ff;
}

.side-menu summary::after {
    content: '';
    position: absolute;
    margin-top: 5px;
    right: 10px;
    width: 6px;
    height: 6px;
    border: 2px solid;
    border-width: 2px 2px 0 0;
    transform: rotate(135deg);
}

.side-menu[open] summary::after {
    margin-top: 8px;
    transform: rotate(-45deg);
}

<div class="side-wrap">
    <details class="side-menu" open>
        <summary tabindex="-1"><a href="javascript:">布局</a></summary>
        <ul class="side-submenu">
            <li>Flex布局</li>
            <li>Grid布局</li>
            <li>Shapes布局</li>
            <li>Columns布局</li>
        </ul>
    </details>
    <details class="side-menu">
        <summary><a href="javascript:">组件</a></summary>
        <ul class="side-submenu">
            <li>按钮</li>
            <li>输入框</li>
            <li>下拉列表</li>
            <li>单复选框</li>
        </ul>
    </details>
</div>

hewxwshining commented 5 years ago

demo

css:

ul {
    list-style: none;
    padding: 0;
}

.menu-item {
    line-height: 40px;
    font-size: 14px;
    color: #666;
    transition: .3s;
    cursor: pointer;
}

.menu-item a {
    padding: 0 25px;
    color: #666;
    text-decoration: none;
    display: block;
}

.menu-item a:hover {
    background: #edf9ff;
    color: #33b2ee;
}

.menu-checkbox {
    display: none;
}

.menu-title {
    font-weight: bold;
    color: #333;
    position: relative;
    display: block;
}

.menu-title::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: 3px;
    width: 6px;
    height: 6px;
    border: 2px solid;
    border-width: 2px 2px 0 0;
    transform: translateY(-8px) rotate(135deg);
    transition: .3s;
}

.menu-checkbox:checked+.menu-title::after {
    transform: translateY(-8px) rotate(-45deg);
}

.menu-checkbox:checked~.sub-menu {
    display: none;
}

html:

<ul class="ui-menu">
    <li class="menu-item">
        <input type="checkbox" id="menu1" class="menu-checkbox" />
        <label class="menu-title" for="menu1">布局</label>
        <ul class="sub-menu">
            <li class="menu-item"><a href="#">Flex布局</a></li>
            <li class="menu-item"><a href="#">Grid布局</a></li>
            <li class="menu-item"><a href="#">Shapes布局</a></li>
            <li class="menu-item"><a href="#">Columns布局</a></li>
        </ul>
    </li>
    <li class="menu-item">
        <input type="checkbox" id="menu2" class="menu-checkbox" />
        <label class="menu-title" for="menu2">组件</label>
        <ul class="sub-menu">
            <li class="menu-item"><a href="#">按钮</a></li>
            <li class="menu-item"><a href="#">输入框</a></li>
            <li class="menu-item"><a href="#">下拉列表</a></li>
            <li class="menu-item"><a href="#">单复选框</a></li>
        </ul>
    </li>
</ul>

frankyeyq commented 5 years ago

demo

<ul class="menu-container">
    <li>
        <input type="checkbox" id="item1">
        <label for="item1">
            <p class="menu-item-title"><span>布局</span><i class="arrow"></i></p>
        </label>
        <ul class="menu-item-container">
            <li class="menu-item">Flex布局</li>
            <li class="menu-item">Grid布局</li>
            <li class="menu-item">Shapes布局</li>
            <li class="menu-item">Columns布局</li>
        </ul>
    </li>
    <li>
        <input type="checkbox" id="item2">
        <label for="item2">
            <p class="menu-item-title"><span>组件</span><i  class="arrow"></i></p>
        </label>
        <ul class="menu-item-container">
            <li class="menu-item">按钮</li>
            <li class="menu-item">输入框</li>
            <li class="menu-item">下拉列表</li>
            <li class="menu-item">单复选框</li>
        </ul>
    </li>
</ul>

ul, li {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .menu-container {
        border: 1px solid #bababa;
        width: 153px;
    }
    .menu-item-title {
        font-size: 14px;
        font-weight: bold;
        padding: 0 8px;
        display: flex;
        justify-content: space-between;
        align-items: center; 
        cursor: pointer;
    }
    .menu-item-container {
        font-weight: normal;
        display: none;
    }
    .menu-item {
        padding-left: 30px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
    .menu-item:hover {
        background: #edf9ff;
        cursor: pointer;
        color: #4bbbef;
    }
    .arrow {
        width: 4px;
        height: 4px;
        border-width: 2px;
        border-color: black black transparent transparent;
        border-style: solid;
        transform: rotate(-45deg);
        cursor: pointer;
    }
    input[type="checkbox"] {
        visibility: hidden;
        display: block;
        height: 0;
        margin: 0;
    }
    input[type="checkbox"]:checked~.menu-item-container {
        display: block;
    }
    input[type="checkbox"]:checked~.menu-item-title .arrow {
        transform: rotate(135deg);
    }

Forx-Js commented 5 years ago

DEMO 还是使用了点js,就为了切换开关的动效

<ul class="menu">
<li class="menu-item">
<div class="menu-item-label" onclick="openSubMenu(this)">布局</div>
<ul class="menu-sub">
<li class="menu-sub-item" id="flex"><a class="menu-sub-item-label" href="#flex">Flex布局</a></li>
<li class="menu-sub-item" id="grid"><a class="menu-sub-item-label" href="#grid">Grid布局</a></li>
<li class="menu-sub-item" id="shapes"><a class="menu-sub-item-label" href="#shapes">Shapes布局</a></li>
<li class="menu-sub-item" id="columns"><a class="menu-sub-item-label" href="#columns">Columns布局</a></li>
</ul>
</li>
<li class="menu-item">
<div class="menu-item-label" onclick="openSubMenu(this)">组件</div>
<ul class="menu-sub">
<li class="menu-sub-item" id="button"><a class="menu-sub-item-label" href="#button">按钮</a></li>
<li class="menu-sub-item" id="input"><a class="menu-sub-item-label" href="#input">输入框</a></li>
<li class="menu-sub-item" id="select"><a class="menu-sub-item-label" href="#select">下拉列表</a></li>
<li class="menu-sub-item" id="checks"><a class="menu-sub-item-label" href="#checks">单复选框</a></li>
</ul>
</li>
</ul>

使用的css里的target 切换的点击上箭头和下箭头用的是label的两个伪元素,得到了有点奇怪的动效, 其实就是为了实验效果(之前从未写过)


ul {
margin: 0;
list-style: none;
padding: 0;
}

.menu, .menu-item-label::after, .menu-item-label::before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

.menu-sub-item-label:hover, .menu-sub-item-label:focus, .menu-sub-item-label:active, .menu-sub-item:target > .menu-sub-item-label { background: #edf9ff; color: #3cb5ee; outline: none; }

.menu { width: 200px; color: #333; margin: 0 auto 0 0; border: 1px solid #e5e5e5; border-style: none solid; overflow-y: auto; } .menu-item, .menu-sub-item { font-size: 15px; } .menu-item-label, .menu-sub-item-label { cursor: pointer; display: block; padding: 12px 6px 12px; transition: all 0.2s; } .menu-item .menu-sub, .menu-sub-item .menu-sub { overflow-y: hidden; height: 0; transition: all 0.2s; } .menu-item-label { position: relative; padding-left: 12px; font-weight: bold; overflow: hidden; } .menu-item-label::after, .menu-item-label::before { content: ""; width: 1px; height: 0.6em; background-color: currentcolor; transition: all 0.2s; } .menu-item-label::before { margin: auto 16px auto auto; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .menu-item-label::after { margin: auto 10px auto auto; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .menu-item.open .menu-item-label::before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .menu-item.open .menu-item-label::after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .menu-sub-item-label { padding-left: 30px; font-weight: normal; color: #666; text-decoration: none; }

为了更好展示,还是加了一些js 
```js
// 切换子菜单打开还是关闭
const openSubMenu=(dom)=>{
  const {classList}=dom.parentElement,
        className='open',
        {nextElementSibling}=dom;
        hasClass=classList.contains(className),
        h=hasClass?0:nextElementSibling.scrollHeight;
  nextElementSibling.style.height=`${h}px`; // 切换高度,适应css3 过渡效果
  classList.toggle(className); // 切换class
}

8-10 更新

新的Demo 使用radio和checkbox配合css3 :checked 选中效果使用line-height 和 opacity配合过度效果,终于纯css实现了 😭

怕代码太长,影响阅读,直接使用pug

ul.menu
  each item in menus
    li.menu-item
      input.none.menu-check(type="checkbox",checked,name="menu",id=item.name)
      label.menu-item-label(for=item.name)= item.label
      ul.menu-sub
        each subitem in subMenus
          if subitem.pname===item.name
            li.menu-sub-item
              input.none.menu-check(type="radio",id=subitem.name,name="submenu")
              label.menu-sub-item-label(for=subitem.name)= subitem.label

只展示修改部分的scss

.none {
  display: none;
}
.menu-sub-item {
    &-label {
      cursor: pointer;
      display: block;
      font-size: 15px;
      line-height: 3;
      overflow: hidden;
      transition: all $time;
    }
}
// 两个选中效果
.menu-check:checked {
  // 外层选中
  & ~ .menu-sub .menu-sub-item-label {
    line-height: 0;
    opacity: 0;
  }
  & ~ .menu-item-label {
    &::before {
      transform: rotate(45deg);
    }
    &::after {
      transform: rotate(-45deg);
    }
  }
  // 子菜单选中
  & ~ .menu-sub-item-label{
    @extend %hover;
  }
}

效果终于满意了 : )

9lk commented 5 years ago

demo

<div class="droplist">
<!--   menu layout -->
  <div class="menu">
    <input type="radio" id="rdo-layout" name="rdo-menu">
    <label for="rdo-layout">布局</label>
    <dl>
      <dd>Flex布局</dd>
      <dd>Grid布局</dd>
      <dd>Shapes布局</dd>
      <dd>Columns布局</dd>
    </dl>  
  </div>
  <!--  menu component -->
  <div class="menu">
    <input type="radio" id="rdo-component" name="rdo-menu">
    <label for="rdo-component">组件</label>
    <dl>
      <dd>按钮</dd>
      <dd>输入框</dd>
      <dd>下拉列表</dd>
      <dd>单复选框</dd>
    </dl>
  </div>
</div>
<style type="text/css">
:root {
  --main-color: #51545c;
  --second-color: #ececec;
}
.droplist {
  border-style: solid;
  border-color: transparent var(--second-color);
  color: var(--main-color);
  width: 180px;
}
label {
  font: bold 14px/.9 YaHei; 
  display:block;
  padding: 10px;
}
label::after {
  content: '';
  border-style: solid;
  border-color: var(--main-color) var(--main-color) transparent transparent;
  width: .5rem;
  height:.5rem;
  float: right;
  transform: translateY(.3rem) rotate(-45deg);
  transition: transform .3s ease-out;
}
dl {
  line-height: 2.5;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-out;
}
dd {
  margin: 0;
  padding: 0 10px;
  text-indent: 2rem;
}
dd:hover {
  color: #44b8ef;
  background: #edf9ff;
}
input[type=radio]:checked + label::after {
  transform: translateY(-.3rem) rotateZ(135deg);
}
input[type=radio]:checked ~ dl {
  max-height: 1000px;
}
.menu input[type=radio] {
  display: none;
}
</style>

whrice commented 5 years ago

demo //focus

  <div class="wrap">
        <ul class='wrap-box'>
            <li>
                <div class="tit" tabindex="0" hidefocus='true'>布局</div>
                <div class='content'>
                    <a href="#" class="item">flex布局</a>
                    <a href="#" class="item">grid布局</a>
                    <a href="#" class="item">shapes布局</a>
                    <a href="#" class="item">columns布局</a>
                </div>
            </li>
            <li>
                <div class="tit" tabindex="0" hidefocus='true'>组件</div>
                <div class='content'>
                    <a href="" class="item">按钮</a>
                    <a href="" class="item">输入框</a>
                    <a href="" class="item">下拉列表</a>
                    <a href="" class="item">单复选框</a>
                </div>
            </li>
        </ul>
    </div>

       body {
            font-size: 14px
        }
        ul {
            list-style: none;
            margin: 0;
            padding: 0
        }
        .content {
            display: none;
        }
        .wrap {
            border: 1px solid #666;
            width: 140px;
        }
        .tit {
            padding: 6px 0 6px 10px;
            position: relative;
            cursor: pointer;
            outline: 0
        }
        .tit:focus+.content {
            display: block;
        }
        .tit:after {
            content: '';
            position: absolute;
            right: 0;
            width: 6px;
            height: 6px;
            border: 2px solid #666;
            border-width: 2px 2px 0 0;
            right: 10px;
            transform: rotate(315deg);
            top: 12px;
            transition: .3s
        }
        .tit:focus {
            background: #edf9ff;
        }
        .tit:focus:after {
            transform: rotate(135deg);
            top: 10px;
        }
        .item {
            display: block;
            text-decoration: none;
            color: #666;
            padding: 8px 24px;
        }
        .item:hover {
            background: #edf9ff;
            color: #33b2ee;
        }
        .test {
            width: 100px;
            height: 100px;
            border: 1px solid red
        }
        input[type='checkbox'] {
            position: absolute
        }

demo //checkbox:使用focus，发现当失去焦点时会出现一些问题，故参考上面使用了CheckBox，但checkbox在点击下一部分内容时，无法自动收起，所以最后与伪类hover结合使用（hover觉得使用感不是很好，本来想要与focus伪类结合使用，但focus有时候会不起作用）

 <div class="wrap">
        <ul class='wrap-box'>
            <li class='blog' >
                <input type="checkbox" class='flag' id="ipt">
                <label class="tit" for='ipt' tabindex="0" hidefocus='true'>
                    布局
                </label>
                <div class='content'>
                    <a href="#" class="item">flex布局</a>
                    <a href="#" class="item">grid布局</a>
                    <a href="#" class="item">shapes布局</a>
                    <a href="#" class="item">columns布局</a>
                </div>
            </li>
            <li class='blog' >
                <input type="checkbox" class='flag' id="ipt1">
                <label class="tit" for='ipt1' tabindex="0" hidefocus='true'>
                    组件
                </label>
                <div class='content'>
                        <a href="#" class="item">按钮</a>
                        <a href="#" class="item">输入框</a>
                        <a href="#" class="item">下拉列表</a>
                        <a href="#" class="item">单复选框</a>
                </div>
            </li>
        </ul>
    </div>

       body {
            font-size: 14px
        }
        ul {
            list-style: none;
            margin: 0;
            padding: 0
        }
       .content {
            display: none;
        }
        .wrap {
            border: 1px solid #666;
            width: 140px;
        }
        .tit {
            display: block;
            padding: 6px 0 6px 10px;
            position: relative;
            cursor: pointer;
            outline: 0
        }
        .tit:after {
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
            border: 2px solid #666;
            border-width: 2px 2px 0 0;
            right: 10px;
            transform: rotate(-45deg);
            top: 12px;
            transition: .3s
        }
        .item {
            display: block;
            text-decoration: none;
            color: #666;
            padding: 8px 24px;
        }
        .item:hover {
            background: #edf9ff;
            color: #33b2ee;
        }
        .test {
            width: 100px;
            height: 100px;
            border: 1px solid red
        }
        .flag {
            display: none;
        }
        .blog:hover .flag:checked+.tit:after {
            transform: rotate(135deg);
            top: 10px;
        }
          .blog:hover .flag:checked+.tit+ .content {
            display: block
        }

sghweb commented 5 years ago

demo

<ul>
  <li>
    <input id="input1" type="checkbox">
    <label for="input1" class="arrow">布局</label>
    <ul>
      <li>
        flex布局
      </li>
      <li>
        Grid布局
      </li>
      <li>
        shapes布局
      </li>
      <li>
        columns布局
      </li>
    </ul>
  </li>
  <li>
    <input id="input2" type="checkbox">
    <label for="input2" class="arrow">组件</label>
    <ul>
      <li>按钮</li>
      <li>输入框</li>
      <li>下拉列表</li>
      <li>单复选框</li>
    </ul>
  </li>
</ul>

body {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
ul {
  list-style: none;
  position: relative;
  padding-left: 0px;
  width: 140px;
}
input {
  display: none;
  width: 100%;
  height: 100%;
  cursor: pointe;
}
.arrow {
  position: relative;
  display: block;
  cursor: pointer;
}
.arrow:after {
  content: " ";
  display: inline-block;
  height: 7px;
  width: 7px;
  border-width: 1px 1px 0 0;
  border-color: #000;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
  top: 7px;
  right: 10px;
  cursor: pointe;
}
input[type=checkbox]:checked+label:after {
  border-width: 0 1px 1px 0;
}
input[type=checkbox]:checked+label+ul {
  display: none;
}
li li {
  line-height: 2;
  padding-left: 20px;
  color: #333;
}
li li:hover {
  color: #37b4ee;
  background: #edf9ff;
}

GCGligoudan commented 5 years ago

第一种方式demo

<div class="menu">
    <div class="menu-item">
      <input type="checkbox" checked>
      <div>
        <div class="menu-item-head">
          <h3>布局</h3>
          <span>＞</span>
        </div>
        <div class="menu-item-list">
          <span class="menu-item-child">Flex布局</span>
          <span class="menu-item-child">Grid布局</span>
          <span class="menu-item-child">Shapes布局</span>
          <span class="menu-item-child">Columns布局</span>
        </div>
      </div>
    </div>
    <div class="menu-item">
      <input type="checkbox" checked>
      <div>
        <div class="menu-item-head">
          <h3>组件</h3>
          <span>＞</span>
        </div>
        <div class="menu-item-list">
          <span class="menu-item-child">按钮</span>
          <span class="menu-item-child">输入框</span>
          <span class="menu-item-child">下拉列表</span>
          <span class="menu-item-child">单复选框</span>
        </div>
      </div>
    </div>
  </div>

  * {
      margin: 0;
    }
    .menu {
      width: 250px;
      min-height: 400px;
      border-right: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
    .menu-item {
      position: relative;
    }
    .menu-item input {
      width: 100%;
      height: 40px;
      position: absolute;
      opacity: 0;
    }
    .menu-item-head {
      height: 40px;
      padding: 0 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .menu-item-head h3 {
      font-size: 16px;
    }
    .menu-item-head span {
      transform: rotate(90deg);
      transition: all 0.5s;
    }
    .menu-item-list {
      max-height: 0;
      overflow: hidden;
      line-height: 40px;
      transition: all .5s ease-in;
    }
    .menu-item-child {
      display: block;
      text-align: center;
    }
    .menu-item-child:hover {
      color: aqua;
      background-color: lightblue;
    }
    input:checked+div .menu-item-head span {
      transform: rotate(-90deg);
    }
    input:checked+div .menu-item-list {
      max-height: 500px;
    }

第二种方式demo

  <div class="pannel">
    <details class="pannel-item">
      <summary>布局</summary>
      <a href="">Flex布局</a>
      <a href="">Grid布局</a>
      <a href="">Shapes布局</a>
      <a href="">Columns布局</a>
    </details>
    <details class="pannel-item">
      <summary>组件</summary>
      <a href="">按钮</a>
      <a href="">输入框</a>
      <a href="">下拉列表</a>
      <a href="">单复选框</a>
    </details>
  </div>

    .pannel{
      width: 230px;
      min-height: 500px;
      border-right: 1px solid #666;
      border-left: 1px solid #666;
    }
    summary{
      outline: none;
      padding: 0 20px;
      line-height: 40px;
    }
    ::-webkit-details-marker{
      display: none;
    }
    ::-moz-list-bullet{
      font-size: 0;
    }
    summary::after{
      display: block;
      content: '';
      border: 2px solid #000;
      border-width: 2px 2px 0 0;
      width: 6px;
      height: 6px;
      transform: rotate(135deg);
      transition: all 0.5s;
      float: right;
      margin-right: 20px;
      margin-top: 16px;
    }
    .pannel-item a{
      text-decoration: none;
      color: #000;
      line-height: 40px;
      display: block;
      text-align: center;
    }
    .pannel-item a:hover{
      color: aqua;
      background-color: lightblue;
    }
    .pannel-item[open] summary::after{
      transform: rotate(-45deg);
    }

kuikuiGe commented 5 years ago

demo

Html

<div class="nav">
    <ul>
        <li>
            <input id="index-1" type="checkbox" name="group">
            <label for="index-1">
                布局
            </label>
            <ul>
                <li>
                    <input id="index-1-1" type="radio" name="group-child">
                    <label for="index-1-1">Flex布局</label>
                </li>
                <li>
                    <input id="index-1-2" type="radio" name="group-child">
                    <label for="index-1-2">Grid布局</label>
                </li>
                <li>
                    <input id="index-1-3" type="radio" name="group-child">
                    <label for="index-1-3">Shapes布局</label>
                </li>
                <li>
                    <input id="index-1-4" type="radio" name="group-child">
                    <label for="index-1-4">Columns布局</label>
                </li>
            </ul>
        </li>
        <li>
            <input id="index-2" type="checkbox" name="group">
            <label for="index-2">组件</label>
            <ul>
                <li>
                    <input id="index-2-1" type="radio" name="group-child">
                    <label for="index-2-1">按钮</label>
                </li>
                <li>
                    <input id="index-2-2" type="radio" name="group-child">
                    <label for="index-2-2">输入框</label>
                </li>
                <li>
                    <input id="index-2-3" type="radio" name="group-child">
                    <label for="index-2-3">下拉列表</label>
                </li>
                <li>
                    <input id="index-2-4" type="radio" name="group-child">
                    <label for="index-2-4">单复选框</label>
                </li>
            </ul>
        </li>
    </ul>
</div>

Css

.nav{
    width: 200px;
    color: #333;
    border: 1px solid #eee;
    text-align: left;
}
.nav ul{
    margin: 0;
    padding: 0;
}
.nav li{
    list-style: none;
}
.nav input+label+ul{
    display: none;
}
.nav input:checked+label+ul{
    display: block;
}
.nav input[type=checkbox],
.nav input[type=radio]{
    position: absolute;
    opacity: 0;
}
.nav input[type=checkbox]+label:after{
    display: inline-block;
    content: '∨';
    font-weight: bold;
}
.nav input[type=checkbox]:checked+label:after{
    content: '∧';
}
.nav input[type=checkbox]+label{
    display: flex;
    justify-content: space-between;
    padding: 10px 20px 10px;
    font-size: 14px;
    font-weight: bold;
    user-select: none;
}
.nav input[type=radio]+label{
    display: block;
    padding: 10px 40px 10px;
    font-size: 16px;
    user-select: none;
}
.nav input[type=checkbox]+label:hover,
.nav input[type=radio]+label:hover{
    cursor: pointer;
}
.nav input[type=radio]:checked+label{
    background: #d8eff980;
    color: #23b3ec;
}

tao1874 commented 5 years ago

DEMO html

<nav>
        <details>
            <summary>布局</summary>
            <div class="sub-menu"><a href="#">Flex布局</a></div>
            <div class="sub-menu"><a href="#">Grid布局</a></div>
            <div class="sub-menu"><a href="#">Shapes布局</a></div>
            <div class="sub-menu"><a href="#">Columns布局</a></div>
        </details>
        <details>
            <summary>组件</summary>
            <div class="sub-menu"><a href="#">按钮</a></div>
            <div class="sub-menu"><a href="#">输入框</a></div>
            <div class="sub-menu"><a href="#">下拉列表</a></div>
            <div class="sub-menu"><a href="#">单复选框</a></div>
        </details>
    </nav>

css

      nav {
            border-style: solid;
            border-color: #d0dbe0;
            border-width: 0px 1px 0px 1px;
            max-width: 150px;
            line-height: 2;
            font-size: 14px;
        }
        details {
            margin-bottom: .5em;
        }
        details[open] summary::after {
            transform: rotate(180deg)
        }
        summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 .5em;
            outline: 0;
        }
        summary::after {
            content: '';
            display: inline-block;
            width: 1em;
            height: 1em;
            background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTj_gQFoE9z3p_IX9icKBthBcwQKthV4cxO7LjVBYdPRW_6tT-v) no-repeat;
            background-size: cover;
            transition: transform .2s;
        }

        ::-webkit-details-marker {
            display: none;
        }
        .sub-menu {
            text-indent: 2em;
            color: #85878d;
        }
        .sub-menu:hover {
            color: #24aceb;
            background-color: #edf9ff;
        }
        .sub-menu a {
            text-decoration: none;
            color: inherit;
        }

zhangxinxu commented 5 years ago

本期要点：

视觉还原才是重点。
details > summary 是最好的实现。可以进一步注意语义化。这个方法IE/Edge是不支持。所以可以用来判断是否是IE内核浏览器，var isIE = !('open' in document.createElement('details'))。所以如果要兼容IE，可以写个polyfill。
:checked方法交互也可以实现，但语义欠佳，不是这种交互的最佳实践。注意优化选择器。
:target方法有触发锚点定位的问题，可以使用一个隐藏的空div元素曲线救国。
:focus-within只要子元素有focus，就能匹配。是目前最先支持的具有“父选择器”特性的伪类。最佳实践是下拉菜单。类似的选择器还有 :target-within。
/ 元素聚焦，同时聚焦轮廓浏览器认为应该显示。 /:focus:not(:focus-visible) { outline: 0; }
注意不要过度无障碍设置

Despair-lj commented 5 years ago

关于无障碍属性 role="none" 的介绍

zhangxinxu commented 5 years ago

关于无障碍属性 role="none" 的介绍

好的。

Despair-lj commented 5 years ago

关于 @Seasonley 的无障碍设置, 是基于 w3c 提供的树视图无障碍设置要求所编写的

官方树视图无障碍设置例子

Seasonley commented 5 years ago

关于 @Seasonley 的无障碍设置, 是基于 w3c 提供的树视图无障碍设置要求所编写的

官方树视图无障碍设置例子

@Despair-lj 是的。谢谢链接。顺便贴上我对aira的全部中文翻译链接 @zhangxinxu @Despair-lj 不确定aria treeview选择得对不对，望指正。