diff --git a/_config.yml b/_config.yml
index e34089e..6d0cecf 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,4 +1,4 @@
-# --- Serving options --- #
+# --- General options --- #
# url is the full website URL
# baseurl is the website's URL without the hostname
@@ -21,16 +21,19 @@ description: A virtual proof that name is awesome!
# --- Navigation bar options --- #
+# List of links in the navigation bar
+navbar-links:
+ About Me: "aboutme"
+ Resources:
+ - Beautiful Jekyll: "http://deanattali.com/beautiful-jekyll/"
+ - Learn markdown: "http://www.markdowntutorial.com/"
+ - GitHub Pages: "https://pages.github.com/"
+ Author's home: "http://deanattali.com"
+
# Image to show in the navigation bar - image must be a square (width = height)
# Remove this parameter if you don't want an image in the navbar
avatar: "/img/avatar-icon.png"
-# List of links in the navigation bar
-navbar-links:
- Home: ""
- About Me: "aboutme"
- Author's home: "http://deanattali.com"
-
# --- Footer options --- #
# Change all these values or delete the ones you don't want.
diff --git a/_includes/nav.html b/_includes/nav.html
index 9d543d2..eaf91c8 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -12,26 +12,54 @@
- {% for link in site.navbar-links %}
- {% capture before %}{{ link[1] | split: "://" | first }}{% endcapture %}
- {% capture after %}{{ link[1] | split: "://" | last }}{% endcapture %}
- -
- {% assign internal = true %}
- {% if before != after %}
- {% if before == "http" or before == "https" %}
- {% assign internal = false %}
- {% endif %}
- {% endif %}
-
- {% if internal %}
- {% capture linkurl %}{{ site.baseurl }}/{{ link[1] }}{% endcapture %}
+ {% for link in site.navbar-links %}
+ {% if link[1].first %}
+
-
+ {{ link[0] }}
+
+ {% for childlink in link[1] %}
+ {% for linkparts in childlink %}
+ {% capture before %}{{ linkparts[1] | split: "://" | first }}{% endcapture %}
+ {% capture after %}{{ linkparts[1] | split: "://" | last }}{% endcapture %}
+ {% assign internal = true %}
+ {% if before != after %}
+ {% if before == "http" or before == "https" %}
+ {% assign internal = false %}
+ {% endif %}
+ {% endif %}
+
+ {% if internal %}
+ {% capture linkurl %}{{ site.baseurl }}/{{ linkparts[1] }}{% endcapture %}
+ {% else %}
+ {% capture linkurl %}{{ linkparts[1] }}{% endcapture %}
+ {% endif %}
+
+
{{ linkparts[0] }}
+ {% endfor %}
+ {% endfor %}
+
+
{% else %}
- {% capture linkurl %}{{ link[1] }}{% endcapture %}
- {% endif %}
+ -
+ {% capture before %}{{ link[1] | split: "://" | first }}{% endcapture %}
+ {% capture after %}{{ link[1] | split: "://" | last }}{% endcapture %}
+ {% assign internal = true %}
+ {% if before != after %}
+ {% if before == "http" or before == "https" %}
+ {% assign internal = false %}
+ {% endif %}
+ {% endif %}
- {{ link[0] }}
-
- {% endfor %}
+ {% if internal %}
+ {% capture linkurl %}{{ site.baseurl }}/{{ link[1] }}{% endcapture %}
+ {% else %}
+ {% capture linkurl %}{{ link[1] }}{% endcapture %}
+ {% endif %}
+
+ {{ link[0] }}
+
+ {% endif %}
+ {% endfor %}
diff --git a/css/main.css b/css/main.css
index d601ced..dc3d6e1 100644
--- a/css/main.css
+++ b/css/main.css
@@ -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 {
diff --git a/js/main.js b/js/main.js
index c7009de..c31692d 100644
--- a/js/main.js
+++ b/js/main.js
@@ -12,9 +12,21 @@ $(window).scroll(function() {
// On mobile, hide the avatar when expanding the navbar menu
$('#main-navbar').on('show.bs.collapse', function () {
$(".navbar").addClass("top-nav-expanded");
-})
+});
$('#main-navbar').on('hidden.bs.collapse', function () {
$(".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