mirror of
https://github.com/Vimux/Binario.git
synced 2024-11-11 01:38:28 +00:00
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 }}
|
{{- if .Site.Menus.main }}
|
||||||
<nav class="main-nav" role="navigation">
|
<nav class="main-nav" role="navigation">
|
||||||
<button id="toggle" class="main-nav__btn" aria-label="Menu toggle" aria-expanded="false">
|
<button id="toggle" class="main-nav__btn" aria-label="Menu toggle" aria-expanded="false" tabindex="0">
|
||||||
<svg class="main-nav__btn-icon icon-menu" width="18" height="18" viewBox="0 0 18 18">
|
<div class="main-nav__btn-box" tabindex="-1">
|
||||||
<path class="icon-menu__burger" d="M18 0v3.6H0V0h18zM0 10.8h18V7.2H0v3.6zM0 18h18v-3.6H0V18z"/>
|
<svg class="main-nav__icon icon-menu" width="18" height="18" viewBox="0 0 18 18" >
|
||||||
<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"/>
|
<path class="icon-menu__burger" d="M18 0v3.6H0V0h18zM0 10.8h18V7.2H0v3.6zM0 18h18v-3.6H0V18z"/>
|
||||||
</svg>
|
<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>
|
</button>
|
||||||
<ul id="menu" class="main-nav__list">
|
<ul id="menu" class="main-nav__list">
|
||||||
{{- $currentNode := . }}
|
{{- $currentNode := . }}
|
||||||
|
|
|
@ -477,15 +477,15 @@ mark {
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-nav__btn {
|
.main-nav__btn {
|
||||||
|
display: block;
|
||||||
float: right;
|
float: right;
|
||||||
width: 42px;
|
|
||||||
height: 42px;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: #2a2a2a;
|
background-color: #2a2a2a;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-left: 1px solid #333;
|
border-left: 1px solid #333;
|
||||||
|
outline: 0;
|
||||||
fill: #f8ae00;
|
fill: #f8ae00;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -494,6 +494,28 @@ mark {
|
||||||
color: #000;
|
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 {
|
.main-nav__btn .icon-menu__burger {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue