✨ Add a responsive mobile navigation menu.
This commit is contained in:
Covey
parent
f5fd201aa8
commit
33c59f8c49
@ -16,9 +16,10 @@
|
||||
max-width: 1200px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main {
|
||||
flex: 1 0 auto;
|
||||
@ -33,6 +34,7 @@
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 4rem;
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,27 +1,143 @@
|
||||
@media (max-width: 767px) {
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
|
||||
.navbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.archive-item-date{
|
||||
display: none;
|
||||
.navbar-mobile {
|
||||
display: block !important;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
transition: all 0.6s ease 0s;
|
||||
.container {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 5em;
|
||||
line-height: 5.5em;
|
||||
background: #ffffff;
|
||||
.navbar-header {
|
||||
width: 100%;
|
||||
padding-right: 1em;
|
||||
padding-left: 1em;
|
||||
box-sizing: border-box;
|
||||
.menu-toggle {
|
||||
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
height: 5em;
|
||||
line-height: 5.5em;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
background: #000;
|
||||
width: 36px;
|
||||
height: 2px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: .25s margin .25s, .25s transform;
|
||||
-moz-transition: .25s margin .25s, .25s transform;
|
||||
transition: .25s margin .25s, .25s transform;
|
||||
}
|
||||
|
||||
span:nth-child(1) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
span:nth-child(3) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
span {
|
||||
-webkit-transition: .25s margin, .25s transform .25s;
|
||||
-moz-transition: .25s margin, .25s transform .25s;
|
||||
transition: .25s margin, .25s transform .25s;
|
||||
}
|
||||
span:nth-child(1) {
|
||||
-moz-transform: rotate(45deg) translate(4px, 6px);
|
||||
-ms-transform: rotate(45deg) translate(4px, 6px);
|
||||
-webkit-transform: rotate(45deg) translate(4px, 6px);
|
||||
transform: rotate(45deg) translate(4px, 6px);
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
span:nth-child(3) {
|
||||
-moz-transform: rotate(-45deg) translate(8px, -10px);
|
||||
-ms-transform: rotate(-45deg) translate(8px, -10px);
|
||||
-webkit-transform: rotate(-45deg) translate(8px, -10px);
|
||||
transform: rotate(-45deg) translate(8px, -10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
border-top: 2px solid #000000;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
display: none;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
|
||||
a {
|
||||
display: block;
|
||||
line-height: 2.5em;
|
||||
}
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#dynamic-to-top {
|
||||
display: none !important;
|
||||
}
|
||||
.footer {
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
#dynamic-to-top{
|
||||
bottom: 3em;
|
||||
right: 4em;
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
.post-warp {
|
||||
.categories-card {
|
||||
.card-item {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
padding-top: 6em;
|
||||
.archive-item-date {
|
||||
display: none;
|
||||
}
|
||||
.categories-card {
|
||||
.card-item {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* iPads (portrait and landscape) ----------- */
|
||||
|
||||
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
|
||||
|
||||
|
||||
|
||||
/* Desktops and laptops ----------- */
|
||||
|
||||
@media only screen and (min-width: 1224px) {
|
||||
.navbar-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Large screens ----------- */
|
||||
|
||||
@media only screen and (min-width: 1824px) {
|
||||
/* Styles */
|
||||
}
|
||||
@ -1,7 +1,5 @@
|
||||
|
||||
.navbar-header {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.header-logo a{
|
||||
padding: 0 ;
|
||||
@ -11,10 +9,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
float: right !important;
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
.navbar .menu a {
|
||||
|
||||
|
||||
@ -29,6 +29,16 @@ _Blog.toggleTheme = function() {
|
||||
})
|
||||
}
|
||||
|
||||
_Blog.toggleMobileMenu = function(){
|
||||
const menuToggle = document.querySelector('.menu-toggle')
|
||||
const mobileMenu = document.querySelector('#mobile-menu')
|
||||
menuToggle.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('active')
|
||||
menuToggle.classList.toggle('active')
|
||||
})
|
||||
}
|
||||
|
||||
_Blog.toggleTheme()
|
||||
_Blog.changeTitle()
|
||||
_Blog.toggleMobileMenu()
|
||||
}());
|
||||
@ -10,4 +10,21 @@
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="navbar-mobile" id="nav-mobile" style="display: none">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a href="{{ "/" | absURL}}">LiuZhichao</a>
|
||||
<button class="menu-toggle">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="menu" id="mobile-menu">
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
<a class="menu-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
Loading…
Reference in New Issue
Block a user