Commit 26063c1d authored by Tobias Schmidt's avatar Tobias Schmidt

Collapse inactive navigation menus

Use javascript to hide all inactive menu items and only show one active
menu item at a time.
parent ce7b754f
...@@ -45,11 +45,8 @@ ...@@ -45,11 +45,8 @@
<link href="/assets/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <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"> <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 --> <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<!--[if lt IE 9]> <script src="/assets/docs.js"></script>
<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]-->
</head> </head>
<body> <body>
......
def nav(root_item, buffer='', layer=0) def nav(root_item, buffer='', layer=0)
return buffer if root_item.nil? || root_item.path.nil? || root_item[:is_hidden] return buffer if root_item.nil? || root_item.path.nil? || root_item[:is_hidden]
children = nav_children(root_item)
if nav_active?(root_item) if nav_active?(root_item)
buffer << "<li class=\"active\">" buffer << "<li class=\"active\">"
else else
...@@ -9,14 +11,13 @@ def nav(root_item, buffer='', layer=0) ...@@ -9,14 +11,13 @@ def nav(root_item, buffer='', layer=0)
title = nav_title_of(root_item) title = nav_title_of(root_item)
if layer == 0 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 else
buffer << link_to(title, root_item.path) buffer << link_to(title, root_item.path)
end end
children = nav_children(root_item)
if children.any? if children.any?
buffer << '<ul class="nav">' buffer << %(<ul class="nav #{nav_active?(root_item) ? 'active' : ''}">)
children.each do |child| children.each do |child|
nav(child, buffer, layer + 1) nav(child, buffer, layer + 1)
...@@ -30,7 +31,8 @@ def nav(root_item, buffer='', layer=0) ...@@ -30,7 +31,8 @@ def nav(root_item, buffer='', layer=0)
end end
def nav_active?(item) 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 end
def nav_title_of(i) def nav_title_of(i)
......
...@@ -90,6 +90,7 @@ a.sc-logo img { ...@@ -90,6 +90,7 @@ a.sc-logo img {
} }
.side-nav .fa { .side-nav .fa {
width: 20px;
color: #555; color: #555;
} }
...@@ -102,14 +103,18 @@ a.sc-logo img { ...@@ -102,14 +103,18 @@ a.sc-logo img {
} }
.side-nav .nav-header { .side-nav .nav-header {
color: #e6522c;
text-transform: uppercase;
font-size: 16px;
display: block; display: block;
margin: 20px auto 15px auto; 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; border-left: 3px solid #e6522c;
margin-left: -2px; margin-left: -2px;
font-weight: bold; font-weight: bold;
......
// 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);
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment