Add basic support for nested menu

* Related issue: #53
This commit is contained in:
Track3 2019-06-22 18:44:30 +08:00
parent c2e02c5dff
commit 00dbd49a94
8 changed files with 39 additions and 8 deletions

View file

@ -145,6 +145,10 @@ table {
height: 1em; height: 1em;
} }
.sub-menu {
font-size: .7em;
}
.desktop-only, .desktop-only-ib { .desktop-only, .desktop-only-ib {
display: none; display: none;
} }
@ -215,6 +219,15 @@ table {
font-size: 1.1em; font-size: 1.1em;
opacity: .8; opacity: .8;
.has-children {
padding-right: .5em;
border-right: 2px solid $highlight-grey;
}
.sub-menu > a{
margin-left: .3em;
}
a { a {
margin-left: .8em; margin-left: .8em;
} }

View file

@ -24,9 +24,7 @@
</div> </div>
{{- end }} {{- end }}
<nav id="home-nav" class="site-nav"> <nav id="home-nav" class="site-nav">
{{- range .Site.Menus.main }} {{ partialCached "menu.html" . }}
<a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
{{- end }}
</nav> </nav>
</div> </div>
<div id="home-footer"> <div id="home-footer">

View file

@ -5,9 +5,7 @@
<a href="{{.Site.BaseURL}}">{{ .Site.Title }}</a> <a href="{{.Site.BaseURL}}">{{ .Site.Title }}</a>
</div> </div>
<nav class="site-nav hide-in-mobile"> <nav class="site-nav hide-in-mobile">
{{- range .Site.Menus.main }} {{ partialCached "menu.html" . }}
<a href="{{ .URL | absLangURL}}">{{ .Name }}</a>
{{- end }}
</nav> </nav>
</div> </div>
<div class="hdr-right hdr-icons"> <div class="hdr-right hdr-icons">

View file

@ -0,0 +1,12 @@
{{- range .Site.Menus.main }}
{{- if .HasChildren }}
<a href="{{ .URL | absLangURL }}" class="has-children">{{ .Name }}</a>
<span class="sub-menu">
{{- range .Children }}
<a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
{{- end }}
</span>
{{- else }}
<a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
{{- end }}
{{- end }}

View file

@ -0,0 +1,9 @@
const throttle=(callback,limit)=>{let timeoutHandler=null;return()=>{if(timeoutHandler==null){timeoutHandler=setTimeout(()=>{callback();timeoutHandler=null;},limit);}};};const listen=(ele,e,callback)=>{if(document.querySelector(ele)!==null){document.querySelector(ele).addEventListener(e,callback);}}
let header=document.getElementById('site-header');let lastScrollPosition=window.pageYOffset;const autoHideHeader=()=>{let currentScrollPosition=Math.max(window.pageYOffset,0);if(currentScrollPosition>lastScrollPosition){header.classList.remove('slideInUp');header.classList.add('slideOutDown');}else{header.classList.remove('slideOutDown');header.classList.add('slideInUp');}
lastScrollPosition=currentScrollPosition;}
let mobileMenuVisible=false;const toggleMobileMenu=()=>{let mobileMenu=document.getElementById('mobile-menu');if(mobileMenuVisible==false){mobileMenu.style.animationName='bounceInRight';mobileMenu.style.webkitAnimationName='bounceInRight';mobileMenu.style.display='block';mobileMenuVisible=true;}else{mobileMenu.style.animationName='bounceOutRight';mobileMenu.style.webkitAnimationName='bounceOutRight'
mobileMenuVisible=false;}}
const showImg=()=>{document.querySelector('.bg-img').classList.add('show-bg-img');}
const hideImg=()=>{document.querySelector('.bg-img').classList.remove('show-bg-img');}
const toggleToc=()=>{document.getElementById('toc').classList.toggle('show-toc');}
if(header!==null){listen('#menu-btn',"click",toggleMobileMenu);listen('#toc-btn',"click",toggleToc);listen('#img-btn',"click",showImg);listen('.bg-img',"click",hideImg);document.querySelectorAll('.post-year').forEach((ele)=>{ele.addEventListener('click',()=>{window.location.hash='#'+ele.id;});});window.addEventListener('scroll',throttle(()=>{autoHideHeader();if(mobileMenuVisible==true){toggleMobileMenu();}},250));}

View file

@ -0,0 +1 @@
{"Target":"js/main.min.35ccbf1cdceb91e4c64c06b5d009d6e2977fafe56beda7762febd4e67528d2ac.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-Ncy/HNzrkeTGTAa10AnW4pd/r+Vr7ad2L+vU5nUo0qw="}}

File diff suppressed because one or more lines are too long

View file

@ -1 +1 @@
{"Target":"css/style.min.183d31ccbed0fd59293d435028691de8635f709926a69d5df7c744cc5ebf42a3.css","MediaType":"text/css","Data":{"Integrity":"sha256-GD0xzL7Q/VkpPUNQKGkd6GNfcJkmpp1d98dEzF6/QqM="}} {"Target":"css/style.min.568c54a56780af2a70c45272522247710b69dbfc080b315211fb98381e3796f8.css","MediaType":"text/css","Data":{"Integrity":"sha256-VoxUpWeArypwxFJyUiJHcQtp2/wICzFSEfuYOB43lvg="}}