Mobile menu
This commit is contained in:
parent
b7c7831c3e
commit
3f65d7cdb7
|
@ -1,3 +1,4 @@
|
||||||
resources
|
resources
|
||||||
public
|
public
|
||||||
.env
|
.env
|
||||||
|
.idea
|
|
@ -0,0 +1,29 @@
|
||||||
|
/**!
|
||||||
|
Navigation Button Toggle class
|
||||||
|
*/
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
// old browser or not ?
|
||||||
|
if ( !('querySelector' in document && 'addEventListener' in window) ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window.document.documentElement.className += ' js-enabled';
|
||||||
|
|
||||||
|
function toggleNav() {
|
||||||
|
|
||||||
|
// Define targets by their class or id
|
||||||
|
var button = document.querySelector('.nav-button');
|
||||||
|
var target = document.querySelector('.layout > nav');
|
||||||
|
|
||||||
|
// click-touch event
|
||||||
|
if ( button ) {
|
||||||
|
button.addEventListener('click',
|
||||||
|
function (e) {
|
||||||
|
button.classList.toggle('is-active');
|
||||||
|
target.classList.toggle('is-opened');
|
||||||
|
e.preventDefault();
|
||||||
|
}, false );
|
||||||
|
}
|
||||||
|
} // end toggleNav()
|
||||||
|
toggleNav();
|
||||||
|
}());
|
|
@ -4,7 +4,7 @@
|
||||||
display: flex
|
display: flex
|
||||||
flex-wrap: wrap
|
flex-wrap: wrap
|
||||||
text-align: center
|
text-align: center
|
||||||
padding: 1.5rem
|
padding: 1rem
|
||||||
position: absolute
|
position: absolute
|
||||||
bottom: 0
|
bottom: 0
|
||||||
left: 0
|
left: 0
|
||||||
|
|
|
@ -1,13 +1,107 @@
|
||||||
nav
|
nav
|
||||||
|
position: absolute
|
||||||
|
top: 10rem
|
||||||
|
left: -15rem
|
||||||
|
ul
|
||||||
|
list-style: none
|
||||||
|
li
|
||||||
|
border-left: 1px solid $color-primary
|
||||||
|
padding-left: 15px
|
||||||
|
&.active
|
||||||
|
font-weight: $active
|
||||||
|
a
|
||||||
|
text-decoration: none
|
||||||
|
color: $color-primary
|
||||||
|
&:hover
|
||||||
|
font-weight: $active
|
||||||
|
|
||||||
|
.nav-button
|
||||||
|
display: none
|
||||||
|
|
||||||
|
@media screen and (max-width: 80rem)
|
||||||
|
body
|
||||||
|
padding-bottom: 2*$space
|
||||||
|
nav
|
||||||
|
display: none
|
||||||
|
position: fixed
|
||||||
|
z-index: 10
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
background: $color-secondary
|
||||||
|
&.is-opened
|
||||||
|
display: block
|
||||||
ul
|
ul
|
||||||
list-style: none
|
list-style: none
|
||||||
li
|
padding: $space
|
||||||
border-left: 1px solid $color-primary
|
position: absolute
|
||||||
padding-left: 15px
|
bottom: $space
|
||||||
&.active
|
right: 0
|
||||||
font-weight: $active
|
width: 100%
|
||||||
a
|
li
|
||||||
text-decoration: none
|
line-height: 1.8*$space
|
||||||
color: $color-primary
|
font-size: 0.7*$space
|
||||||
&:hover
|
text-align: right
|
||||||
font-weight: $active
|
a
|
||||||
|
text-decoration: none
|
||||||
|
color: $color-primary
|
||||||
|
font-weight: 400
|
||||||
|
&:hover
|
||||||
|
font-weight: 700
|
||||||
|
&.active a
|
||||||
|
font-weight: 700
|
||||||
|
.nav-button
|
||||||
|
z-index: 20
|
||||||
|
display: inherit
|
||||||
|
border: 0
|
||||||
|
padding: 0
|
||||||
|
position: fixed
|
||||||
|
bottom: 0.5*$space
|
||||||
|
right: $space
|
||||||
|
background: transparent !important
|
||||||
|
&:before
|
||||||
|
content: 'menu'
|
||||||
|
padding: 0 2em
|
||||||
|
text-transform: uppercase
|
||||||
|
background: $color-secondary
|
||||||
|
position: fixed
|
||||||
|
left: 0
|
||||||
|
width: 100%
|
||||||
|
height: 2*$space
|
||||||
|
bottom: 0
|
||||||
|
padding: 0.5*$space 3*$space 0.5*$space 0
|
||||||
|
line-height: $space
|
||||||
|
text-align: right
|
||||||
|
&.is-active:before
|
||||||
|
content: ''
|
||||||
|
& > *
|
||||||
|
display: inline-flex
|
||||||
|
vertical-align: top
|
||||||
|
flex-direction: column
|
||||||
|
justify-content: space-between
|
||||||
|
align-items: stretch
|
||||||
|
height: 2.6rem
|
||||||
|
width: 3.6rem
|
||||||
|
background-image: linear-gradient(#333,#333)
|
||||||
|
background-position: 50%
|
||||||
|
background-repeat: no-repeat
|
||||||
|
background-origin: content-box
|
||||||
|
background-size: 100% 1px
|
||||||
|
transition: .25s
|
||||||
|
transition-property: transform,background
|
||||||
|
will-change: transform,background
|
||||||
|
& > ::before,& > ::after
|
||||||
|
content: ""
|
||||||
|
height: 1px
|
||||||
|
background: #333
|
||||||
|
transition: .25s
|
||||||
|
transition-property: transform,top
|
||||||
|
will-change: transform,top
|
||||||
|
&.is-active > *
|
||||||
|
background-image: none
|
||||||
|
justify-content: center
|
||||||
|
&.is-active > ::before
|
||||||
|
transform: translateY(50%) rotate(45deg)
|
||||||
|
&.is-active > ::after
|
||||||
|
transform: translateY(-50%) rotate(-45deg)
|
||||||
|
|
|
@ -15,3 +15,10 @@ params:
|
||||||
description: Histoire d'un pied est une série de livres témoignant de mon combat face au handicap
|
description: Histoire d'un pied est une série de livres témoignant de mon combat face au handicap
|
||||||
keywords: lowtech, ecoconception, web, server
|
keywords: lowtech, ecoconception, web, server
|
||||||
# socialImage: accueil/bienvenue.png
|
# socialImage: accueil/bienvenue.png
|
||||||
|
|
||||||
|
menu:
|
||||||
|
main:
|
||||||
|
- identifier: accueil_id
|
||||||
|
name: 🏠 accueil
|
||||||
|
url: /
|
||||||
|
weight: 1
|
|
@ -1,6 +1,9 @@
|
||||||
---
|
---
|
||||||
title: 📔 Annuaires des acteurs
|
title: Annuaires des acteurs
|
||||||
weight: 2
|
menu:
|
||||||
|
main:
|
||||||
|
name: 📔 Annuaires
|
||||||
|
weight: 20
|
||||||
---
|
---
|
||||||
|
|
||||||
## Acteurs des low-tech :
|
## Acteurs des low-tech :
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
---
|
---
|
||||||
title: 🔥 Manifesto
|
title: Manifesto
|
||||||
weight: 1
|
menu:
|
||||||
|
main:
|
||||||
|
name: 🔥 Manifesto
|
||||||
|
weight: 10
|
||||||
---
|
---
|
||||||
|
|
||||||
# Intro site
|
# Intro site
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
---
|
---
|
||||||
title: 🛠 Outils et ressources
|
title: Outils et ressources
|
||||||
weight: 3
|
menu:
|
||||||
|
main:
|
||||||
|
name: 🛠 Outils et ressources
|
||||||
|
weight: 30
|
||||||
---
|
---
|
||||||
|
|
||||||
## Ressources
|
## Ressources
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
{{ partial "head.html" . }}
|
{{ partial "head.html" . }}
|
||||||
<body>
|
<body>
|
||||||
<div class="layout">
|
<div class="layout">
|
||||||
|
{{ partial "menu.html" . }}
|
||||||
{{ partial "header.html" . }}
|
{{ partial "header.html" . }}
|
||||||
<main role="main" id="content">
|
<main role="main" id="content">
|
||||||
{{ block "main" . }}{{ end }}
|
{{ block "main" . }}{{ end }}
|
||||||
|
|
|
@ -4,18 +4,3 @@
|
||||||
│└┤┼││││░││┴┤─┤│││││││┴┤┼│
|
│└┤┼││││░││┴┤─┤│││││││┴┤┼│
|
||||||
└─┴─┴──┘░└┴─┴─┴┴┘└─┴─┴─┴─┘
|
└─┴─┴──┘░└┴─┴─┴┴┘└─┴─┴─┴─┘
|
||||||
</pre></h1>
|
</pre></h1>
|
||||||
<nav>
|
|
||||||
{{ $title := .Title }}
|
|
||||||
{{ $section := .CurrentSection.Title }}
|
|
||||||
{{ $pages := where site.RegularPages "Type" "in" "page" }}
|
|
||||||
{{ $pages := $pages | intersect (where site.RegularPages "Params.headless" "!=" true) }}
|
|
||||||
{{ $pages := $pages | union (where site.Pages "Kind" "in" "section") }}
|
|
||||||
<ul>
|
|
||||||
<li {{ if (eq .Title "🏡 Accueil") }}class="active"{{ end }}><a href="/">🏡 Accueil</a></li>
|
|
||||||
{{ range $pages.ByWeight }}
|
|
||||||
<li class="{{ if or (eq .Title $title) (eq .Title $section) }}active{{ end }}">
|
|
||||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
|
||||||
</li>
|
|
||||||
{{ end }}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
{{ $script := resources.Get "js/app.js" }}
|
||||||
|
<script src="{{ $script.Permalink }}"></script>
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!-- navigation -->
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
{{ $currentPage := . }}
|
||||||
|
{{ range .Site.Menus.main }}
|
||||||
|
<li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }} {{ .Pre }}">
|
||||||
|
<a href="{{ .URL }}" >{{ .Name }}</a>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
|
Loading…
Reference in New Issue