Mobile menu
This commit is contained in:
Gaetan Janssens
parent
b7c7831c3e
commit
3f65d7cdb7
|
|
@ -1,3 +1,4 @@
|
|||
resources
|
||||
public
|
||||
.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
|
||||
flex-wrap: wrap
|
||||
text-align: center
|
||||
padding: 1.5rem
|
||||
padding: 1rem
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: 0
|
||||
|
|
|
|||
|
|
@ -1,13 +1,107 @@
|
|||
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
|
||||
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
|
||||
list-style: none
|
||||
padding: $space
|
||||
position: absolute
|
||||
bottom: $space
|
||||
right: 0
|
||||
width: 100%
|
||||
li
|
||||
line-height: 1.8*$space
|
||||
font-size: 0.7*$space
|
||||
text-align: right
|
||||
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
|
||||
keywords: lowtech, ecoconception, web, server
|
||||
# socialImage: accueil/bienvenue.png
|
||||
|
||||
menu:
|
||||
main:
|
||||
- identifier: accueil_id
|
||||
name: 🏠 accueil
|
||||
url: /
|
||||
weight: 1
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
---
|
||||
title: 📔 Annuaires des acteurs
|
||||
weight: 2
|
||||
title: Annuaires des acteurs
|
||||
menu:
|
||||
main:
|
||||
name: 📔 Annuaires
|
||||
weight: 20
|
||||
---
|
||||
|
||||
## Acteurs des low-tech :
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
---
|
||||
title: 🔥 Manifesto
|
||||
weight: 1
|
||||
title: Manifesto
|
||||
menu:
|
||||
main:
|
||||
name: 🔥 Manifesto
|
||||
weight: 10
|
||||
---
|
||||
|
||||
# Intro site
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
---
|
||||
title: 🛠 Outils et ressources
|
||||
weight: 3
|
||||
title: Outils et ressources
|
||||
menu:
|
||||
main:
|
||||
name: 🛠 Outils et ressources
|
||||
weight: 30
|
||||
---
|
||||
|
||||
## Ressources
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
{{ partial "head.html" . }}
|
||||
<body>
|
||||
<div class="layout">
|
||||
{{ partial "menu.html" . }}
|
||||
{{ partial "header.html" . }}
|
||||
<main role="main" id="content">
|
||||
{{ block "main" . }}{{ end }}
|
||||
|
|
|
|||
|
|
@ -4,18 +4,3 @@
|
|||
│└┤┼││││░││┴┤─┤│││││││┴┤┼│
|
||||
└─┴─┴──┘░└┴─┴─┴┴┘└─┴─┴─┴─┘
|
||||
</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