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

44
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;
} }

234
structure/menu.php
View file

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