Skip to content

Commit 4fe6997

Browse files
daattalidaattali
committed
support menus in navbar
1 parent 1d3b3e2 commit 4fe6997

File tree

4 files changed

+116
-26
lines changed

4 files changed

+116
-26
lines changed

‎_config.yml

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# --- Serving options --- #
1+
# --- General options --- #
22

33
# url is the full website URL
44
# baseurl is the website's URL without the hostname
@@ -21,16 +21,19 @@ description: A virtual proof that name is awesome!
2121

2222
# --- Navigation bar options --- #
2323

24-
# Image to show in the navigation bar - image must be a square (width = height)
25-
# Remove this parameter if you don't want an image in the navbar
26-
avatar: "/img/avatar-icon.png"
27-
2824
# List of links in the navigation bar
2925
navbar-links:
30-
Home: ""
3126
About Me: "aboutme"
27+
Resources:
28+
- Beautiful Jekyll: "http://deanattali.com/beautiful-jekyll/"
29+
- Learn markdown: "http://www.markdowntutorial.com/"
30+
- GitHub Pages: "https://pages.github.com/"
3231
Author's home: "http://deanattali.com"
33-
32+
33+
# Image to show in the navigation bar - image must be a square (width = height)
34+
# Remove this parameter if you don't want an image in the navbar
35+
avatar: "/img/avatar-icon.png"
36+
3437
# --- Footer options --- #
3538

3639
# Change all these values or delete the ones you don't want.

‎_includes/nav.html

Lines changed: 45 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,54 @@
1212

1313
<div class="collapse navbar-collapse" id="main-navbar">
1414
<ul class="nav navbar-nav navbar-right">
15-
{% for link in site.navbar-links %}
16-
{% capture before %}{{ link[1] | split: "://" | first }}{% endcapture %}
17-
{% capture after %}{{ link[1] | split: "://" | last }}{% endcapture %}
18-
<li>
19-
{% assign internal = true %}
20-
{% if before != after %}
21-
{% if before == "http" or before == "https" %}
22-
{% assign internal = false %}
15+
{% for link in site.navbar-links %}
16+
{% if link[1].first %}
17+
<li class="navlinks-container">
18+
<a class="navlinks-parent" href="javascript:void(0)">{{ link[0] }}</a>
19+
<div class="navlinks-children">
20+
{% for childlink in link[1] %}
21+
{% for linkparts in childlink %}
22+
{% capture before %}{{ linkparts[1] | split: "://" | first }}{% endcapture %}
23+
{% capture after %}{{ linkparts[1] | split: "://" | last }}{% endcapture %}
24+
{% assign internal = true %}
25+
{% if before != after %}
26+
{% if before == "http" or before == "https" %}
27+
{% assign internal = false %}
28+
{% endif %}
29+
{% endif %}
30+
31+
{% if internal %}
32+
{% capture linkurl %}{{ site.baseurl }}/{{ linkparts[1] }}{% endcapture %}
33+
{% else %}
34+
{% capture linkurl %}{{ linkparts[1] }}{% endcapture %}
35+
{% endif %}
36+
37+
<a href="{{ linkurl }}">{{ linkparts[0] }}</a>
38+
{% endfor %}
39+
{% endfor %}
40+
</div>
41+
</li>
42+
{% else %}
43+
<li>
44+
{% capture before %}{{ link[1] | split: "://" | first }}{% endcapture %}
45+
{% capture after %}{{ link[1] | split: "://" | last }}{% endcapture %}
46+
{% assign internal = true %}
47+
{% if before != after %}
48+
{% if before == "http" or before == "https" %}
49+
{% assign internal = false %}
50+
{% endif %}
2351
{% endif %}
24-
{% endif %}
2552

26-
{% if internal %}
27-
{% capture linkurl %}{{ site.baseurl }}/{{ link[1] }}{% endcapture %}
28-
{% else %}
29-
{% capture linkurl %}{{ link[1] }}{% endcapture %}
30-
{% endif %}
53+
{% if internal %}
54+
{% capture linkurl %}{{ site.baseurl }}/{{ link[1] }}{% endcapture %}
55+
{% else %}
56+
{% capture linkurl %}{{ link[1] }}{% endcapture %}
57+
{% endif %}
3158

32-
<a href="{{ linkurl }}">{{ link[0] }}</a>
33-
</li>
34-
{% endfor %}
59+
<a href="{{ linkurl }}">{{ link[0] }}</a>
60+
</li>
61+
{% endif %}
62+
{% endfor %}
3563
</ul>
3664
</div>
3765

‎css/main.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,53 @@ img {
182182
}
183183
}
184184

185+
/* Multi-level navigation links */
186+
.navbar-custom .nav .navlinks-container {
187+
position: relative;
188+
}
189+
.navbar-custom .nav .navlinks-parent:after {
190+
content: " \25BC";
191+
}
192+
.navbar-custom .nav .navlinks-children {
193+
width: 100%;
194+
display: none;
195+
word-break: break-word;
196+
}
197+
.navbar-custom .nav .navlinks-container .navlinks-children a {
198+
display: block;
199+
padding: 10px;
200+
padding-left: 30px;
201+
background: #f5f5f5;
202+
text-decoration: none !important;
203+
border-width: 0 1px 1px 1px;
204+
font-weight: normal;
205+
}
206+
@media only screen and (max-width: 767px) {
207+
.navbar-custom .nav .navlinks-container.show-children {
208+
background: #eee;
209+
}
210+
.navbar-custom .nav .navlinks-container.show-children .navlinks-children {
211+
display: block;
212+
}
213+
}
214+
@media only screen and (min-width: 768px) {
215+
.navbar-custom .nav .navlinks-container:hover {
216+
background: #eee;
217+
}
218+
.navbar-custom .nav .navlinks-container:hover .navlinks-children {
219+
display: block;
220+
}
221+
.navbar-custom .nav .navlinks-children {
222+
position: absolute;
223+
text-align: center;
224+
}
225+
.navbar-custom .nav .navlinks-container .navlinks-children a {
226+
padding-left: 10px;
227+
border: 1px solid #eaeaea;
228+
border-width: 0 1px 1px;
229+
}
230+
}
231+
185232
/* --- Footer --- */
186233

187234
footer {

‎js/main.js

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,21 @@ $(window).scroll(function() {
1212
// On mobile, hide the avatar when expanding the navbar menu
1313
$('#main-navbar').on('show.bs.collapse', function () {
1414
$(".navbar").addClass("top-nav-expanded");
15-
})
15+
});
1616
$('#main-navbar').on('hidden.bs.collapse', function () {
1717
$(".navbar").removeClass("top-nav-expanded");
18-
})
18+
});
19+
20+
// On mobile, when clicking on a multi-level navbar menu, show the child links
21+
$('#main-navbar').on("click", ".navlinks-parent", function(e) {
22+
var target = e.target;
23+
$.each($(".navlinks-parent"), function(key, value) {
24+
if (value == target) {
25+
$(value).parent().toggleClass("show-children");
26+
} else {
27+
$(value).parent().removeClass("show-children");
28+
}
29+
});
30+
});
1931

2032
// 2fc73a3a967e97599c9763d05e564189

0 commit comments

Comments
 (0)