Issue
I have a "mega menu" that I would like to show on hover as well as when the user tabs into the parent element containing the secondary menu. The following seems to work if I force the :focus
state, in developer tools, on the li
containing the mega menu, but it doesn't seem to be focusing the li
when I tab down from the text input. Is there a way to accomplish this without using 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;
}
<input type="text" placeholder="start here" tabindex="0" />
<nav>
<ul>
<li class="has-children" tabindex="1">
<a href="#">Lorem</a>
<!-- This should expand when tabbing into this li -->
<div class="mm-cont">
<ul class="sub-menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
</ul>
<ul class="sub-menu">
<li><a href="#">Dolor</a></li>
<li><a href="#">Sit</a></li>
</ul>
</div>
</li>
<li tabindex="2"><a href="#">Ipsum</a></li>
<li tabindex="3"><a href="#">Dolor</a></li>
<li tabindex="4"><a href="#">Sit</a></li>
</ul>
</nav>
Solution
Consider using the :focus-within
pseudo-class. As it sounds, it will match the case when an element inside is focused, such as the <a>
elements.
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;
}
<input type="text" placeholder="start here" tabindex="0" />
<nav>
<ul>
<li class="has-children" tabindex="1">
<a href="#">Lorem</a>
<!-- This should expand when tabbing into this li -->
<div class="mm-cont">
<ul class="sub-menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
</ul>
<ul class="sub-menu">
<li><a href="#">Dolor</a></li>
<li><a href="#">Sit</a></li>
</ul>
</div>
</li>
<li tabindex="2"><a href="#">Ipsum</a></li>
<li tabindex="3"><a href="#">Dolor</a></li>
<li tabindex="4"><a href="#">Sit</a></li>
</ul>
</nav>
Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.