使用Tab键扩展大型菜单-仅CSS？

nr7wwzry 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(117)

我有一个“mega menu”，我想在悬停时以及当用户进入包含二级菜单的父元素时显示。如果我在开发人员工具中强制:focus状态，下面似乎可以工作，在包含mega menu的li上，但是当我从文本输入向下按Tab键时，它似乎没有聚焦li。有没有一种方法可以在不使用JavaScript的情况下实现这一点？

nav {
  background:#ccc;
  position:relative;
}
  nav > ul {
    display:flex;
    column-gap:1.5rem;
    width:100%;
    list-style:none;
    margin:0;
    padding:0;
  }
  nav li {
    padding:1.5rem;
  }
  nav li a {
    position:relative;
  }
  nav li.has-children > a:after {
    content:"";
    display:block;
    width:25px;
    height:25px;
    background-image:url('https://upload.wikimedia.org/wikipedia/commons/9/9a/Caret_down_font_awesome.svg');
    position:absolute;
    right:-30px;
    top:50%;
    transform:translateY(-50%);
  }
  
.mm-cont {
  display:none;
  position:absolute;
  width:100%;
  background:#aaa;
  bottom:-132px;
  left:0;
}
  .sub-menu {
    list-style:none;
    padding:0;
  }
  
  
/* Show mm-cont on hover and focus */
li.has-children:hover .mm-cont,
li.has-children:focus .mm-cont {
  display:flex;
}

个字符

css

来源：https://stackoverflow.com/questions/77742813/using-tabbing-to-expand-mega-menu-css-only

1条答案

按热度按时间

k0pti3hp1#

考虑使用:focus-within伪类。听起来，它将匹配内部元素被聚焦的情况，例如<a>元素。

nav {
  background: #ccc;
  position: relative;
}
nav > ul {
  display: flex;
  column-gap: 1.5rem;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  padding: 1.5rem;
}
nav li a {
  position: relative;
}
nav li.has-children > a:after {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/9a/Caret_down_font_awesome.svg");
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
}

.mm-cont {
  display: none;
  position: absolute;
  width: 100%;
  background: #aaa;
  bottom: -132px;
  left: 0;
}
.sub-menu {
  list-style: none;
  padding: 0;
}

/* Show mm-cont on hover and focus */
li.has-children:hover .mm-cont,
li.has-children:focus-within .mm-cont {
  display: flex;
}

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

使用Tab键扩展大型菜单-仅CSS？

1条答案

相关问题

热门标签

最新问答