forked from vergnet/site-accueil-insa
menu avec liens possibles
This commit is contained in:
Guillaume Joffre
parent
7f0e9ae4fd
commit
cb5308f10f
3 changed files with 198 additions and 136 deletions
|
|
@ -1,9 +1,45 @@
|
|||
.menuimg {
|
||||
.menu {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-width: 100vmax;
|
||||
min-width: 96vmax;
|
||||
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;
|
||||
}
|
||||
|
|
@ -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"
|
||||
width="512" height="96" x="0px" y="0px"
|
||||
viewBox="0 416 512 96" xml:space="preserve">
|
||||
<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;}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
class="tuyau" id="parent"
|
||||
viewBox="0 0 44 78">
|
||||
|
||||
use {
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
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">
|
||||
<!-- 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"/>
|
||||
|
|
@ -71,91 +18,170 @@ if(!isset($relativepath)) {
|
|||
<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">
|
||||
<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>
|
||||
|
||||
<!-- Tuyau : Dégradé -->
|
||||
<rect x="436" y="443.5" class="st12" width="28" height="50"/>
|
||||
<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 : 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"/>
|
||||
<!-- Ouverture : Fond -->
|
||||
<rect x="0" y="0" class="st9" width="44" height="14"/>
|
||||
|
||||
<!-- Cylindre : Reflet Fort -->
|
||||
<rect x="443.43" y="445.39" class="st13" width="5.5" height="48.11"/>
|
||||
<!-- Cylindre : Fond -->
|
||||
<rect x="5" y="14" class="st10" width="34" height="50"/>
|
||||
|
||||
<!-- Cylindre : Reflet Faible -->
|
||||
<rect x="441.93" y="445.39" class="st14" width="1.5" height="48.11"/>
|
||||
<!-- Ouverture : Dégradé -->
|
||||
<rect x="0" y="0" class="st11" width="38" height="14"/>
|
||||
|
||||
<!-- Ouverture : Ombre projetée -->
|
||||
<rect x="436" y="443.5" class="st15" width="34" height="1.35"/>
|
||||
</g>
|
||||
<!-- 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 id="Ombre_-_Tuyau" x="436" y="472.27" class="st15" width="34" height="1.35"/>
|
||||
|
||||
<!-- Fond -->
|
||||
<rect id="Fond_-_Briques" x="0" y="474" class="st16" width="512" height="38"/>
|
||||
|
||||
<!-- Fond : Surface -->
|
||||
<rect id="Surface_-_Briques" x="0" y="473.62" class="st17" width="512" height="0.75"/>
|
||||
|
||||
|
||||
<!-- 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="20" x="97.7" y="471.65"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="146.55" y="471.65"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="195.4" y="471.65"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="244.25" y="471.65"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="293.1" y="471.65"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="341.95" y="471.65"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="390.8" y="471.65"/>
|
||||
|
||||
<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) -->
|
||||
<use xlink:href="#Brick" width="47" height="20" x="-23.5" y="493.5"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="25.35" y="493.5"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="74.2" y="493.5"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="123.05" y="493.5"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="171.9" y="493.5"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="220.75" y="493.5"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="269.6" y="493.5"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="318.45" y="493.5"/>
|
||||
|
||||
<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"/>
|
||||
|
||||
<use xlink:href="#Brick" width="47" height="20" x="465" y="493.5"/>
|
||||
<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;}
|
||||
.st1{fill:#C06538;}
|
||||
.st2{fill:#2B0A00;}
|
||||
.st3{fill:#914522;}
|
||||
.st4{fill:#9B4D25;}
|
||||
.st5{fill:#A04E26;}
|
||||
.st6{fill:#491A05;}
|
||||
.st7{fill:#3F1403;}
|
||||
.st8{fill:#BA6135;}
|
||||
.st16{fill:#392313;}
|
||||
.st17{fill:#492715;}
|
||||
</style>
|
||||
<style type="text/css">
|
||||
|
||||
.menu-link text {
|
||||
fill: white;
|
||||
text-anchor: middle;
|
||||
alignment-baseline: central;
|
||||
dominant-baseline: central;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- This svg create an image of a brick and cache it for further <use>s-->
|
||||
<symbol id="Brick" viewBox="0 0 47 17">
|
||||
<rect x="1" y="1" class="st0" width="45" height="15"/>
|
||||
|
||||
<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 -->
|
||||
<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 -->
|
||||
|
||||
<polygon class="st5" points="47,1.5 45.5,1.5 45.5,0"/> <!-- TR corner -->
|
||||
<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 -->
|
||||
<polygon class="st8" points="0,1.5 1.5,1.5 1.5,0"/> <!-- TL corner -->
|
||||
</symbol>
|
||||
|
||||
|
||||
<!-- Fond -->
|
||||
<rect x="0" y="2.85" class="st16" width="512" height="32"/>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ $pagename = $infopage[4]; // nom de la page exact servant à appeler le css
|
|||
<?php include $relativepath."structure/footer.php"; ?>
|
||||
</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>
|
||||
</html>
|
||||
<?php
|
||||
|
|
|
|||
Loading…
Reference in a new issue