rebillar/site-accueil-insa
1
1
Fork 1
forked from vergnet/site-accueil-insa
Code Issues Pull requests Releases 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;
top: 0;
left: 0;
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
text-align: left;
background: linear-gradient(to right, #1c1c1c, transparent 90%);
@ -16,21 +15,31 @@
#sidenav-scroll {
padding: 50px 0 50px 0;
padding: 80px 0 50px 0;
width: 100%;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 0 8px 0;
margin: 0 30px 0 30px;
padding: 0;
margin: 0;
text-decoration: none;
font-size: 20px;
color: #f0f0f0;
display: inline-flex;
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 {
@ -47,9 +56,9 @@
padding: 0;
}
.sidenav a:hover {
.sidenav a .sidenav-content:hover {
color: #1a5dad;
margin-left: 20px;
padding-left: 40px;
}
.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) */
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}

2
coms.php
View file

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

41
includes/sidenav.html
View file

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