rebillar/site-accueil-insa
1
1
Fork 1
geforkt von vergnet/site-accueil-insa
Code Issues Pull-Requests Releases Wiki Aktivität

menu mobile

Quellcode durchsuchen
Dieser Commit ist enthalten in:
Guillaume Joffre 2022-06-10 21:48:25 +02:00
Ursprung bf3e6ae359
Commit 9485b6f3e3
4 geänderte Dateien mit 280 neuen und 5 gelöschten Zeilen
Statistiken anzeigen Patch-Datei herunterladen Diff-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

71
assets/css/menu.css
Datei anzeigen

@ -18,6 +18,7 @@
min-width: 6.3vmax;
height: auto;
z-index: 2;
cursor: pointer;
transition: transform 0.3s;
overflow: visible;
@ -36,7 +37,7 @@
transition: transform 50ms;
}
.menu-link:hover text {
.menu .menu-link:hover text {
fill: #FFDC00;
transform: translateY(-1px);
}
@ -49,3 +50,71 @@
.menu svg {
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
Datei anzeigen

@ -31,8 +31,19 @@
transform: translateY(40%);
}
header .tuyau:hover {
opacity: 0.8;
transform: translateY(35%);
}
#tuyau-ombre {
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
Datei anzeigen

@ -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"
class="tuyau" id="parent"
class="tuyau" id="tube"
viewBox="0 0 44 76">
<!-- espace de définition -->
@ -66,11 +67,11 @@ if(!isset($relativepath)) {
<rect x="5" y="14" class="st15" width="34" height="1.35"/>
<!-- 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>
<!-- The actual menu -->
<!-- The actual menu * desktop -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
class="menu" id="parent"
viewBox="0 0 512 34.85">
@ -160,3 +161,180 @@ if(!isset($relativepath)) {
</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
Datei anzeigen

@ -61,10 +61,27 @@ $pagename = $infopage[4]; // nom de la page exact servant à appeler le css
</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 -->
<div style="height: 6.8vw">
<div style="height: 9vw">
</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>
</html>
<?php