mirror of https://gitlab.com/curben/blog
refactor: re-implement nav menu without javascript
inspired by https://github.com/paulcarl/skelepico-theme
This commit is contained in:
parent
6cd4456d9a
commit
913f9572d7
|
@ -1,17 +1,21 @@
|
|||
<header id="header" class="header">
|
||||
<div class="mobile-nav">
|
||||
<h1 class="nickname"><%= theme.nickname %></h1>
|
||||
<a id="menu">
|
||||
☰ 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>☰ 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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in New Issue