Support menus in navbar

4fe69971e3
This commit is contained in:
Michael Romero 2016-03-29 00:12:58 -07:00
parent 05fdb21fdb
commit c9e4340676
4 changed files with 77 additions and 7 deletions

View File

@ -13,10 +13,21 @@
<div class="collapse navbar-collapse" id="main-navbar"> <div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
{{ range .Site.Menus.main.ByWeight }} {{ range .Site.Menus.main.ByWeight }}
{{ if .HasChildren }}
<li class="navlinks-container">
<a class="navlinks-parent" href="javascript:void(0)">{{ .Name }}</a>
<div class="navlinks-children">
{{ range .Children }}
<a href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
</div>
</li>
{{ else }}
<li> <li>
<a title="{{ .Name }}" href="{{ .URL }}">{{ .Name }}</a> <a title="{{ .Name }}" href="{{ .URL }}">{{ .Name }}</a>
</li> </li>
{{ end }} {{ end }}
{{ end }}
</ul> </ul>
</div> </div>

View File

@ -182,6 +182,53 @@ img {
} }
} }
/* Multi-level navigation links */
.navbar-custom .nav .navlinks-container {
position: relative;
}
.navbar-custom .nav .navlinks-parent:after {
content: " \25BC";
}
.navbar-custom .nav .navlinks-children {
width: 100%;
display: none;
word-break: break-word;
}
.navbar-custom .nav .navlinks-container .navlinks-children a {
display: block;
padding: 10px;
padding-left: 30px;
background: #f5f5f5;
text-decoration: none !important;
border-width: 0 1px 1px 1px;
font-weight: normal;
}
@media only screen and (max-width: 767px) {
.navbar-custom .nav .navlinks-container.show-children {
background: #eee;
}
.navbar-custom .nav .navlinks-container.show-children .navlinks-children {
display: block;
}
}
@media only screen and (min-width: 768px) {
.navbar-custom .nav .navlinks-container:hover {
background: #eee;
}
.navbar-custom .nav .navlinks-container:hover .navlinks-children {
display: block;
}
.navbar-custom .nav .navlinks-children {
position: absolute;
text-align: center;
}
.navbar-custom .nav .navlinks-container .navlinks-children a {
padding-left: 10px;
border: 1px solid #eaeaea;
border-width: 0 1px 1px;
}
}
/* --- Footer --- */ /* --- Footer --- */
footer { footer {

View File

@ -12,9 +12,21 @@ $(window).scroll(function() {
// On mobile, hide the avatar when expanding the navbar menu // On mobile, hide the avatar when expanding the navbar menu
$('#main-navbar').on('show.bs.collapse', function () { $('#main-navbar').on('show.bs.collapse', function () {
$(".navbar").addClass("top-nav-expanded"); $(".navbar").addClass("top-nav-expanded");
}) });
$('#main-navbar').on('hidden.bs.collapse', function () { $('#main-navbar').on('hidden.bs.collapse', function () {
$(".navbar").removeClass("top-nav-expanded"); $(".navbar").removeClass("top-nav-expanded");
}) });
// On mobile, when clicking on a multi-level navbar menu, show the child links
$('#main-navbar').on("click", ".navlinks-parent", function(e) {
var target = e.target;
$.each($(".navlinks-parent"), function(key, value) {
if (value == target) {
$(value).parent().toggleClass("show-children");
} else {
$(value).parent().removeClass("show-children");
}
});
});
// 2fc73a3a967e97599c9763d05e564189 // 2fc73a3a967e97599c9763d05e564189

View File

@ -4,7 +4,7 @@ licenselink = "https://github.com/halogenica/Hugo-BeautifulHugo/blob/master/LICE
description = "A port of Beautiful Jekyll theme" description = "A port of Beautiful Jekyll theme"
tags = ["blog", "company", "portfolio", "projects", "minimal", "responsive"] tags = ["blog", "company", "portfolio", "projects", "minimal", "responsive"]
features = ["blog", "themes", "disqus", "minimal", "responsive"] features = ["blog", "themes", "disqus", "minimal", "responsive"]
min_version = 0.14 min_version = 0.15
[author] [author]
name = "halogenica" name = "halogenica"