Collapse inactive navigation menus

Use javascript to hide all inactive menu items and only show one active menu item at a time.

Collapse inactive navigation menus
Use javascript to hide all inactive menu items and only show one active menu item at a time.
26063c1d · Tobias Schmidt · ce7b754f · 26063c1d · 26063c1d · 26063c1d
Commit 26063c1d authored Mar 29, 2016 by Tobias Schmidt
Hide whitespace changes
Inline Side-by-side

Showing with 39 additions and 13 deletions

header.html layouts/header.html +2 -5

nav.rb lib/helpers/nav.rb +6 -4

docs.css static/docs.css +9 -4

docs.js static/docs.js +22 -0

No files found.
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -45,11 +45,8 @@
    <link href="/assets/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">

-    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
-    <!--[if lt IE 9]>
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-    <![endif]-->
+    <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
+    <script src="/assets/docs.js"></script>
  </head>

  <body>

--- a/lib/helpers/nav.rb
+++ b/lib/helpers/nav.rb
 def nav(root_item, buffer='', layer=0)
  return buffer if root_item.nil? || root_item.path.nil? || root_item[:is_hidden]

+  children = nav_children(root_item)
+
  if nav_active?(root_item)
    buffer << "<li class=\"active\">"
  else
@@ -9,14 +11,13 @@ def nav(root_item, buffer='', layer=0)

  title = nav_title_of(root_item)
  if layer == 0
-    buffer << "<span class=\"nav-header\"><i class=\"fa fa-#{root_item[:nav_icon]}\"></i> #{title}</span>"
+    buffer << "<span class=\"nav-header\"><i class=\"fa fa-#{root_item[:nav_icon]}\"></i> <span>#{title}</span></span>"
  else
    buffer << link_to(title, root_item.path)
  end

-  children = nav_children(root_item)
  if children.any?
-    buffer << '<ul class="nav">'
+    buffer << %(<ul class="nav #{nav_active?(root_item) ? 'active' : ''}">)

    children.each do |child|
      nav(child, buffer, layer + 1)
@@ -30,7 +31,8 @@ def nav(root_item, buffer='', layer=0)
 end

 def nav_active?(item)
-  @item_rep.respond_to?(:path) && @item_rep.path == item.path
+  active = @item_rep.respond_to?(:path) && @item_rep.path == item.path
+  active || nav_children(item).any? { |child| nav_active?(child) }
 end

 def nav_title_of(i)

--- a/static/docs.css
+++ b/static/docs.css
@@ -90,6 +90,7 @@ a.sc-logo img {
 }

 .side-nav .fa {
+  width: 20px;
  color: #555;
 }

@@ -102,14 +103,18 @@ a.sc-logo img {
 }

 .side-nav .nav-header {
-  color: #e6522c;
-  text-transform: uppercase;
-  font-size: 16px;
  display: block;
  margin: 20px auto 15px auto;
+  font-size: 16px;
+}
+
+.side-nav .nav-header a, .side-nav .nav-header span {
+  color: #e6522c;
+  text-transform: uppercase;
+  text-decoration: none;
 }

-.side-nav .active {
+.side-nav ul.active li.active {
  border-left: 3px solid #e6522c;
  margin-left: -2px;
  font-weight: bold;

--- a/static/docs.js
+++ b/static/docs.js
+// Use CSS to hide elements without a delay during page load.
+$('head').append('<style type="text/css"> \
+  .side-nav ul { display: none; } \
+  .side-nav ul.active { display: block; } \
+</style>');
+
+$(document).ready(function() {
+  var navToggle = function(event) {
+    event.preventDefault();
+
+    var visible = $(this).closest('li').children('ul.nav').is(':visible');
+    $(this).closest('ul').find('ul.nav').slideUp(200);
+    if (!visible) {
+      $(this).closest('li').children('ul.nav').slideDown(200);
+    }
+  };
+
+  $('.nav-header span').each(function() {
+    var link = $('<a href="#">').text($(this).text()).click(navToggle);
+    $(this).replaceWith(link);
+  });
+});