Skip to content

Commit 33c59f8

Browse files
liuzcliuzc
committed
✨ Add a responsive mobile navigation menu.
1 parent f5fd201 commit 33c59f8

File tree

5 files changed

+163
-24
lines changed

5 files changed

+163
-24
lines changed

‎assets/css/_common/_core/layout.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@
1616
max-width: 1200px;
1717
text-align: center;
1818
margin: 0 auto;
19+
display: flex;
20+
justify-content: space-between;
1921
}
2022
}
21-
2223

2324
.main {
2425
flex: 1 0 auto;
@@ -33,6 +34,7 @@
3334
width: 100%;
3435
text-align: center;
3536
line-height: 4rem;
37+
padding-top: 2em;
3638
}
3739

3840

‎assets/css/_common/_core/media.scss

Lines changed: 132 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,143 @@
1-
@media (max-width: 767px) {
1+
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
2+
.navbar {
3+
display: none;
4+
}
5+
6+
.navbar-mobile {
7+
display: block !important;
8+
position: fixed;
9+
width: 100%;
10+
z-index: 100;
11+
transition: all 0.6s ease 0s;
12+
.container {
13+
padding: 0;
14+
margin: 0;
15+
height: 5em;
16+
line-height: 5.5em;
17+
background: #ffffff;
18+
.navbar-header {
19+
width: 100%;
20+
padding-right: 1em;
21+
padding-left: 1em;
22+
box-sizing: border-box;
23+
.menu-toggle {
24+
25+
float: right;
26+
cursor: pointer;
27+
height: 5em;
28+
line-height: 5.5em;
29+
30+
span {
31+
display: block;
32+
background: #000;
33+
width: 36px;
34+
height: 2px;
35+
-webkit-border-radius: 3px;
36+
-moz-border-radius: 3px;
37+
border-radius: 3px;
38+
-webkit-transition: .25s margin .25s, .25s transform;
39+
-moz-transition: .25s margin .25s, .25s transform;
40+
transition: .25s margin .25s, .25s transform;
41+
}
42+
43+
span:nth-child(1) {
44+
margin-bottom: 8px;
45+
}
46+
span:nth-child(3) {
47+
margin-top: 8px;
48+
}
49+
50+
&.active {
51+
span {
52+
-webkit-transition: .25s margin, .25s transform .25s;
53+
-moz-transition: .25s margin, .25s transform .25s;
54+
transition: .25s margin, .25s transform .25s;
55+
}
56+
span:nth-child(1) {
57+
-moz-transform: rotate(45deg) translate(4px, 6px);
58+
-ms-transform: rotate(45deg) translate(4px, 6px);
59+
-webkit-transform: rotate(45deg) translate(4px, 6px);
60+
transform: rotate(45deg) translate(4px, 6px);
61+
}
262

3-
.archive-item-date{
4-
display: none;
63+
span:nth-child(2) {
64+
opacity: 0
65+
}
66+
67+
span:nth-child(3) {
68+
-moz-transform: rotate(-45deg) translate(8px, -10px);
69+
-ms-transform: rotate(-45deg) translate(8px, -10px);
70+
-webkit-transform: rotate(-45deg) translate(8px, -10px);
71+
transform: rotate(-45deg) translate(8px, -10px);
72+
}
73+
}
74+
}
75+
}
76+
77+
.menu {
78+
text-align: center;
79+
background: #ffffff;
80+
border-top: 2px solid #000000;
81+
padding-top: 1em;
82+
padding-bottom: 1em;
83+
display: none;
84+
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
85+
a {
86+
display: block;
87+
line-height: 2.5em;
88+
}
89+
90+
&.active {
91+
display: block;
92+
}
93+
}
94+
}
95+
}
96+
97+
#dynamic-to-top {
98+
display: none !important;
599
}
6100
.footer {
7-
height: 3rem;
8-
width: 100%;
9-
text-align: center;
10-
line-height: 1.5rem;
101+
height: 3rem;
102+
width: 100%;
103+
text-align: center;
104+
line-height: 1.5rem;
105+
padding-top: 2em;
11106
}
12107

13-
#dynamic-to-top{
14-
bottom: 3em;
15-
right: 4em;
108+
.post-warp {
109+
padding-top: 6em;
110+
.archive-item-date {
111+
display: none;
112+
}
113+
.categories-card {
114+
.card-item {
115+
width: 95%;
116+
}
117+
}
16118
}
119+
}
17120

18-
.post-warp {
19-
.categories-card {
20-
.card-item {
21-
width: 95%;
22-
}
23-
}
121+
122+
123+
/* iPads (portrait and landscape) ----------- */
124+
125+
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
126+
127+
128+
129+
/* Desktops and laptops ----------- */
130+
131+
@media only screen and (min-width: 1224px) {
132+
.navbar-mobile {
133+
display: none;
24134
}
25135
}
26136

27137

138+
139+
/* Large screens ----------- */
140+
141+
@media only screen and (min-width: 1824px) {
142+
/* Styles */
143+
}

‎assets/css/_common/_section/navbar.scss

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11

2-
.navbar-header {
3-
float: left;
4-
}
2+
53

64
.header-logo a{
75
padding: 0 ;
@@ -11,10 +9,6 @@
119
}
1210
}
1311

14-
.navbar-right {
15-
float: right !important;
16-
margin-right: -15px;
17-
}
1812

1913
.navbar .menu a {
2014

‎assets/js/main.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,16 @@ _Blog.toggleTheme = function() {
2929
})
3030
}
3131

32+
_Blog.toggleMobileMenu = function(){
33+
const menuToggle = document.querySelector('.menu-toggle')
34+
const mobileMenu = document.querySelector('#mobile-menu')
35+
menuToggle.addEventListener('click', () => {
36+
mobileMenu.classList.toggle('active')
37+
menuToggle.classList.toggle('active')
38+
})
39+
}
40+
3241
_Blog.toggleTheme()
3342
_Blog.changeTitle()
43+
_Blog.toggleMobileMenu()
3444
}());

‎layouts/partials/header.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,21 @@
1010
{{ end }}
1111
</div>
1212
</div>
13+
</nav>
14+
<nav class="navbar-mobile" id="nav-mobile" style="display: none">
15+
<div class="container">
16+
<div class="navbar-header">
17+
<a href="{{ "/" | absURL}}">LiuZhichao</a>
18+
<button class="menu-toggle">
19+
<span></span><span></span><span></span>
20+
</button>
21+
</div>
22+
23+
<div class="menu" id="mobile-menu">
24+
{{ $currentPage := . }}
25+
{{ range .Site.Menus.main }}
26+
<a class="menu-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
27+
{{ end }}
28+
</div>
29+
</div>
1330
</nav>

0 commit comments

Comments
 (0)