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:
rdhox 2018-07-25 01:26:48 +02:00 committed by Luiz F. A. de Prá
parent 6e05d09971
commit f597d91e55
4 changed files with 190 additions and 36 deletions

View File

@ -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/"

View File

@ -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 }}">&#9776;</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

View File

@ -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;
} }