Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow keyboard to toggle menu expansion #1167

Merged
merged 2 commits into from Jun 18, 2021
Merged

Allow keyboard to toggle menu expansion #1167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f3ccb5
Allow keyboard to toggle menu expansion
jonels-msft Jun 16, 2021
ab42dc4
Merge branch 'master' into nav-keyboard-open-close
Blendify Jun 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 11 additions & 8 deletions src/sass/_theme_layout.sass
View file
Open in desktop
Expand Up @@ -64,14 +64,17 @@ html
padding-left: 0
padding-right: 0
// Expand links
span.toctree-expand
button.toctree-expand
display: block
float: left
margin-left: -1.2em
@extend .fa
@extend .fa-plus-square-o
line-height: 18px
color: darken($menu-link-medium, 20%)
border: none
background: none
padding: 0

// On state for the first level
li.on a, li.current > a
Expand All @@ -85,9 +88,9 @@ html
+font-smooth
&:hover
background: $menu-vertical-background-color
span.toctree-expand
button.toctree-expand
color: $menu-link-medium
span.toctree-expand
button.toctree-expand
@extend .fa
@extend .fa-minus-square-o
display: block
Expand Down Expand Up @@ -134,7 +137,7 @@ html
@extend %display_current_toctree_element
padding: ($gutter / 4) ($gutter * ($toc_level + 0.5))
padding-right: $gutter
a:hover span.toctree-expand
a:hover button.toctree-expand
@extend %toctree_hover_link_color
@if $toc_level > 2 and $toc_level < 5
li.toctree-l#{$toc_level}
Expand All @@ -146,15 +149,15 @@ html
background: darken($menu-vertical-background-color, 20%)
li.toctree-l3 > a
background: darken($menu-vertical-background-color, 20%)
span.toctree-expand
button.toctree-expand
color: darken($menu-vertical-background-color, 35%)
li.toctree-l3
&.current
> a
background: darken($menu-vertical-background-color, 25%)
li.toctree-l4 > a
background: darken($menu-vertical-background-color, 25%)
span.toctree-expand
button.toctree-expand
color: darken($menu-vertical-background-color, 40%)

li.current ul
Expand All @@ -176,13 +179,13 @@ html
&:hover
background-color: lighten($menu-background-color, 10%)
cursor: pointer
span.toctree-expand
button.toctree-expand
color: $menu-link-light
&:active
background-color: $menu-logo-color
cursor: pointer
color: $menu-link-active
span.toctree-expand
button.toctree-expand
color: $menu-link-active

.wy-side-nav-search
Expand Down
3 changes: 2 additions & 1 deletion src/theme.js
View file
Open in desktop
Expand Up @@ -112,7 +112,8 @@ function ThemeNav () {
// Add expand links to all parents of nested ul
$('.wy-menu-vertical ul').not('.simple').siblings('a').each(function () {
var link = $(this);
expand = $('<span class="toctree-expand"></span>');
expand =
$('<button class="toctree-expand" title="Open/close menu"></button>');
expand.on('click', function (ev) {
self.toggleCurrent(link);
ev.stopPropagation();
Expand Down