vergnet/site-accueil-insa
2
1
Fork 1
Code Issues Pull requests Releases 2 Wiki Activity

Improved sidenav animations

Browse source
This commit is contained in:
Keplyx 2018-05-24 16:28:59 +02:00
parent 0af42ee8aa
commit b9e66e1cfc
3 changed files with 44 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
assets/css/sidenav.css
View file

@ -8,7 +8,6 @@
z-index: 1000; z-index: 1000;
top: 0; top: 0;
left: 0; left: 0;
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
text-align: left; text-align: left;
background: linear-gradient(to right, #1c1c1c, transparent 90%); background: linear-gradient(to right, #1c1c1c, transparent 90%);
@ -16,21 +15,31 @@
#sidenav-scroll { #sidenav-scroll {
padding: 50px 0 50px 0; padding: 80px 0 50px 0;
width: 100%; width: 100%;
} }
/* The navigation menu links */ /* The navigation menu links */
.sidenav a { .sidenav a {
padding: 8px 0 8px 0; padding: 0;
margin: 0 30px 0 30px; margin: 0;
text-decoration: none; text-decoration: none;
font-size: 20px; font-size: 20px;
color: #f0f0f0; color: #f0f0f0;
display: inline-flex; display: inline-flex;
transition: 0.3s; transition: 0.3s;
height: 30px; height: 40px;
width: 100%;
}
.sidenav a .sidenav-content {
margin: 0;
padding-left: 20px;
width: 100%;
height: 100%;
display: inline-flex;
transition: 0.3s;
} }
.sidenav-icon, .sidenav-image { .sidenav-icon, .sidenav-image {
@ -47,9 +56,9 @@
padding: 0; padding: 0;
} }
.sidenav a:hover { .sidenav a .sidenav-content:hover {
color: #1a5dad; color: #1a5dad;
margin-left: 20px; padding-left: 40px;
} }
.sidenav .separator { .sidenav .separator {
@ -65,9 +74,6 @@
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a { .sidenav a {
font-size: 18px; font-size: 18px;
} }

2
coms.php
View file

@ -41,6 +41,8 @@ $comRespo2 = "Blaise MAUGARD";
$comRespo2Id = "bmaugard"; $comRespo2Id = "bmaugard";
include("includes/coms/com_template.php"); include("includes/coms/com_template.php");
$comRespo2 = "";
$comTitle = "COM Hubble"; $comTitle = "COM Hubble";
$comDescription = "Souriez vous êtes filmés"; $comDescription = "Souriez vous êtes filmés";
$comRespo = "Lyana LETOURNEAU"; $comRespo = "Lyana LETOURNEAU";

41
includes/sidenav.html
View file

@ -1,21 +1,32 @@
<div id="menuSidenav" class="sidenav"> <div id="menuSidenav" class="sidenav">
<div id="sidenav-scroll"> <div id="sidenav-scroll">
<a href="index.php" id="index" class="page-link"><i class="fas fa-home sidenav-icon"></i> L'Accueil</a> <a href="index.php" id="index" class="page-link"><span class="sidenav-content"><i
<a href="planning.php" id="planning" class="page-link"><i class="fas fa-calendar-alt sidenav-icon"></i> Le class="fas fa-home sidenav-icon"></i> L'Accueil</span></a>
Planning</a> <a href="planning.php" id="planning" class="page-link"><span class="sidenav-content"><i
<a href="parrainage.php" id="parrainage" class="page-link"><i class="fas fa-user-plus sidenav-icon"></i> Le class="fas fa-calendar-alt sidenav-icon"></i> Le
Parrainage</a> Planning</span></a>
<a href="blouse.php" id="blouse" class="page-link"><i class="fas fa-tshirt sidenav-icon"></i> La Blouse</a> <a href="parrainage.php" id="parrainage" class="page-link"><span class="sidenav-content"><i
<a href="photos.php" id="photos" class="page-link"><i class="fas fa-camera sidenav-icon"></i> Les Photos</a> class="fas fa-user-plus sidenav-icon"></i> Le
Parrainage</span></a>
<a href="blouse.php" id="blouse" class="page-link"><span class="sidenav-content"><i
class="fas fa-tshirt sidenav-icon"></i> La Blouse</span></a>
<a href="photos.php" id="photos" class="page-link"><span class="sidenav-content"><i
class="fas fa-camera sidenav-icon"></i> Les Photos</span></a>
<div class="separator"></div> <div class="separator"></div>
<a href="usa.html" id="usa" class="page-link"><img src="assets/images/usa_logo.svg" class="sidenav-image"> La <a href="usa.html" id="usa" class="page-link"><span class="sidenav-content"><img
Team USA</a> src="assets/images/usa_logo.svg" class="sidenav-image"> La
<a href="urss.html" id="urss" class="page-link"><img src="assets/images/urss_logo.svg" class="sidenav-image"> La Team USA</span></a>
Mère Patrie</a> <a href="urss.html" id="urss" class="page-link"><span class="sidenav-content"><img
<a href="stats.php" id="stats" class="page-link"><i class="fas fa-list-ol sidenav-icon"></i> Les Stats</a> src="assets/images/urss_logo.svg" class="sidenav-image"> La
Mère Patrie</span></a>
<a href="stats.php" id="stats" class="page-link"><span class="sidenav-content"><i
class="fas fa-list-ol sidenav-icon"></i> Les Stats</span></a>
<div class="separator"></div> <div class="separator"></div>
<a href="coms.php" id="coms" class="page-link"><i class="fas fa-users sidenav-icon"></i> Les Coms</a> <a href="coms.php" id="coms" class="page-link"><span class="sidenav-content"><i
<a href="prevs.php" id="prevs" class="page-link"><i class="fas fa-medkit sidenav-icon"></i> La Prévention</a> class="fas fa-users sidenav-icon"></i> Les Coms</span></a>
<a href="infos.php" id="contact" class="page-link"><i class="fas fa-info sidenav-icon"></i> Les Infos</a> <a href="prevs.php" id="prevs" class="page-link"><span class="sidenav-content"><i
class="fas fa-medkit sidenav-icon"></i> La Prévention</span></a>
<a href="infos.php" id="contact" class="page-link"><span class="sidenav-content"><i
class="fas fa-info sidenav-icon"></i> Les Infos</span></a>
</div> </div>
</div> </div>