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
This commit is contained in:
parent
6e05d09971
commit
f597d91e55
|
@ -29,9 +29,14 @@ disqusShortname = "yourdiscussshortname"
|
||||||
# Custom CSS
|
# Custom CSS
|
||||||
custom_css = []
|
custom_css = []
|
||||||
|
|
||||||
|
# Alignment of Mobile Menu items
|
||||||
|
itemscentered = true
|
||||||
|
|
||||||
# RTL support
|
# RTL support
|
||||||
rtl = false
|
rtl = false
|
||||||
|
|
||||||
|
langseparator = "|"
|
||||||
|
|
||||||
[[params.social]]
|
[[params.social]]
|
||||||
name = "Github"
|
name = "Github"
|
||||||
weight = 1
|
weight = 1
|
||||||
|
@ -53,3 +58,76 @@ disqusShortname = "yourdiscussshortname"
|
||||||
name = "About"
|
name = "About"
|
||||||
weight = 2
|
weight = 2
|
||||||
url = "/about/"
|
url = "/about/"
|
||||||
|
[[menu.main]]
|
||||||
|
name = "Projects"
|
||||||
|
weight = 3
|
||||||
|
url = "/projects/"
|
||||||
|
[[menu.main]]
|
||||||
|
name = "Contact me"
|
||||||
|
weight = 5
|
||||||
|
url = "/contact/"
|
||||||
|
|
||||||
|
[languages]
|
||||||
|
[languages.en]
|
||||||
|
languagename = "English" # The language name to be displayed in the selector.
|
||||||
|
title = "John Doe"
|
||||||
|
|
||||||
|
# You can configure the theme parameter for each language.
|
||||||
|
[languages.en.params]
|
||||||
|
author = "John Doe"
|
||||||
|
info = "Full Stack DevOps and Magician"
|
||||||
|
description = "John Doe's personal website"
|
||||||
|
keywords = "blog,developer,personal"
|
||||||
|
|
||||||
|
[languages.en.menu] # It is possible to change the menu too.
|
||||||
|
|
||||||
|
[[languages.en.menu.main]]
|
||||||
|
name = "About"
|
||||||
|
weight = 1.0
|
||||||
|
url = "/about/"
|
||||||
|
|
||||||
|
[[languages.en.menu.main]]
|
||||||
|
name = "Blog"
|
||||||
|
weight = 2.0
|
||||||
|
url = "/posts/"
|
||||||
|
|
||||||
|
[[languages.en.menu.main]]
|
||||||
|
name = "Projects"
|
||||||
|
weight = 3
|
||||||
|
url = "/projects/"
|
||||||
|
[[languages.en.menu.main]]
|
||||||
|
name = "Contact me"
|
||||||
|
weight = 5
|
||||||
|
url = "/contact/"
|
||||||
|
|
||||||
|
|
||||||
|
[languages.pl]
|
||||||
|
languagename = "Polski"
|
||||||
|
title = "John Doe po polsku"
|
||||||
|
|
||||||
|
[languages.pl.params]
|
||||||
|
author = "John Doe"
|
||||||
|
description = "Strona domowa John'a Doe"
|
||||||
|
keywords = "blog,developer,strona domowa"
|
||||||
|
info = "Full Stack DevOps i Magik"
|
||||||
|
|
||||||
|
[languages.pl.menu]
|
||||||
|
|
||||||
|
[[languages.pl.menu.main]]
|
||||||
|
name = "O mnie"
|
||||||
|
weight = 1.0
|
||||||
|
url = "/pl/about/"
|
||||||
|
|
||||||
|
[[languages.pl.menu.main]]
|
||||||
|
name = "Blog"
|
||||||
|
weight = 2.0
|
||||||
|
url = "/pl/posts/"
|
||||||
|
|
||||||
|
[[languages.pl.menu.main]]
|
||||||
|
name = "projektowanie"
|
||||||
|
weight = 3
|
||||||
|
url = "/projektowanie/"
|
||||||
|
[[languages.pl.menu.main]]
|
||||||
|
name = "kontakt"
|
||||||
|
weight = 5
|
||||||
|
url = "/kontakt/"
|
||||||
|
|
|
@ -3,32 +3,42 @@
|
||||||
<a class="navigation-title" href="{{ print "/" | absLangURL }}">
|
<a class="navigation-title" href="{{ print "/" | absLangURL }}">
|
||||||
{{ .Site.Title }}
|
{{ .Site.Title }}
|
||||||
</a>
|
</a>
|
||||||
<ul class="navigation-list {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}">
|
<input type="checkbox" id="menu-control"/>
|
||||||
{{ with .Site.Menus.main}}
|
<label class="menu-mobile {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}" for="menu-control">
|
||||||
{{ range sort . }}
|
<span class="btn-mobile {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}">☰</span>
|
||||||
<li class="navigation-item">
|
<ul class="navigation-list">
|
||||||
<a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
|
{{ with .Site.Menus.main}}
|
||||||
</li>
|
{{ range sort . }}
|
||||||
{{ end }}
|
<li class="navigation-item {{ if $.Site.Params.itemscentered }} align-center {{ else }} {{ if $.Site.Params.rtl }} align-right {{ else }} align-left {{ end }} {{ end }}">
|
||||||
{{ end }}
|
<a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
|
||||||
{{ if .Site.IsMultiLingual }}
|
|
||||||
{{ $node := . }}
|
|
||||||
{{ .Scratch.Set "separator" true }}
|
|
||||||
|
|
||||||
{{ range .Site.Home.AllTranslations }}
|
|
||||||
{{ if ne $.Site.Language .Language }}
|
|
||||||
{{ if $node.Scratch.Get "separator" }}
|
|
||||||
<li>
|
|
||||||
<p>{{ .Site.Params.LangSeparator }}</p>
|
|
||||||
</li>
|
|
||||||
{{ $node.Scratch.Set "separator" false }}
|
|
||||||
{{ end }}
|
|
||||||
<li>
|
|
||||||
<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
|
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ if .Site.IsMultiLingual }}
|
||||||
</ul>
|
{{ $node := . }}
|
||||||
|
{{ .Scratch.Set "separator" true }}
|
||||||
|
{{ with .Site.Params.LangSeparator }}
|
||||||
|
<li class= "{{ if $.Site.Params.itemscentered }} mobile-menu-lang-separator-centered {{ else }} mobile-menu-lang-separator-full {{ end }}">
|
||||||
|
<hr />
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
{{ range .Site.Home.AllTranslations }}
|
||||||
|
{{ if ne $.Site.Language .Language }}
|
||||||
|
{{ if $node.Scratch.Get "separator" }}
|
||||||
|
{{ with .Site.Params.LangSeparator }}
|
||||||
|
<li class="multilingual-separator">
|
||||||
|
<p>{{ . }}</p>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
{{ $node.Scratch.Set "separator" false }}
|
||||||
|
{{ end }}
|
||||||
|
<li class="navigation-item {{ if $.Site.Params.itemscentered }} align-center {{ else }} {{ if $.Site.Params.rtl }} align-right {{ else }} align-left {{ end }} {{ end }}">
|
||||||
|
<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</label>
|
||||||
</section>
|
</section>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -178,8 +178,8 @@ img {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
line-height: 6.0rem;
|
line-height: 6.0rem;
|
||||||
letter-spacing: 0.1rem;
|
letter-spacing: 0.1rem;
|
||||||
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
|
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {
|
||||||
font-size: 1.4rem;
|
font-size: 1.6rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
|
@ -194,21 +194,86 @@ img {
|
||||||
margin-left: 1.0rem;
|
margin-left: 1.0rem;
|
||||||
margin-right: 1.0rem;
|
margin-right: 1.0rem;
|
||||||
}
|
}
|
||||||
|
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {
|
||||||
|
float: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
max-height: 0;
|
||||||
|
z-index: 5;
|
||||||
|
top: 5rem;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgba(254,254,254 ,0.98);
|
||||||
|
padding: 0;
|
||||||
|
border-bottom: solid 2px #E2DFE1;
|
||||||
|
transition: opacity 0.25s, max-height 0.15s linear;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
|
#menu-control {
|
||||||
a.navigation-title {
|
display: none;
|
||||||
font-size: 0rem;
|
}
|
||||||
|
|
||||||
&::after {
|
.btn-mobile {
|
||||||
content: '~';
|
display: none;
|
||||||
font-size: 2.4rem;
|
}
|
||||||
text-align: center;
|
|
||||||
margin-left: -1.4rem;
|
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {
|
||||||
}
|
.btn-mobile {
|
||||||
|
display: block;
|
||||||
|
font-size: 2.0rem;
|
||||||
|
color: black;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#menu-control:checked + label .btn-mobile {
|
||||||
|
color: #E2DFE1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-control:checked + label ul {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
max-height: 100rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-item {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-lang-separator-centered {
|
||||||
|
padding-left: 7rem;
|
||||||
|
padding-right: 7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-lang-separator-full {
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multilingual-separator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-left {
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-right {
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
@ -366,3 +431,4 @@ img {
|
||||||
.float-left {
|
.float-left {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue