Skip to content

Commit 8c6c503

Browse files
jessetanjessetan
committed
Decouple menu expand and collapse from active item
1 parent 4a3d790 commit 8c6c503

File tree

3 files changed

+89
-68
lines changed

3 files changed

+89
-68
lines changed

‎docs/changelog.rst‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,23 @@
33
Changelog
44
*********
55

6+
master
7+
======
8+
9+
:Date: TBD
10+
11+
New Features
12+
-------------
13+
14+
Fixes
15+
-----
16+
17+
Other Changes
18+
--------------
19+
20+
* Menu items can now expand and collapse regardless of active item
21+
22+
623
v0.4.2
724
======
825

‎js/theme.js‎

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@ function ThemeNav () {
9191
$("[data-toggle='wy-nav-shift']").removeClass("shift");
9292
$("[data-toggle='rst-versions']").toggleClass("shift");
9393
// Handle dynamic display of l3 and l4 nav lists
94-
self.toggleCurrent(target);
94+
self.setCurrent(target);
95+
self.toggleExpanded(target, true);
9596
self.hashChange();
9697
})
9798
.on('click', "[data-toggle='rst-current-version']", function() {
@@ -114,7 +115,7 @@ function ThemeNav () {
114115
var link = $(this);
115116
expand = $('<span class="toctree-expand"></span>');
116117
expand.on('click', function (ev) {
117-
self.toggleCurrent(link);
118+
self.toggleExpanded(link);
118119
ev.stopPropagation();
119120
return false;
120121
});
@@ -146,12 +147,12 @@ function ThemeNav () {
146147
if (link.length > 0) {
147148
$('.wy-menu-vertical .current').removeClass('current');
148149
link.addClass('current');
149-
link.closest('li.toctree-l1').addClass('current');
150-
link.closest('li.toctree-l1').parent().addClass('current');
151-
link.closest('li.toctree-l1').addClass('current');
152-
link.closest('li.toctree-l2').addClass('current');
153-
link.closest('li.toctree-l3').addClass('current');
154-
link.closest('li.toctree-l4').addClass('current');
150+
link.closest('li.toctree-l1').addClass('current expanded');
151+
link.closest('li.toctree-l1').parent().addClass('current expanded');
152+
link.closest('li.toctree-l1').addClass('current expanded');
153+
link.closest('li.toctree-l2').addClass('current expanded');
154+
link.closest('li.toctree-l3').addClass('current expanded');
155+
link.closest('li.toctree-l4').addClass('current expanded');
155156
}
156157
}
157158
catch (err) {
@@ -186,13 +187,27 @@ function ThemeNav () {
186187
});
187188
};
188189

189-
nav.toggleCurrent = function (elem) {
190+
nav.toggleExpanded = function (elem, forceExpanded) {
190191
var parent_li = elem.closest('li');
192+
// parent_li.siblings('li.current').removeClass('current');
193+
// parent_li.siblings().find('li.current').removeClass('current');
194+
// parent_li.find('> ul li.current').removeClass('current');
195+
if (forceExpanded) {
196+
parent_li.addClass('expanded');
197+
} else {
198+
parent_li.toggleClass('expanded');
199+
}
200+
};
201+
202+
nav.setCurrent = function (elem) {
203+
var parent_li = elem.closest('li');
204+
// Remove 'current' status from all li at parent level and lower
191205
parent_li.siblings('li.current').removeClass('current');
192206
parent_li.siblings().find('li.current').removeClass('current');
193207
parent_li.find('> ul li.current').removeClass('current');
194-
parent_li.toggleClass('current');
195-
}
208+
// Make our parent 'current'
209+
parent_li.addClass('current');
210+
};
196211

197212
return nav;
198213
};

‎sass/_theme_layout.sass‎

Lines changed: 46 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -51,19 +51,17 @@ html
5151
border-bottom: solid 1px hsl(0, 0%, 25%)
5252
&.current
5353
background: darken($menu-vertical-background-color, 10%)
54+
&.current
5455
a
55-
color: $menu-link-medium
5656
border-right: solid 1px darken($menu-vertical-background-color, 20%)
57-
padding: $gutter / 4 $gutter * 1.5
58-
&:hover
59-
background: darken($menu-vertical-background-color, 15%)
6057
code
6158
border: none
6259
background: inherit
6360
color: inherit
6461
padding-left: 0
6562
padding-right: 0
66-
// Expand links
63+
64+
// Collapse/Expand icons
6765
span.toctree-expand
6866
display: block
6967
float: left
@@ -73,76 +71,67 @@ html
7371
font-size: .8em
7472
line-height: 1.6em
7573
color: darken($menu-link-medium, 20%)
74+
&.expanded > a span.toctree-expand
75+
@extend .fa-minus-square-o
7676

77-
// On state for the first level
78-
li.on a, li.current > a
79-
color: $menu-link-color
77+
// Expanded state for the first level
78+
li.expanded > a
8079
padding: $gutter / 4 $gutter
81-
font-weight: bold
8280
position: relative
83-
background: $menu-vertical-background-color
8481
border: none
8582
padding-left: $gutter -4px
83+
// Current/on state for first level
84+
li.current > a
85+
color: $menu-link-color
86+
font-weight: bold
87+
background: $menu-vertical-background-color
8688
+font-smooth
87-
&:hover
88-
background: $menu-vertical-background-color
89-
span.toctree-expand
90-
color: $menu-link-medium
91-
span.toctree-expand
92-
@extend .fa
93-
@extend .fa-minus-square-o
94-
display: block
95-
font-size: .8em
96-
line-height: 1.6em
97-
color: darken($menu-link-medium, 30%)
98-
99-
li.toctree-l1.current > a
89+
// Background and border for first level when both expanded and current
90+
li.toctree-l1.current.expanded > a
10091
border-bottom: solid 1px darken($menu-vertical-background-color, 20%)
10192
border-top: solid 1px darken($menu-vertical-background-color, 20%)
93+
&:hover
94+
border-color: lighten($menu-background-color, 10%)
10295

103-
// This is the on state for pages beyond second level
104-
li.toctree-l2 a, li.toctree-l3 a, li.toctree-l4 a
96+
// Menu link color and hover behavior
97+
li.toctree-l1.current a, li.toctree-l2.current a, li.toctree-l3.current a, li.toctree-l4.current a
10598
color: $menu-link-color
106-
li.toctree-l1.current li.toctree-l2, li.toctree-l2.current li.toctree-l3
99+
&:hover
100+
color: $menu-link-light
101+
background-color: lighten($menu-background-color, 10%)
102+
103+
// Colored background when current
104+
li.toctree-l2.current a
105+
background: darken($menu-vertical-background-color, 20%)
106+
li.toctree-l3.current a
107+
background: darken($menu-vertical-background-color, 25%)
108+
109+
// Collapse/expand behavior
110+
li.expanded > ul
111+
display: block
112+
li > ul
113+
margin-bottom: 0
114+
display: none
115+
li.toctree-l1.expanded li.toctree-l2, li.toctree-l2.expanded li.toctree-l3
107116
> ul
108117
display: none
109-
&.current > ul
110-
display: block
111-
li.toctree-l2
112-
&.current
113-
> a
114-
background: darken($menu-vertical-background-color, 20%)
115-
padding: $gutter / 4 $gutter * 1.5
116-
li.toctree-l3 > a
118+
&.expanded
119+
> ul
117120
display: block
118-
background: darken($menu-vertical-background-color, 20%)
119-
padding: $gutter / 4 $gutter * 2.5
120-
a:hover span.toctree-expand
121-
color: $menu-link-medium
122-
span.toctree-expand
123-
color: darken($menu-vertical-background-color, 35%)
121+
122+
// Font size and indentation for levels > 1
123+
li.toctree-l2
124+
> a
125+
padding: $gutter / 4 $gutter * 1.5
124126
li.toctree-l3
125127
font-size: .9em
126-
&.current
127-
> a
128-
background: darken($menu-vertical-background-color, 25%)
129-
padding: $gutter / 4 $gutter * 2.5
130-
li.toctree-l4 > a
131-
display: block
132-
background: darken($menu-vertical-background-color, 25%)
133-
padding: $gutter / 4 $gutter * 3.5
134-
a:hover span.toctree-expand
135-
color: $menu-link-medium
136-
span.toctree-expand
137-
color: darken($menu-vertical-background-color, 40%)
128+
> a
129+
padding: $gutter / 4 $gutter * 2.5
138130
li.toctree-l4
139131
font-size: .9em
132+
> a
133+
padding: $gutter / 4 $gutter * 3.5
140134

141-
li.current ul
142-
display: block
143-
li ul
144-
margin-bottom: 0
145-
display: none
146135
li ul li a
147136
margin-bottom: 0
148137
color: $menu-link-light

0 commit comments

Comments
 (0)