Skip to content

Commit 9fe59bd

Browse files
rvesservesse
committed
Add collapsible navigation (#35)
This commit adds the Multi-Level Pushdown Menu plugin to the website so that the navigation is much more user friendly rather than a giant unbounded list. The menu will automatically expand to the level of the page currently being viewed.
1 parent 1ec3562 commit 9fe59bd

File tree

6 files changed

+1339
-38
lines changed

6 files changed

+1339
-38
lines changed

‎_includes/head.html

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,42 @@
1919
<link rel="stylesheet" href="{{ site.baseurl }}/public/css/syntax.css">
2020
<link rel="stylesheet" href="{{ site.baseurl }}/public/css/hyde.css">
2121
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
22+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
23+
<link rel="stylesheet" href="{{ site.baseurl}}/public/css/jquery.multilevelpushmenu.css">
2224

2325
<!-- Icons -->
24-
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}/public/apple-touch-icon-144-precomposed.png">
25-
<link rel="shortcut icon" href="{{ site.baseurl }}/public/favicon.ico">
26+
<!--<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}/public/apple-touch-icon-144-precomposed.png">
27+
<link rel="shortcut icon" href="{{ site.baseurl }}/public/favicon.ico">-->
2628

2729
<!-- Scripts -->
2830
<script src="{{ site.baseurl }}/public/js/jquery.js" type="text/javascript"></script>
29-
</script>
31+
<script src="{{ site.baseurl }}/public/js/jquery.multilevelpushmenu.js"></script>
32+
<script>
33+
$(document).ready(function(){
34+
$( '#menu' ).multilevelpushmenu({
35+
containersToPush: [$( '#menu' )],
36+
direction: "ltr",
37+
menuWidth: "100%",
38+
menuHeight: "480px",
39+
preventItemClick: false,
40+
mode: "cover",
41+
durationTransition: 0,
42+
backItemIcon: "fa fa-angle-left",
43+
groupIcon: "fa fa-angle-right"
44+
});
45+
46+
// Expand menu to currently selected page if possible
47+
var currMenuItem = $("#menu a[href='" + location.pathname + "']").first();
48+
if (currMenuItem.length > 0) {
49+
//console.log("Current Menu Item:");
50+
//console.log(currMenuItem);
51+
var menuLevelObj = currMenuItem.parents(".levelHolderClass").first();
52+
//console.log("Menu Level Object:");
53+
//console.log(menuLevelObj);
54+
if (menuLevelObj.length > 0) {
55+
$('#menu').multilevelpushmenu('expand', menuLevelObj);
56+
}
57+
}
58+
});
59+
</script>
3060
</head>

‎_includes/nav.html

Lines changed: 50 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,51 @@
1-
<a class="sidebar-nav-item" href="{{ site.baseurl }}/">Home</a>
21
<ul>
2+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/">Home</a></li>
33
<li>
4-
<a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/">User Guide</a>
5-
<ol>
4+
<a href="#">User Guide</a>
5+
<ul>
6+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/">Introduction to Airline</a>
67
<li>
7-
<a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/">Annotations</a>
8-
<ol>
9-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/command.html">@Command</a></li>
10-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/option.html">@Option</a></li> <li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/arguments.html">@Arguments</a></li>
11-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/cli.html">@Cli</a></li>
12-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/parser.html">@Parser</a></li>
13-
<hr />
14-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/copyright.html">@Copyright</a></li>
15-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/discussion.html">@Discussion</a></li>
16-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/examples.html">@Examples</a></li>
17-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/exit-codes.html">@ExitCodes</a></li>
18-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/hide-section.html">@HideSection</a></li>
19-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/license.html">@License</a></li>
20-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/prose-section.html">@ProseSection</a></li>
21-
<hr />
22-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/required.html">@Required</a></li>
23-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/require-some.html">@RequireSome</a></li>
24-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/require-only-one.html">@RequireOnlyOne</a></li>
25-
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/mutually-exclusive-with.html">@MutuallyExclusiveWith</a></li>
26-
</ol>
8+
<a href="#">Annotations</a>
9+
<ul>
10+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/">Annotations Overview</a></li>
11+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/unrestricted.html">@Unrestricted</a></li>
12+
<li>
13+
<a href="#">Meta-data Annotations</a>
14+
<ul>
15+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/command.html">@Command</a></li>
16+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/option.html">@Option</a></li>
17+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/arguments.html">@Arguments</a></li>
18+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/cli.html">@Cli</a></li>
19+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/parser.html">@Parser</a></li>
20+
</ul>
21+
</li>
22+
<li>
23+
<a href="#">Help Annotations</a>
24+
<ul>
25+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/copyright.html">@Copyright</a></li>
26+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/discussion.html">@Discussion</a></li>
27+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/examples.html">@Examples</a></li>
28+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/exit-codes.html">@ExitCodes</a></li>
29+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/hide-section.html">@HideSection</a></li>
30+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/license.html">@License</a></li>
31+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/prose-section.html">@ProseSection</a></li>
32+
</ul>
33+
</li>
34+
<li>
35+
<a href="#">Restriction Annotations</a>
36+
<ul>
37+
<li>
38+
<a href="#">Requirement Annotations</a>
39+
<ul>
40+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/required.html">@Required</a></li>
41+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/require-some.html">@RequireSome</a></li>
42+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/require-only-one.html">@RequireOnlyOne</a></li>
43+
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/mutually-exclusive-with.html">@MutuallyExclusiveWith</a></li>
44+
</ul>
45+
</li>
46+
</ul>
47+
</li>
48+
</ul>
2749
</li>
2850
<li>
2951
<a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/parser/">Parser</a>
@@ -36,12 +58,14 @@
3658
</li>
3759
<li>
3860
<a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/practise/">Airline In Practise</a>
39-
<ol>
61+
<ul>
4062
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/practise/oop.html">Inheritance and Composition</a></li>
4163
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/practise/types.html">Supported Types</a></li>
4264
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/practise/aliases.html">User Defined Aliases</a></li>
43-
</ol>
65+
</ul>
4466
</li>
45-
</ol>
67+
</ul>
4668
</li>
69+
<li><a class="sidebar-nav-item" href="{{ site.github.repo }}/archive/v{{ site.version }}.zip">Download</a></li>
70+
<li><a class="sidebar-nav-item" href="{{ site.github.repo }}">GitHub project</a></li>
4771
</ul>

‎_includes/sidebar.html

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,17 @@ <h1>
99
<p class="lead">{{ site.description }}</p>
1010
</div>
1111

12-
<nav class="sidebar-nav" id="menu">
12+
<div id="menu">
13+
<nav class="sidebar-nav" id="mutlilevelpushmenu_wrapper">
14+
{% include nav.html context=page.url %}
15+
</nav>
16+
</div>
1317

14-
{% include nav.html context=page.url %}
15-
16-
<hr />
18+
<hr />
1719

18-
<a class="sidebar-nav-item" href="{{ site.github.repo }}/archive/v{{ site.version }}.zip">Download</a>
19-
<a class="sidebar-nav-item" href="{{ site.github.repo }}">GitHub project</a>
20+
<div>
2021
<span class="sidebar-nav-item">Current Version: {{ site.version }}</span>
21-
</nav>
22+
</div>
2223

2324
<p>All content on this site is open source under the <a href="http://apache.org/licenses/LICENSE-2.0">Apache License 2.0</a></p>
2425

‎index.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,18 @@ Where `X.Y.Z` is your desired version, the current stable release is `{{ site.ve
3030

3131
## License
3232

33-
Airline is open source software licensed under the [Apache License 2.0](http://apache.org/licenses/LICENSE-2.0)
33+
Airline is open source software licensed under the [Apache License 2.0](http://apache.org/licenses/LICENSE-2.0) and this license also applies to the documentation found here.
3434

3535
Please see `license.txt` in this repository for further details
3636

3737
## Acknowledgements
3838

3939
This project was forked from [http://github.com/airlift/airline](http://github.com/airlift/airline) and would not exist at all were it not for that library.
4040

41-
This website is built with [Jekyll](http://jekyllrb.com), it uses the [Hyde theme](https://github.com/poole/hyde) by Mark Otto and the [Table of Contents plugin](https://github.com/ghiculescu/jekyll-table-of-contents) by Alex Ghiculescu both of which are under the MIT License
41+
This website is built with [Jekyll](http://jekyllrb.com), it uses the following resources:
42+
43+
- [Hyde theme](https://github.com/poole/hyde) by Mark Otto
44+
- [Table of Contents plugin](https://github.com/ghiculescu/jekyll-table-of-contents) by Alex Ghiculescu
45+
- [Multi-Level Push Menu plugin](https://github.com/adgsm/multi-level-push-menu) by Momcilo Dzunic
46+
47+
All resources are licensed under the MIT License

‎public/css/jquery.multilevelpushmenu.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
.multilevelpushmenu_wrapper {
2+
position: absolute;
3+
overflow: hidden;
4+
min-width: 100%;
5+
min-height: 100%;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
.multilevelpushmenu_wrapper .levelHolderClass {
11+
position: absolute;
12+
overflow: hidden;
13+
top: 0;
14+
background: #6a9fb5;
15+
width: auto;
16+
min-height: 100%;
17+
zoom: 1;
18+
}
19+
20+
.multilevelpushmenu_wrapper .ltr {
21+
margin-left: -100%;
22+
left: 0;
23+
}
24+
25+
.multilevelpushmenu_wrapper .rtl {
26+
margin-right: -100%;
27+
right: 0;
28+
}
29+
30+
.multilevelpushmenu_wrapper .multilevelpushmenu_inactive {
31+
background: #6a9fb5;
32+
}
33+
34+
.multilevelpushmenu_wrapper h2 {
35+
line-height: 1em;
36+
font-weight: bold;
37+
color: #1f4164;
38+
padding: 0 .4em 0 .4em;
39+
}
40+
41+
.multilevelpushmenu_wrapper ul {
42+
list-style: none;
43+
padding: 0;
44+
margin: 0;
45+
}
46+
47+
.multilevelpushmenu_wrapper li {
48+
cursor: pointer;
49+
border: 1px solid #295685;
50+
padding: .4em .4em .4em .4em;
51+
}
52+
53+
.multilevelpushmenu_wrapper li:last-child {
54+
55+
}
56+
57+
.multilevelpushmenu_wrapper li:hover {
58+
background-color: #295685;
59+
}
60+
61+
.multilevelpushmenu_wrapper a {
62+
display: block;
63+
outline: none;
64+
overflow: hidden;
65+
line-height: 1em;
66+
padding: .2em .2em;
67+
text-decoration: none;
68+
color: #fff;
69+
}
70+
71+
.multilevelpushmenu_wrapper a:hover {
72+
color: #ffe;
73+
}
74+
75+
.multilevelpushmenu_wrapper .backItemClass {
76+
display: block;
77+
padding: .4em .4em .4em .4em;
78+
background: #2e6196;
79+
}
80+
81+
.multilevelpushmenu_wrapper .floatRight {
82+
float: right;
83+
}
84+
85+
.multilevelpushmenu_wrapper .floatLeft {
86+
float: left;
87+
margin-right: 5px;
88+
}
89+
90+
.multilevelpushmenu_wrapper .cursorPointer {
91+
cursor: pointer;
92+
}
93+
94+
.multilevelpushmenu_wrapper .iconSpacing_ltr {
95+
padding: 0 .4em 0 0;
96+
}
97+
98+
.multilevelpushmenu_wrapper .iconSpacing_rtl {
99+
padding: 0 0 0 .4em;
100+
}

0 commit comments

Comments
 (0)