使用:focus-within实现下拉菜单效果

参考这个网站

源代码:

<html>
<style>
/*
  General cleanup
*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body {
  font-family: helvetica, arial, sans-serif;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

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

.sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  font-size: 1px;
}

/*
  Demo
*/
.show-nav {
  position: fixed;
  top: 0;
  right: 0;
}

.nav__list {
  background: #fafafa;
  border-bottom: 1px solid #444;
  text-align: center;
  position: relative;
  z-index: 2;
}

.nav__list > li {
  display: inline-block;
}

.nav__list a {
  display: block;
  padding: 20px;
  position: relative;
  z-index: 2;
}

.nav__list a:hover,
.nav__list a:focus {
  background: #222;
  color: #fff;
}

.has-drop {
  position: relative;
}

.nav__list__drop {
  left: 0;
  margin: 0;
  position: absolute;
  text-align: left;
  top: 100%;
  opacity: 0;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  height: 1px;
  -webkit-transition: opacity .1s ease-out, -webkit-transform .2s ease-in-out;
  transition: opacity .1s ease-out, -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out, opacity .1s ease-out;
  transition: transform .2s ease-in-out, opacity .1s ease-out, -webkit-transform .2s ease-in-out;
  overflow: hidden;
  z-index: 1;
}

.nav__list__drop {
  background: #fafafa;
  border: 1px solid #444;
  border-top: 0;
  min-width: 100%;
}

.nav__list__drop a {
  padding: 12px 20px;
  white-space: nowrap;
}

.nav__list a:focus + .nav__list__drop,
.has-drop:hover .nav__list__drop,
.nav__list__drop:focus-within {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  height: auto;
  z-index: 1;
}

/*
  1. This right here, the :focus-within pseudo-class
     removes the need for all the JS that was in the
     original version of this pen, to reveal the
     dropdown menus on keyboard focus of the primary <a>
     or any of the visually hidden <a>s of the drop down
     menus.
*/
</style>
<div class="page">

  <header role="banner" aria-label="Primary">

    <nav role="navigation" aria-label="Primary" id="nav" class="nav">

      <ul id="nav_inner" class="nav__list">
        <li class="has-drop">
          <a href="#!">
            下拉菜单
          </a>

          <ul class="nav__list__drop">
            <li>
              <a href="#!">
                子菜单1
              </a>
            </li>
            <li>
              <a href="#!">
                子菜单2
              </a>
            </li>
          </ul>
        </li>

        <li>
          <a href="#!">
            普通链接
          </a>
        </li>

        <li class="has-drop">
          <a href="#!">
            下拉菜单2
          </a>

          <ul class="nav__list__drop">
            <li>
              <a href="#!">
                子菜单1 的名字稍微有点长
              </a>
            </li>
            <li>
              <a href="#!">
                子菜单 2
              </a>
            </li>
          </ul>
        </li>
      </ul>

    </nav>
  </header>

</div>
</html>

最后的效果:

在这里插入图片描述

汪子熙 CSDN认证博客专家 前端框架 Node.js SAP
JerryWang,2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师,SAP中国技术大使。2020年5月下旬,Jerry做了脑部肿瘤的开颅切除手术,对编程和人生又有了新的感悟。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__0809 返回首页