rebillar/site-accueil-insa
1
1
Bifurcation 1
bifurqué depuis vergnet/site-accueil-insa
Code Tickets Demandes d'ajout Publications Wiki Activité

Comparer les révisions

base: rebillar:2d7c160f67f3eb845f714e5bb465e35a52173684
Branches Étiquettes
rebillar:master
vergnet:master
vergnet:2019
vergnet:2020
..
comparer: rebillar:3f148d2c4fca72bb00adc27a7b13cf66fc64665d
Branches Étiquettes
rebillar:master
vergnet:master
vergnet:2019
vergnet:2020

2 commits
2d7c160f67 ... 3f148d2c4f

Auteur SHA1 Message Date
Guillaume Joffre
3f148d2c4f Merge remote-tracking branch 'origin/master' 2022-06-10 21:48:37 +02:00
Guillaume Joffre
9485b6f3e3 menu mobile 2022-06-10 21:48:25 +02:00
4 fichiers modifiés avec 280 ajouts et 5 suppressions
Voir les statistiques Développer tous les fichiers Réduire tous les fichiers

71
assets/css/menu.css
Voir le fichier

@ -18,6 +18,7 @@
min-width: 6.3vmax; min-width: 6.3vmax;
height: auto; height: auto;
z-index: 2; z-index: 2;
cursor: pointer;
transition: transform 0.3s; transition: transform 0.3s;
overflow: visible; overflow: visible;
@ -36,7 +37,7 @@
transition: transform 50ms; transition: transform 50ms;
} }
.menu-link:hover text { .menu .menu-link:hover text {
fill: #FFDC00; fill: #FFDC00;
transform: translateY(-1px); transform: translateY(-1px);
} }
@ -49,3 +50,71 @@
.menu svg { .menu svg {
overflow: visible; overflow: visible;
} }
.mobile-menu {
display: block;
position: fixed;
top: 0; left: 0;
overflow: hidden;
width: 100%;
z-index: 20;
height: 0;
background: rgba(15, 15, 23, 0);
transition: background-color 0.2s linear;
}
.mobile-menu .containerF3g {
width: 100%; height: 100%;
overflow: auto;
}
.mobile-grid {
display: flex;
flex-wrap: wrap;
padding: 2vh 60px;
min-height: 100vh;
justify-content: center;
align-content: center;
}
.mobile-menu-link {
min-width: 100px;
width: 50%;
display: block;
opacity: 0;
transform: translateY(10%);
transition: transform 0.2s ease-out, opacity 0.2s linear 0.05s;
}
nav.mobile-menu.open .mobile-menu-link {
transform: translateY(0);
opacity: 1;
}
.menu-link:hover text {
fill: #FFDC00;
}
.mobile-brick {
display: block;
}
span.close-mobile-menu {
color: #FFF;
font-size: 80px;
display: block;
position: absolute;
bottom: 0;
right: 20px;
cursor: pointer;
transition: color 0.5s;
}
span.close-mobile-menu:hover {
color: #FFDC00;
}

11
assets/css/queries.css
Voir le fichier

@ -31,8 +31,19 @@
transform: translateY(40%); transform: translateY(40%);
} }
header .tuyau:hover {
opacity: 0.8;
transform: translateY(35%);
}
#tuyau-ombre { #tuyau-ombre {
display: none; display: none;
} }
/* --- Show the menu on tiny screens --- */
nav.mobile-menu.open {
height: 100vh;
background-color: rgba(15, 15, 23, 0.86);
}
} }

184
structure/menu.php
Voir le fichier

@ -4,8 +4,9 @@ if(!isset($relativepath)) {
} }
?> ?>
<!-- The tube -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
class="tuyau" id="parent" class="tuyau" id="tube"
viewBox="0 0 44 76"> viewBox="0 0 44 76">
<!-- espace de définition --> <!-- espace de définition -->
@ -66,11 +67,11 @@ if(!isset($relativepath)) {
<rect x="5" y="14" class="st15" width="34" height="1.35"/> <rect x="5" y="14" class="st15" width="34" height="1.35"/>
<!-- Tuyau : Ombre --> <!-- Tuyau : Ombre -->
<rect id="tuyau-ombre" x="5" y="40" class="st15" width="34" height="1.35"/> <rect id="tuyau-ombre" x="5" y="40.5" class="st15" width="34" height="1.35"/>
</svg> </svg>
<!-- The actual menu --> <!-- The actual menu * desktop -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
class="menu" id="parent" class="menu" id="parent"
viewBox="0 0 512 34.85"> viewBox="0 0 512 34.85">
@ -160,3 +161,180 @@ if(!isset($relativepath)) {
</svg> </svg>
<!-- The actual menu * mobile/tiny screens -->
<nav class="mobile-menu" id="mobile-menu">
<div class="containerF3g">
<div class="mobile-grid">
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
<a href="#" class="mobile-menu-link">
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<text x="23.8" y="8.5">
LIENNN
</text>
</svg>
</a>
</div>
</div>
<span id="close-mobile-menu" class="close-mobile-menu">
x
</span>
</nav>

19
structure/template.php
Voir le fichier

@ -61,10 +61,27 @@ $pagename = $infopage[4]; // nom de la page exact servant à appeler le css
</footer> </footer>
<!-- TODO un espace qui permet de couvrir la surface sous le menu, pour l'instant on utilise la même image pour pas oublier que l'espace doit être de la même taille que le menu mais faudra changer ça --> <!-- TODO un espace qui permet de couvrir la surface sous le menu, pour l'instant on utilise la même image pour pas oublier que l'espace doit être de la même taille que le menu mais faudra changer ça -->
<div style="height: 6.8vw"> <div style="height: 9vw">
</div> </div>
<!-- Script nécessaire au fonctionnement du menu sur mobile -->
<!-- To be charged at the end so that it doesn't slow the page loading -->
<script defer>
(() => {
const tube = document.getElementById("tube");
const closeBTN = document.getElementById("close-mobile-menu");
const mobileMenu = document.getElementById("mobile-menu");
const onTubeClick = (e) => {
mobileMenu.classList.toggle("open");
};
tube.addEventListener("click", onTubeClick)
closeBTN.addEventListener("click", onTubeClick)
})()
</script>
</body> </body>
</html> </html>
<?php <?php