rebillar/site-accueil-insa
1
1
Fork 1
forked from vergnet/site-accueil-insa
Code Issues Pull requests Releases Wiki Activity

menu avec liens possibles

Browse source
This commit is contained in:
Guillaume Joffre 2022-04-12 01:14:59 +02:00
parent 7f0e9ae4fd
commit cb5308f10f
3 changed files with 198 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
assets/css/menu.css
View file

@ -1,9 +1,45 @@
.menuimg { .menu {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 0; left: 0;
width: 100vw; width: 100%;
height: auto; height: auto;
min-width: 100vmax; min-width: 96vmax;
z-index: 2; z-index: 2;
}
overflow: visible;
}
.tuyau {
position: fixed;
bottom: 0;
right: 3vw;
width: 8%;
height: auto;
z-index: 2;
overflow: visible;
}
.menu-link use {
transition: transform 50ms;
transform-origin: center;
}
.menu-link text {
transition: transform 50ms;
}
.menu-link:hover text {
fill: #FFDC00;
transform: translateY(-1px);
}
.menu-link:hover use {
transform: scaleY(1.1);
}
.menu svg {
overflow: visible;
}

286
structure/menu.php
View file

@ -4,66 +4,13 @@ if(!isset($relativepath)) {
} }
?> ?>
<svg class="menuimg" 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"
width="512" height="96" x="0px" y="0px" class="tuyau" id="parent"
viewBox="0 416 512 96" xml:space="preserve"> viewBox="0 0 44 78">
<style type="text/css">
.st0{fill:#AA572E;}
.st1{fill:#C06538;}
.st2{fill:#2B0A00;}
.st3{fill:#914522;}
.st4{fill:#9B4D25;}
.st5{fill:#A04E26;}
.st6{fill:#491A05;}
.st7{fill:#3F1403;}
.st8{fill:#BA6135;}
.st9{fill:#00A15D;}
.st10{fill:#00A25D;}
.st11{fill:url(#grad1);}
.st12{fill:url(#grad2);}
.st13{fill:#FFFFFF;}
.st14{opacity:0.66;fill:#FFFFFF;}
.st15{opacity:0.3;}
.st16{fill:#392313;}
.st17{fill:#492715;}
use { <!-- espace de définition -->
transition: transform 0.1s; <defs>
} <linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="44" y2="0">
use:hover {
transform: translateY(-1.5px);
}
#Tuyau {
transition: opacity 0.2s;
}
#Tuyau:hover {
opacity: 0.2;
}
</style>
<symbol id="Brick" viewBox="0 0 47 20">
<rect x="1" y="1" class="st0" width="45" height="18"/>
<rect x="1.5" y="0" class="st1" width="44" height="1.5"/>
<rect x="1.5" y="18.5" class="st2" width="44" height="1.5"/>
<rect x="45.5" y="1.5" class="st3" width="1.5" height="17"/>
<rect y="1.5" class="st4" width="1.5" height="17"/>
<polygon class="st5" points="47,1.5 45.5,1.5 45.5,0"/>
<polygon class="st6" points="45.5,20 47,18.5 45.5,18.5"/>
<polygon class="st7" points="0,18.5 1.5,18.5 1.5,20"/>
<polygon class="st8" points="0,1.5 1.5,1.5 1.5,0"/>
</symbol>
<g id="Tuyau">
<!-- Ouverture : Fond -->
<rect x="431" y="429.5" class="st9" width="44" height="14"/>
<!-- Cylindre : Fond-->
<rect id="Fond_-_Tuyau" x="436" y="443.5" class="st10" width="34" height="50"/>
<linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="431" y1="436.5" x2="469" y2="436.5">
<stop offset="0" style="stop-color:#03A663"/> <stop offset="0" style="stop-color:#03A663"/>
<stop offset="0.2204" style="stop-color:#03A160"/> <stop offset="0.2204" style="stop-color:#03A160"/>
<stop offset="0.4959" style="stop-color:#029157"/> <stop offset="0.4959" style="stop-color:#029157"/>
@ -71,91 +18,170 @@ if(!isset($relativepath)) {
<stop offset="1" style="stop-color:#00633C"/> <stop offset="1" style="stop-color:#00633C"/>
</linearGradient> </linearGradient>
<!-- Ouverture : Dégradé --> <linearGradient id="grad2" gradientUnits="userSpaceOnUse" x1="5" y1="14" x2="39" y2="14">
<rect x="431" y="429.5" class="st11" width="38" height="14"/>
<linearGradient id="grad2" gradientUnits="userSpaceOnUse" x1="436" y1="468.5" x2="464" y2="468.5">
<stop offset="0" style="stop-color:#03A663"/> <stop offset="0" style="stop-color:#03A663"/>
<stop offset="0.2204" style="stop-color:#03A160"/> <stop offset="0.2204" style="stop-color:#03A160"/>
<stop offset="0.4959" style="stop-color:#029157"/> <stop offset="0.4959" style="stop-color:#029157"/>
<stop offset="0.7995" style="stop-color:#017848"/> <stop offset="0.7995" style="stop-color:#017848"/>
<stop offset="1" style="stop-color:#00633C"/> <stop offset="1" style="stop-color:#00633C"/>
</linearGradient> </linearGradient>
</defs>
<!-- Tuyau : Dégradé --> <style type="text/css">
<rect x="436" y="443.5" class="st12" width="28" height="50"/> .st9{fill:#00A15D;}
.st10{fill:#00A25D;}
.st11{fill:url(#grad1);}
.st12{fill:url(#grad2);}
.st13{fill:#FFFFFF;}
.st14{opacity:0.66;fill:#FFFFFF;}
.st15{opacity:0.3;}
</style>
<!-- Ouverture : Reflet Fort -->
<rect x="439.93" y="429.5" class="st13" width="5.5" height="14"/>
<!-- Ouverture : Reflet Faible --> <!-- Ouverture : Fond -->
<rect x="438.43" y="429.5" class="st14" width="1.5" height="14"/> <rect x="0" y="0" class="st9" width="44" height="14"/>
<!-- Cylindre : Reflet Fort --> <!-- Cylindre : Fond -->
<rect x="443.43" y="445.39" class="st13" width="5.5" height="48.11"/> <rect x="5" y="14" class="st10" width="34" height="50"/>
<!-- Cylindre : Reflet Faible --> <!-- Ouverture : Dégradé -->
<rect x="441.93" y="445.39" class="st14" width="1.5" height="48.11"/> <rect x="0" y="0" class="st11" width="38" height="14"/>
<!-- Ouverture : Ombre projetée --> <!-- Cylindre : Dégradé -->
<rect x="436" y="443.5" class="st15" width="34" height="1.35"/> <rect x="5" y="14" class="st12" width="28" height="50"/>
</g>
<!-- Ouverture : Reflet Fort -->
<rect x="9" y="0" class="st13" width="5.5" height="14"/>
<!-- Ouverture : Reflet Faible -->
<rect x="7.5" y="0" class="st14" width="1.5" height="14"/>
<!-- Cylindre : Reflet Fort -->
<rect x="12.5" y="14" class="st13" width="5.5" height="48.11"/>
<!-- Cylindre : Reflet Faible -->
<rect x="11" y="14" class="st14" width="1.5" height="48.11"/>
<!-- Ouverture : Ombre projetée -->
<rect x="5" y="14" class="st15" width="34" height="1.35"/>
<!-- Tuyau : Ombre --> <!-- Tuyau : Ombre -->
<rect id="Ombre_-_Tuyau" x="436" y="472.27" class="st15" width="34" height="1.35"/> <rect x="5" y="42" class="st15" width="34" height="1.35"/>
<!-- Fond --> </svg>
<rect id="Fond_-_Briques" x="0" y="474" class="st16" width="512" height="38"/>
<!-- The actual menu -->
<!-- Fond : Surface --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
<rect id="Surface_-_Briques" x="0" y="473.62" class="st17" width="512" height="0.75"/> class="menu" id="parent"
viewBox="0 0 512 34.85">
<!-- Top layer (LtR) --> <!-- Might put them somewhere else later -->
<use xlink:href="#Brick" width="47" height="20" x="0" y="471.65"/> <style type="text/css">
.st0{fill:#AA572E;}
<use xlink:href="#Brick" width="47" height="20" x="48.85" y="471.65"/> .st1{fill:#C06538;}
.st2{fill:#2B0A00;}
<use xlink:href="#Brick" width="47" height="20" x="97.7" y="471.65"/> .st3{fill:#914522;}
.st4{fill:#9B4D25;}
<use xlink:href="#Brick" width="47" height="20" x="146.55" y="471.65"/> .st5{fill:#A04E26;}
.st6{fill:#491A05;}
<use xlink:href="#Brick" width="47" height="20" x="195.4" y="471.65"/> .st7{fill:#3F1403;}
.st8{fill:#BA6135;}
<use xlink:href="#Brick" width="47" height="20" x="244.25" y="471.65"/> .st16{fill:#392313;}
.st17{fill:#492715;}
<use xlink:href="#Brick" width="47" height="20" x="293.1" y="471.65"/> </style>
<style type="text/css">
<use xlink:href="#Brick" width="47" height="20" x="341.95" y="471.65"/>
.menu-link text {
<use xlink:href="#Brick" width="47" height="20" x="390.8" y="471.65"/> fill: white;
text-anchor: middle;
<use xlink:href="#Brick" width="47" height="20" x="439.65" y="471.65"/> alignment-baseline: central;
dominant-baseline: central;
<use xlink:href="#Brick" width="47" height="20" x="488.5" y="471.65"/> font-size: 8px;
}
<!-- Bottom Layer (LtR) -->
<use xlink:href="#Brick" width="47" height="20" x="-23.5" y="493.5"/> </style>
<use xlink:href="#Brick" width="47" height="20" x="25.35" y="493.5"/> <!-- This svg create an image of a brick and cache it for further <use>s-->
<symbol id="Brick" viewBox="0 0 47 17">
<use xlink:href="#Brick" width="47" height="20" x="74.2" y="493.5"/> <rect x="1" y="1" class="st0" width="45" height="15"/>
<use xlink:href="#Brick" width="47" height="20" x="123.05" y="493.5"/> <rect x="1.5" y="0" class="st1" width="44" height="1.5"/> <!-- Top side -->
<rect x="1.5" y="15.5" class="st2" width="44" height="1.5"/> <!-- Bottom side -->
<use xlink:href="#Brick" width="47" height="20" x="171.9" y="493.5"/> <rect x="45.5" y="1.5" class="st3" width="1.5" height="14"/> <!-- Right side -->
<rect x="0" y="1.5" class="st4" width="1.5" height="14"/> <!-- Left side -->
<use xlink:href="#Brick" width="47" height="20" x="220.75" y="493.5"/>
<polygon class="st5" points="47,1.5 45.5,1.5 45.5,0"/> <!-- TR corner -->
<use xlink:href="#Brick" width="47" height="20" x="269.6" y="493.5"/> <polygon class="st6" points="45.5,17 47,15.5 45.5,15.5"/> <!-- BR corner -->
<polygon class="st7" points="0,15.5 1.5,15.5 1.5,17"/> <!-- BL corner -->
<use xlink:href="#Brick" width="47" height="20" x="318.45" y="493.5"/> <polygon class="st8" points="0,1.5 1.5,1.5 1.5,0"/> <!-- TL corner -->
</symbol>
<use xlink:href="#Brick" width="47" height="20" x="367.3" y="493.5"/>
<use xlink:href="#Brick" width="47" height="20" x="416.15" y="493.5"/> <!-- Fond -->
<rect x="0" y="2.85" class="st16" width="512" height="32"/>
<use xlink:href="#Brick" width="47" height="20" x="465" y="493.5"/>
<!-- Fond : Surface -->
<rect x="0" y="2.85" class="st17" width="512" height="1.5"/>
<!-- Top layer (LtR) -->
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
<!--use xlink:href="#Brick" width="47" height="17" x="48.85" y="0"/-->
<a href="index.php" class="menu-link">
<use xlink:href="#Brick" width="47" height="17" x="48.85" y="0"/>
<svg id="btn10" width="47" height="17" x="48.85" y="0">
<text x="50%" y="50%">
Acceuil
</text>
</svg>
</a>
<use xlink:href="#Brick" width="47" height="17" x="97.7" y="0"/>
<use xlink:href="#Brick" width="47" height="17" x="146.55" y="0"/>
<use xlink:href="#Brick" width="47" height="17" x="195.4" y="0"/>
<use xlink:href="#Brick" width="47" height="17" x="244.25" y="0"/>
<use xlink:href="#Brick" width="47" height="17" x="293.1" y="0"/>
<use xlink:href="#Brick" width="47" height="17" x="341.95" y="0"/>
<use xlink:href="#Brick" width="47" height="17" x="390.8" y="0"/>
<use xlink:href="#Brick" width="47" height="17" x="439.65" y="0"/>
<use xlink:href="#Brick" width="47" height="17" x="488.5" y="0"/>
<!-- Bottom Layer (LtR) -->
<use xlink:href="#Brick" width="47" height="17" x="-23.5" y="17.85"/>
<use xlink:href="#Brick" width="47" height="17" x="25.35" y="17.85"/>
<use xlink:href="#Brick" width="47" height="17" x="74.2" y="17.85"/>
<use xlink:href="#Brick" width="47" height="17" x="123.05" y="17.85"/>
<use xlink:href="#Brick" width="47" height="17" x="171.9" y="17.85"/>
<use xlink:href="#Brick" width="47" height="17" x="220.75" y="17.85"/>
<use xlink:href="#Brick" width="47" height="17" x="269.6" y="17.85"/>
<use xlink:href="#Brick" width="47" height="17" x="318.45" y="17.85"/>
<use xlink:href="#Brick" width="47" height="17" x="367.3" y="17.85"/>
<use xlink:href="#Brick" width="47" height="17" x="416.15" y="17.85"/>
<use xlink:href="#Brick" width="47" height="17" x="465" y="17.85"/>
</svg> </svg>

2
structure/template.php
View file

@ -60,7 +60,7 @@ $pagename = $infopage[4]; // nom de la page exact servant à appeler le css
<?php include $relativepath."structure/footer.php"; ?> <?php include $relativepath."structure/footer.php"; ?>
</footer> </footer>
<img src="<?php echo $relativepath.'assets/img/menu/menu.svg'; ?>" class="menu_space_bottom"> <!-- c'est 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 -->
</body> </body>
</html> </html>
<?php <?php