refactor: re-implement nav menu without javascript

inspired by https://github.com/paulcarl/skelepico-theme
This commit is contained in:
curben 2018-11-06 17:02:15 +10:30
parent 6cd4456d9a
commit 913f9572d7
3 changed files with 47 additions and 69 deletions

View File

@ -1,17 +1,21 @@
<header id="header" class="header">
<div class="mobile-nav">
<h1 class="nickname"><%= theme.nickname %></h1>
<a id="menu">
&#9776; Menu
</a>
</div>
<% if (theme.nav === 'left') { %>
<nav id="main-nav" class="main-nav nav-left">
<% } else { %>
<nav id="main-nav" class="main-nav">
<% } %>
<%/* Nav menu for desktop */%>
<nav id="main-nav" class="main-nav <% if (theme.nav === 'left') { %>nav-left<% } %>">
<% for (let i in theme.menu) { %>
<a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
<% } %>
</nav>
<%/* Nav menu for mobile */%>
<nav class="mobile-nav">
<h1 class="nickname"><%= theme.nickname %></h1>
<ul id="mobile-nav-menu">
<label for="menu-toggle"><a>&#9776; Menu</a></label>
<input type="checkbox" id="menu-toggle"/>
<ul id="menu">
<% for (let i in theme.menu) { %>
<a href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
<% } %>
</ul>
</ul>
</nav>
</header>

View File

@ -1077,6 +1077,19 @@ pre .javascript .function,pre .keyword {
color: #8959a8;
}
/* hide mobile nav menu and its checkbox */
/* when it's not mobile */
.mobile-nav,#menu-toggle,#menu{
display: none
}
/* align the text (in nav menu) to right */
/* set line-height in /archives page */
#mobile-nav-menu{
text-align: right;
line-height: 1.8
}
@media (max-width:768px) {
body {
font-size: 1.2em;
@ -1098,20 +1111,27 @@ pre .javascript .function,pre .keyword {
width: 80%;
}
.nav-left {
position: relative;
left: auto;
text-align: initial;
}
.nav-left .main-nav-link {
display: inline-block;
padding-bottom: 5px;
}
.header-hr-left {
display: block;
}
/* hide desktop nav */
.main-nav{
display:none
}
/* display mobile nav */
.mobile-nav{
display:flex;
align-items:center;
justify-content:space-between
}
/* display links when menu button is clicked */
/* use grid to display each link in new line */
#menu-toggle:checked + #menu{
display:grid
}
}
@media (max-width:468px) {
@ -1134,36 +1154,6 @@ pre .javascript .function,pre .keyword {
.archive-container .archive-article-header>a,.archive-container .archive-article-header>h1 {
width: 100%;
}
.mobile-nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.main-nav {
display: none;
position: absolute;
background-color: #fff;
width: 50%;
padding: 20px;
border: 2px solid #777;
box-shadow: 5px 5px 5px #777;
}
.main-nav .main-nav-link {
display: block;
padding-bottom: 10px;
}
.article .nav-left {
position: absolute;
}
.article .nav-left .main-nav-link {
display: block;
padding-bottom: 10px;
}
}
@media (max-width:320px) {

View File

@ -56,21 +56,5 @@
event.trigger.textContent = 'Copy'
}, 2000)
})
// Navigation menu
$('#menu').click(function (event) {
var nav = $('#main-nav')
nav.toggle('fast')
})
// Show navigation button for smaller screen
$(window).resize(function () {
var viewportWidth = $(window).width()
if (viewportWidth > 468) {
$('#main-nav').show('fast')
} else {
$('#main-nav').hide('fast')
}
})
})
})(jQuery)