Skip to content

Commit f597d91

Browse files
rdhoxluizdepra
rdhox
authored and
luizdepra
committed
Mobile menu (#63)
* mobile menu functional * mobile menu beta * edits mobile-menu: home link out, rtl ok, menu pop over * mobile menu - bugs correction * add horizontal separator * corrections done + add configuration of centered or rtl/ltr mobile menu * edit config of example * separator padding full
1 parent 6e05d09 commit f597d91

File tree

4 files changed

+188
-34
lines changed

4 files changed

+188
-34
lines changed

‎exampleSite/config.toml

+78
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,14 @@ disqusShortname = "yourdiscussshortname"
2929
# Custom CSS
3030
custom_css = []
3131

32+
# Alignment of Mobile Menu items
33+
itemscentered = true
34+
3235
# RTL support
3336
rtl = false
3437

38+
langseparator = "|"
39+
3540
[[params.social]]
3641
name = "Github"
3742
weight = 1
@@ -53,3 +58,76 @@ disqusShortname = "yourdiscussshortname"
5358
name = "About"
5459
weight = 2
5560
url = "/about/"
61+
[[menu.main]]
62+
name = "Projects"
63+
weight = 3
64+
url = "/projects/"
65+
[[menu.main]]
66+
name = "Contact me"
67+
weight = 5
68+
url = "/contact/"
69+
70+
[languages]
71+
[languages.en]
72+
languagename = "English" # The language name to be displayed in the selector.
73+
title = "John Doe"
74+
75+
# You can configure the theme parameter for each language.
76+
[languages.en.params]
77+
author = "John Doe"
78+
info = "Full Stack DevOps and Magician"
79+
description = "John Doe's personal website"
80+
keywords = "blog,developer,personal"
81+
82+
[languages.en.menu] # It is possible to change the menu too.
83+
84+
[[languages.en.menu.main]]
85+
name = "About"
86+
weight = 1.0
87+
url = "/about/"
88+
89+
[[languages.en.menu.main]]
90+
name = "Blog"
91+
weight = 2.0
92+
url = "/posts/"
93+
94+
[[languages.en.menu.main]]
95+
name = "Projects"
96+
weight = 3
97+
url = "/projects/"
98+
[[languages.en.menu.main]]
99+
name = "Contact me"
100+
weight = 5
101+
url = "/contact/"
102+
103+
104+
[languages.pl]
105+
languagename = "Polski"
106+
title = "John Doe po polsku"
107+
108+
[languages.pl.params]
109+
author = "John Doe"
110+
description = "Strona domowa John'a Doe"
111+
keywords = "blog,developer,strona domowa"
112+
info = "Full Stack DevOps i Magik"
113+
114+
[languages.pl.menu]
115+
116+
[[languages.pl.menu.main]]
117+
name = "O mnie"
118+
weight = 1.0
119+
url = "/pl/about/"
120+
121+
[[languages.pl.menu.main]]
122+
name = "Blog"
123+
weight = 2.0
124+
url = "/pl/posts/"
125+
126+
[[languages.pl.menu.main]]
127+
name = "projektowanie"
128+
weight = 3
129+
url = "/projektowanie/"
130+
[[languages.pl.menu.main]]
131+
name = "kontakt"
132+
weight = 5
133+
url = "/kontakt/"

‎layouts/partials/header.html

+32-22
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,42 @@
33
<a class="navigation-title" href="{{ print "/" | absLangURL }}">
44
{{ .Site.Title }}
55
</a>
6-
<ul class="navigation-list {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}">
7-
{{ with .Site.Menus.main}}
8-
{{ range sort . }}
9-
<li class="navigation-item">
10-
<a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
11-
</li>
6+
<input type="checkbox" id="menu-control"/>
7+
<label class="menu-mobile {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}" for="menu-control">
8+
<span class="btn-mobile {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}">&#9776;</span>
9+
<ul class="navigation-list">
10+
{{ with .Site.Menus.main}}
11+
{{ range sort . }}
12+
<li class="navigation-item {{ if $.Site.Params.itemscentered }} align-center {{ else }} {{ if $.Site.Params.rtl }} align-right {{ else }} align-left {{ end }} {{ end }}">
13+
<a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
14+
</li>
15+
{{ end }}
1216
{{ end }}
13-
{{ end }}
14-
{{ if .Site.IsMultiLingual }}
15-
{{ $node := . }}
16-
{{ .Scratch.Set "separator" true }}
17-
18-
{{ range .Site.Home.AllTranslations }}
19-
{{ if ne $.Site.Language .Language }}
20-
{{ if $node.Scratch.Get "separator" }}
21-
<li>
22-
<p>{{ .Site.Params.LangSeparator }}</p>
17+
{{ if .Site.IsMultiLingual }}
18+
{{ $node := . }}
19+
{{ .Scratch.Set "separator" true }}
20+
{{ with .Site.Params.LangSeparator }}
21+
<li class= "{{ if $.Site.Params.itemscentered }} mobile-menu-lang-separator-centered {{ else }} mobile-menu-lang-separator-full {{ end }}">
22+
<hr />
23+
</li>
24+
{{ end }}
25+
{{ range .Site.Home.AllTranslations }}
26+
{{ if ne $.Site.Language .Language }}
27+
{{ if $node.Scratch.Get "separator" }}
28+
{{ with .Site.Params.LangSeparator }}
29+
<li class="multilingual-separator">
30+
<p>{{ . }}</p>
31+
</li>
32+
{{ end }}
33+
{{ $node.Scratch.Set "separator" false }}
34+
{{ end }}
35+
<li class="navigation-item {{ if $.Site.Params.itemscentered }} align-center {{ else }} {{ if $.Site.Params.rtl }} align-right {{ else }} align-left {{ end }} {{ end }}">
36+
<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
2337
</li>
24-
{{ $node.Scratch.Set "separator" false }}
2538
{{ end }}
26-
<li>
27-
<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
28-
</li>
2939
{{ end }}
3040
{{ end }}
31-
{{ end }}
32-
</ul>
41+
</ul>
42+
</label>
3343
</section>
3444
</nav>

‎static/css/style.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/less/style.less

+77-11
Original file line numberDiff line numberDiff line change
@@ -178,8 +178,8 @@ img {
178178
text-transform: uppercase;
179179
line-height: 6.0rem;
180180
letter-spacing: 0.1rem;
181-
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
182-
font-size: 1.4rem;
181+
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {
182+
font-size: 1.6rem;
183183
}
184184
}
185185
ul {
@@ -194,21 +194,86 @@ img {
194194
margin-left: 1.0rem;
195195
margin-right: 1.0rem;
196196
}
197+
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {
198+
float: none !important;
199+
}
200+
}
201+
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {
202+
visibility: hidden;
203+
opacity: 0;
204+
max-height: 0;
205+
z-index: 5;
206+
top: 5rem;
207+
right: 0;
208+
width: 100%;
209+
position: absolute;
210+
background-color: rgba(254,254,254 ,0.98);
211+
padding: 0;
212+
border-bottom: solid 2px #E2DFE1;
213+
transition: opacity 0.25s, max-height 0.15s linear;
197214
}
198215
}
199216
}
200217

201-
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
202-
a.navigation-title {
203-
font-size: 0rem;
218+
#menu-control {
219+
display: none;
220+
}
204221

205-
&::after {
206-
content: '~';
207-
font-size: 2.4rem;
208-
text-align: center;
209-
margin-left: -1.4rem;
210-
}
222+
.btn-mobile {
223+
display: none;
224+
}
225+
226+
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {
227+
.btn-mobile {
228+
display: block;
229+
font-size: 2.0rem;
230+
color: black;
231+
cursor: pointer;
232+
margin-top: 1.5rem;
233+
}
234+
235+
#menu-control:checked + label .btn-mobile {
236+
color: #E2DFE1;
237+
}
238+
239+
#menu-control:checked + label ul {
240+
visibility: visible;
241+
opacity: 1;
242+
max-height: 100rem;
243+
}
244+
245+
.navigation-item {
246+
position: relative;
247+
}
248+
249+
.mobile-menu-lang-separator-centered {
250+
padding-left: 7rem;
251+
padding-right: 7rem;
252+
}
253+
254+
.mobile-menu-lang-separator-full {
255+
padding-left: 1.5rem;
256+
padding-right: 1.5rem;
257+
}
258+
259+
.multilingual-separator {
260+
display: none;
261+
}
262+
263+
.align-left {
264+
text-align: left;
265+
padding-left: 1rem;
266+
}
267+
268+
.align-right {
269+
text-align: right;
270+
padding-right: 1rem;
271+
}
272+
273+
.align-center {
274+
text-align: center;
211275
}
276+
212277
}
213278

214279
.content {
@@ -366,3 +431,4 @@ img {
366431
.float-left {
367432
float: left;
368433
}
434+

0 commit comments

Comments
 (0)