rebillar/site-accueil-insa
1
1
分叉 1
分叉自 vergnet/site-accueil-insa
程式碼 問題 合併請求 版本發布 Wiki 動態

menu mobile

瀏覽代碼
這個提交存在於：
Guillaume Joffre 2022-06-10 21:48:25 +02:00
父節點 bf3e6ae359
當前提交 9485b6f3e3
共有 4 個檔案被更改，包括 280 行新增 和 5 行删除
顯示統計資料 下載補綴檔案 下載差異檔案 展開所有檔案 折疊所有檔案

71
assets/css/menu.css
查看文件

@ -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
查看文件

@ -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
查看文件

@ -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
查看文件

@ -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