Skip to content

Commit b66be12

Browse files
agjohnsonagjohnson
committed
Add 3 + 4th levels to nav and more intuitive scrolling
Adds l3 + l4 nav menus, with more intuitive scrolling to make wandering the additional nav menu items much easier. Resolves #25. Resolves #76. * Reuses some styles for l3 + l4 navs items * Nav interaction was changed to be more intuitive: * Nav is always sticky, doesn't scroll past end of content * Nav scrolls up immediately on window scroll events * Nav scrolls independently * Adds TOC expand plus links to the left of nav elements with children, these are added and update dynamically * Links in nav don't automatically scroll nav * Scrolling content will start scrolling nav again * Adds URL fragment handling to link and show current anchor links
1 parent a61976a commit b66be12

File tree

6 files changed

+238
-41
lines changed

6 files changed

+238
-41
lines changed

‎demo_docs/source/long.rst

+85
Original file line numberDiff line numberDiff line change
@@ -122,3 +122,88 @@ Example Menu 20
122122
---------------
123123

124124
Just a place holder...
125+
126+
Example Submenu 1
127+
-----------------
128+
129+
Just a place holder...
130+
131+
Submenu 1
132+
~~~~~~~~~
133+
134+
Just a place holder...
135+
136+
Subsubmenu 1
137+
````````````
138+
139+
Just a place holder...
140+
141+
Subsubmenu 2
142+
````````````
143+
144+
Just a place holder...
145+
146+
Submenu 2
147+
~~~~~~~~~
148+
149+
Just a place holder...
150+
151+
Subsubmenu 1
152+
````````````
153+
154+
Just a place holder...
155+
156+
Submenu 3
157+
~~~~~~~~~
158+
159+
Just a place holder...
160+
161+
Submenu 4
162+
~~~~~~~~~
163+
164+
Just a place holder...
165+
166+
Submenu 5
167+
~~~~~~~~~
168+
169+
Just a place holder...
170+
171+
Example Submenu 2
172+
-----------------
173+
174+
Just a place holder...
175+
176+
Submenu 1
177+
~~~~~~~~~
178+
179+
Just a place holder...
180+
181+
Subsubmenu 1
182+
````````````
183+
184+
Just a place holder...
185+
186+
Submenu 2
187+
~~~~~~~~~
188+
189+
Just a place holder...
190+
191+
Subsubmenu 1
192+
````````````
193+
194+
Just a place holder...
195+
196+
Submenu 3
197+
~~~~~~~~~
198+
199+
Just a place holder...
200+
201+
Submenu 4
202+
~~~~~~~~~
203+
204+
Just a place holder...
205+
206+
Submenu 5
207+
~~~~~~~~~
208+
209+
Just a place holder...

‎sass/_theme_layout.sass

+67-18
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,17 @@
5858
color: inherit
5959
padding-left: 0
6060
padding-right: 0
61+
// Expand links
62+
span.toctree-expand
63+
display: block
64+
float: left
65+
margin-left: -1.2em
66+
@extend .fa
67+
@extend .fa-plus-square-o
68+
font-size: .8em
69+
line-height: 1.6em
70+
color: darken($text-medium, 20%)
71+
6172
// On state for the first level
6273
li.on a, li.current > a
6374
color: $text-color
@@ -72,16 +83,54 @@
7283
+font-smooth
7384
&:hover
7485
background: $section-background-color
86+
span.toctree-expand
87+
color: $text-medium
88+
span.toctree-expand
89+
@extend .fa
90+
@extend .fa-minus-square-o
91+
display: block
92+
font-size: .8em
93+
line-height: 1.6em
94+
color: darken($text-medium, 30%)
95+
7596
// This is the on state for pages beyond second level
76-
li.toctree-l2.current > a
77-
background: darken($section-background-color, 20%)
78-
padding: $gutter / 4 $gutter * 1.5
79-
li.toctree-l2 li.toctree-l3 > a
80-
display: none
81-
li.toctree-l2.current li.toctree-l3 > a
82-
display: block
83-
background: darken($section-background-color, 20%)
84-
padding: $gutter / 4 $gutter * 2.5
97+
li.toctree-l1.current li.toctree-l2, li.toctree-l2.current li.toctree-l3
98+
> ul
99+
display: none
100+
&.current > ul
101+
display: block
102+
li.toctree-l2
103+
&.current
104+
> a
105+
background: darken($section-background-color, 20%)
106+
padding: $gutter / 4 $gutter * 1.5
107+
li.toctree-l3 > a
108+
display: block
109+
background: darken($section-background-color, 20%)
110+
padding: $gutter / 4 $gutter * 2.5
111+
a:hover span.toctree-expand
112+
color: $text-medium
113+
span.toctree-expand
114+
color: darken($section-background-color, 35%)
115+
li.toctree-l3
116+
font-size: .9em
117+
&.current
118+
> a
119+
background: darken($section-background-color, 25%)
120+
padding: $gutter / 4 $gutter * 2.5
121+
li.toctree-l4 > a
122+
display: block
123+
background: darken($section-background-color, 25%)
124+
padding: $gutter / 4 $gutter * 3.5
125+
border-top: none
126+
border-bottom: none
127+
a:hover span.toctree-expand
128+
color: $text-medium
129+
span.toctree-expand
130+
color: darken($section-background-color, 40%)
131+
li.toctree-l4
132+
font-size: .9em
133+
85134
li.current ul
86135
display: block
87136
li ul
@@ -105,10 +154,14 @@
105154
&:hover
106155
background-color: lighten($menu-background-color, 10%)
107156
cursor: pointer
157+
span.toctree-expand
158+
color: $text-light
108159
&:active
109160
background-color: $menu-logo-color
110161
cursor: pointer
111162
color: $white
163+
span.toctree-expand
164+
color: $white
112165

113166
.wy-side-nav-search
114167
z-index: $z-index-popover
@@ -193,11 +246,14 @@
193246
height: 100%
194247

195248
.wy-nav-side
196-
position: absolute
249+
position: fixed
197250
top: 0
251+
bottom: 0
198252
left: 0
253+
padding-bottom: 2em
199254
width: $nav-desktop-width
200-
overflow: hidden
255+
overflow-x: hidden
256+
overflow-y: scroll
201257
min-height: 100%
202258
background: $menu-background-color
203259
z-index: $z-index-popover
@@ -310,10 +366,3 @@ footer
310366
display: none
311367
.wy-nav-content-wrap
312368
margin-left: 0
313-
314-
nav.stickynav
315-
position: fixed
316-
top: 0
317-
bottom: 0
318-
overflow-x: hidden
319-
overflow-y: hidden

‎sphinx_rtd_theme/layout.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107

108108
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
109109
{% block menu %}
110-
{% set toctree = toctree(maxdepth=2, collapse=False, includehidden=True) %}
110+
{% set toctree = toctree(maxdepth=4, collapse=False, includehidden=True) %}
111111
{% if toctree %}
112112
{{ toctree }}
113113
{% else %}

‎sphinx_rtd_theme/static/css/theme.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sphinx_rtd_theme/static/css/theme.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sphinx_rtd_theme/static/js/theme.js

+82-19
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,113 @@
1-
$( document ).ready(function() {
1+
function toggleCurrent (elem) {
2+
var parent_li = elem.closest('li');
3+
parent_li.siblings('li.current').removeClass('current');
4+
parent_li.siblings().find('li.current').removeClass('current');
5+
parent_li.find('> ul li.current').removeClass('current');
6+
parent_li.toggleClass('current');
7+
}
8+
9+
$(document).ready(function() {
210
// Shift nav in mobile when clicking the menu.
311
$(document).on('click', "[data-toggle='wy-nav-top']", function() {
4-
$("[data-toggle='wy-nav-shift']").toggleClass("shift");
5-
$("[data-toggle='rst-versions']").toggleClass("shift");
12+
$("[data-toggle='wy-nav-shift']").toggleClass("shift");
13+
$("[data-toggle='rst-versions']").toggleClass("shift");
614
});
7-
// Close menu when you click a link.
15+
// Nav menu link click operations
816
$(document).on('click', ".wy-menu-vertical .current ul li a", function() {
9-
$("[data-toggle='wy-nav-shift']").removeClass("shift");
10-
$("[data-toggle='rst-versions']").toggleClass("shift");
17+
var target = $(this);
18+
// Close menu when you click a link.
19+
$("[data-toggle='wy-nav-shift']").removeClass("shift");
20+
$("[data-toggle='rst-versions']").toggleClass("shift");
21+
// Handle dynamic display of l3 and l4 nav lists
22+
toggleCurrent(target);
23+
if (typeof(window.SphinxRtdTheme) != 'undefined') {
24+
window.SphinxRtdTheme.StickyNav.hashChange();
25+
}
1126
});
1227
$(document).on('click', "[data-toggle='rst-current-version']", function() {
13-
$("[data-toggle='rst-versions']").toggleClass("shift-up");
14-
});
28+
$("[data-toggle='rst-versions']").toggleClass("shift-up");
29+
});
1530
// Make tables responsive
1631
$("table.docutils:not(.field-list)").wrap("<div class='wy-table-responsive'></div>");
32+
33+
// Add expand links to all parents of nested ul
34+
$('.wy-menu-vertical ul').siblings('a').each(function () {
35+
var link = $(this);
36+
expand = $('<span class="toctree-expand"></span>');
37+
expand.on('click', function (ev) {
38+
toggleCurrent(link);
39+
ev.stopPropagation();
40+
return false;
41+
});
42+
link.prepend(expand);
43+
});
1744
});
1845

46+
// Sphinx theme state
1947
window.SphinxRtdTheme = (function (jquery) {
2048
var stickyNav = (function () {
2149
var navBar,
2250
win,
23-
stickyNavCssClass = 'stickynav',
2451
winScroll = false,
52+
linkScroll = false,
53+
winPosition = 0,
2554
enable = function () {
26-
navBar.addClass(stickyNavCssClass);
27-
win.on('scroll', function() { // set flag on scroll event
28-
winScroll = true;
55+
init();
56+
reset();
57+
win.on('hashchange', reset);
58+
59+
// Set scrolling
60+
win.on('scroll', function () {
61+
if (!linkScroll) {
62+
winScroll = true;
63+
}
2964
});
30-
// use setInterval to only handle a subset of scroll events so we don't kill scroll performance
31-
setInterval(function() {
65+
setInterval(function () {
3266
if (winScroll) {
3367
winScroll = false;
34-
navBar.scrollTop(win.scrollTop());
68+
var newWinPosition = win.scrollTop(),
69+
navPosition = navBar.scrollTop(),
70+
newNavPosition = navPosition + (newWinPosition - winPosition);
71+
navBar.scrollTop(newNavPosition);
72+
winPosition = newWinPosition;
3573
}
36-
}, 100);
74+
}, 25);
3775
},
3876
init = function () {
3977
navBar = jquery('nav.wy-nav-side:first');
40-
win = jquery(window);
78+
win = jquery(window);
79+
},
80+
reset = function () {
81+
// Get anchor from URL and open up nested nav
82+
var anchor = encodeURI(window.location.hash);
83+
if (anchor) {
84+
try {
85+
var link = $('.wy-menu-vertical')
86+
.find('[href="' + anchor + '"]');
87+
$('.wy-menu-vertical li.toctree-l1 li.current')
88+
.removeClass('current');
89+
link.closest('li.toctree-l2').addClass('current');
90+
link.closest('li.toctree-l3').addClass('current');
91+
link.closest('li.toctree-l4').addClass('current');
92+
}
93+
catch (err) {
94+
console.log("Error expanding nav for anchor", err);
95+
}
96+
}
97+
},
98+
hashChange = function () {
99+
linkScroll = true;
100+
win.one('hashchange', function () {
101+
linkScroll = false;
102+
});
41103
};
42104
jquery(init);
43105
return {
44-
enable : enable
106+
enable: enable,
107+
hashChange: hashChange
45108
};
46109
}());
47110
return {
48-
StickyNav : stickyNav
111+
StickyNav: stickyNav
49112
};
50113
}($));

0 commit comments

Comments
 (0)