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
Luiz F. A. de Prá
parent
6e05d09971
commit
f597d91e55
|
|
@ -29,9 +29,14 @@ disqusShortname = "yourdiscussshortname"
|
|||
# Custom CSS
|
||||
custom_css = []
|
||||
|
||||
# Alignment of Mobile Menu items
|
||||
itemscentered = true
|
||||
|
||||
# RTL support
|
||||
rtl = false
|
||||
|
||||
langseparator = "|"
|
||||
|
||||
[[params.social]]
|
||||
name = "Github"
|
||||
weight = 1
|
||||
|
|
@ -53,3 +58,76 @@ disqusShortname = "yourdiscussshortname"
|
|||
name = "About"
|
||||
weight = 2
|
||||
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 }}">
|
||||
{{ .Site.Title }}
|
||||
</a>
|
||||
<ul class="navigation-list {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}">
|
||||
{{ with .Site.Menus.main}}
|
||||
{{ range sort . }}
|
||||
<li class="navigation-item">
|
||||
<a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ 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>
|
||||
<input type="checkbox" id="menu-control"/>
|
||||
<label class="menu-mobile {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}" for="menu-control">
|
||||
<span class="btn-mobile {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}">☰</span>
|
||||
<ul class="navigation-list">
|
||||
{{ with .Site.Menus.main}}
|
||||
{{ range sort . }}
|
||||
<li class="navigation-item {{ if $.Site.Params.itemscentered }} align-center {{ else }} {{ if $.Site.Params.rtl }} align-right {{ else }} align-left {{ end }} {{ end }}">
|
||||
<a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ if .Site.IsMultiLingual }}
|
||||
{{ $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>
|
||||
</nav>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -178,8 +178,8 @@ img {
|
|||
text-transform: uppercase;
|
||||
line-height: 6.0rem;
|
||||
letter-spacing: 0.1rem;
|
||||
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
|
||||
font-size: 1.4rem;
|
||||
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
|
|
@ -194,21 +194,86 @@ img {
|
|||
margin-left: 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) {
|
||||
a.navigation-title {
|
||||
font-size: 0rem;
|
||||
#menu-control {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '~';
|
||||
font-size: 2.4rem;
|
||||
text-align: center;
|
||||
margin-left: -1.4rem;
|
||||
}
|
||||
.btn-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@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 {
|
||||
|
|
@ -366,3 +431,4 @@ img {
|
|||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue