Skip to content

Commit

Permalink
Add collapsible navigation (#35)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
rvesse committed Jan 19, 2016
1 parent 1ec3562 commit 9fe59bd
Show file tree
Hide file tree
Showing 6 changed files with 1,339 additions and 38 deletions.
36 changes: 33 additions & 3 deletions _includes/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,42 @@
<link rel="stylesheet" href="{{ site.baseurl }}/public/css/syntax.css">
<link rel="stylesheet" href="{{ site.baseurl }}/public/css/hyde.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ site.baseurl}}/public/css/jquery.multilevelpushmenu.css">

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

<!-- Scripts -->
<script src="{{ site.baseurl }}/public/js/jquery.js" type="text/javascript"></script>
</script>
<script src="{{ site.baseurl }}/public/js/jquery.multilevelpushmenu.js"></script>
<script>
$(document).ready(function(){
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#menu' )],
direction: "ltr",
menuWidth: "100%",
menuHeight: "480px",
preventItemClick: false,
mode: "cover",
durationTransition: 0,
backItemIcon: "fa fa-angle-left",
groupIcon: "fa fa-angle-right"
});

// Expand menu to currently selected page if possible
var currMenuItem = $("#menu a[href='" + location.pathname + "']").first();
if (currMenuItem.length > 0) {
//console.log("Current Menu Item:");
//console.log(currMenuItem);
var menuLevelObj = currMenuItem.parents(".levelHolderClass").first();
//console.log("Menu Level Object:");
//console.log(menuLevelObj);
if (menuLevelObj.length > 0) {
$('#menu').multilevelpushmenu('expand', menuLevelObj);
}
}
});
</script>
</head>
76 changes: 50 additions & 26 deletions _includes/nav.html
Original file line number Diff line number Diff line change
@@ -1,29 +1,51 @@
<a class="sidebar-nav-item" href="{{ site.baseurl }}/">Home</a>
<ul>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/">Home</a></li>
<li>
<a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/">User Guide</a>
<ol>
<a href="#">User Guide</a>
<ul>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/">Introduction to Airline</a>
<li>
<a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/">Annotations</a>
<ol>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/command.html">@Command</a></li>
<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>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/cli.html">@Cli</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/parser.html">@Parser</a></li>
<hr />
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/copyright.html">@Copyright</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/discussion.html">@Discussion</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/examples.html">@Examples</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/exit-codes.html">@ExitCodes</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/hide-section.html">@HideSection</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/license.html">@License</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/prose-section.html">@ProseSection</a></li>
<hr />
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/required.html">@Required</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/require-some.html">@RequireSome</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/require-only-one.html">@RequireOnlyOne</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/mutually-exclusive-with.html">@MutuallyExclusiveWith</a></li>
</ol>
<a href="#">Annotations</a>
<ul>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/">Annotations Overview</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/unrestricted.html">@Unrestricted</a></li>
<li>
<a href="#">Meta-data Annotations</a>
<ul>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/command.html">@Command</a></li>
<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>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/cli.html">@Cli</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/parser.html">@Parser</a></li>
</ul>
</li>
<li>
<a href="#">Help Annotations</a>
<ul>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/copyright.html">@Copyright</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/discussion.html">@Discussion</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/examples.html">@Examples</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/exit-codes.html">@ExitCodes</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/hide-section.html">@HideSection</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/license.html">@License</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/prose-section.html">@ProseSection</a></li>
</ul>
</li>
<li>
<a href="#">Restriction Annotations</a>
<ul>
<li>
<a href="#">Requirement Annotations</a>
<ul>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/required.html">@Required</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/require-some.html">@RequireSome</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/require-only-one.html">@RequireOnlyOne</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/annotations/mutually-exclusive-with.html">@MutuallyExclusiveWith</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/parser/">Parser</a>
Expand All @@ -36,12 +58,14 @@
</li>
<li>
<a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/practise/">Airline In Practise</a>
<ol>
<ul>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/practise/oop.html">Inheritance and Composition</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/practise/types.html">Supported Types</a></li>
<li><a class="sidebar-nav-item" href="{{ site.baseurl }}/guide/practise/aliases.html">User Defined Aliases</a></li>
</ol>
</ul>
</li>
</ol>
</ul>
</li>
<li><a class="sidebar-nav-item" href="{{ site.github.repo }}/archive/v{{ site.version }}.zip">Download</a></li>
<li><a class="sidebar-nav-item" href="{{ site.github.repo }}">GitHub project</a></li>
</ul>
15 changes: 8 additions & 7 deletions _includes/sidebar.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,17 @@ <h1>
<p class="lead">{{ site.description }}</p>
</div>

<nav class="sidebar-nav" id="menu">
<div id="menu">
<nav class="sidebar-nav" id="mutlilevelpushmenu_wrapper">
{% include nav.html context=page.url %}
</nav>
</div>

{% include nav.html context=page.url %}

<hr />
<hr />

<a class="sidebar-nav-item" href="{{ site.github.repo }}/archive/v{{ site.version }}.zip">Download</a>
<a class="sidebar-nav-item" href="{{ site.github.repo }}">GitHub project</a>
<div>
<span class="sidebar-nav-item">Current Version: {{ site.version }}</span>
</nav>
</div>

<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>

Expand Down
10 changes: 8 additions & 2 deletions index.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,18 @@ Where `X.Y.Z` is your desired version, the current stable release is `{{ site.ve

## License

Airline is open source software licensed under the [Apache License 2.0](http://apache.org/licenses/LICENSE-2.0)
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.

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

## Acknowledgements

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.

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
This website is built with [Jekyll](http://jekyllrb.com), it uses the following resources:

- [Hyde theme](https://github.com/poole/hyde) by Mark Otto
- [Table of Contents plugin](https://github.com/ghiculescu/jekyll-table-of-contents) by Alex Ghiculescu
- [Multi-Level Push Menu plugin](https://github.com/adgsm/multi-level-push-menu) by Momcilo Dzunic

All resources are licensed under the MIT License
100 changes: 100 additions & 0 deletions public/css/jquery.multilevelpushmenu.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
.multilevelpushmenu_wrapper {
position: absolute;
overflow: hidden;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}

.multilevelpushmenu_wrapper .levelHolderClass {
position: absolute;
overflow: hidden;
top: 0;
background: #6a9fb5;
width: auto;
min-height: 100%;
zoom: 1;
}

.multilevelpushmenu_wrapper .ltr {
margin-left: -100%;
left: 0;
}

.multilevelpushmenu_wrapper .rtl {
margin-right: -100%;
right: 0;
}

.multilevelpushmenu_wrapper .multilevelpushmenu_inactive {
background: #6a9fb5;
}

.multilevelpushmenu_wrapper h2 {
line-height: 1em;
font-weight: bold;
color: #1f4164;
padding: 0 .4em 0 .4em;
}

.multilevelpushmenu_wrapper ul {
list-style: none;
padding: 0;
margin: 0;
}

.multilevelpushmenu_wrapper li {
cursor: pointer;
border: 1px solid #295685;
padding: .4em .4em .4em .4em;
}

.multilevelpushmenu_wrapper li:last-child {

}

.multilevelpushmenu_wrapper li:hover {
background-color: #295685;
}

.multilevelpushmenu_wrapper a {
display: block;
outline: none;
overflow: hidden;
line-height: 1em;
padding: .2em .2em;
text-decoration: none;
color: #fff;
}

.multilevelpushmenu_wrapper a:hover {
color: #ffe;
}

.multilevelpushmenu_wrapper .backItemClass {
display: block;
padding: .4em .4em .4em .4em;
background: #2e6196;
}

.multilevelpushmenu_wrapper .floatRight {
float: right;
}

.multilevelpushmenu_wrapper .floatLeft {
float: left;
margin-right: 5px;
}

.multilevelpushmenu_wrapper .cursorPointer {
cursor: pointer;
}

.multilevelpushmenu_wrapper .iconSpacing_ltr {
padding: 0 .4em 0 0;
}

.multilevelpushmenu_wrapper .iconSpacing_rtl {
padding: 0 0 0 .4em;
}
Loading

0 comments on commit 9fe59bd

Please sign in to comment.