sforkowany z vergnet/site-accueil-insa
Porównaj commity
2 commits
2d7c160f67
...
3f148d2c4f
| Autor | SHA1 | Data | |
|---|---|---|---|
|
3f148d2c4f | ||
|
|
9485b6f3e3 |
4 zmienionych plików z 280 dodań i 5 usunięć
|
|
@ -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;
|
||||
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Ładowanie…
Reference in a new issue