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 @@ 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