Add keyboard-only focus on main menu button
This commit is contained in:
parent
45f0ca00f7
commit
9c67e4c2cb
2 changed files with 31 additions and 7 deletions
|
@ -1,10 +1,12 @@
|
|||
{{- if .Site.Menus.main }}
|
||||
<nav class="main-nav" role="navigation">
|
||||
<button id="toggle" class="main-nav__btn" aria-label="Menu toggle" aria-expanded="false">
|
||||
<svg class="main-nav__btn-icon icon-menu" width="18" height="18" viewBox="0 0 18 18">
|
||||
<button id="toggle" class="main-nav__btn" aria-label="Menu toggle" aria-expanded="false" tabindex="0">
|
||||
<div class="main-nav__btn-box" tabindex="-1">
|
||||
<svg class="main-nav__icon icon-menu" width="18" height="18" viewBox="0 0 18 18" >
|
||||
<path class="icon-menu__burger" d="M18 0v3.6H0V0h18zM0 10.8h18V7.2H0v3.6zM0 18h18v-3.6H0V18z"/>
|
||||
<path class="icon-menu__x" d="M11.55 9L18 15.45 15.45 18 9 11.55 2.55 18 0 15.45 6.45 9 0 2.55 2.55 0 9 6.45 15.45 0 18 2.55 11.55 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<ul id="menu" class="main-nav__list">
|
||||
{{- $currentNode := . }}
|
||||
|
|
|
@ -477,15 +477,15 @@ mark {
|
|||
}
|
||||
|
||||
.main-nav__btn {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
background-color: #2a2a2a;
|
||||
border: 0;
|
||||
border-left: 1px solid #333;
|
||||
outline: 0;
|
||||
fill: #f8ae00;
|
||||
}
|
||||
|
||||
|
@ -494,6 +494,28 @@ mark {
|
|||
color: #000;
|
||||
}
|
||||
|
||||
.main-nav__btn-box {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
:focus > .main-nav__btn-box {
|
||||
box-shadow: inset 0 0 1px 3px #4285f4;
|
||||
}
|
||||
|
||||
button:not(:-moz-focusring):focus > .main-nav__btn-box {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.main-nav__btn:focus,
|
||||
.main-nav__btn-box:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.main-nav__btn .icon-menu__burger {
|
||||
display: inline;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue