matthieu/dubuval
1
0
Fork 0
Code Releases Activity

Modif gestion nav…

Browse Source
This commit is contained in:
Matthieu Dubuget 2021-03-07 12:16:09 +01:00
parent a205fc94f2
commit 722560590c
2 changed files with 54 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
index.html
View File

@ -36,13 +36,32 @@
</style> </style>
<script type='text/javascript'> <script type='text/javascript'>
/* Set the width of the side navigation to 250px */ /* Set the width of the side navigation to 250px */
function myShow(e){e.style.display= "inline-block";}
function myHide(e){e.style.display= "none";}
function openNav() { function openNav() {
document.getElementById("mySidenav").style.width = "250px"; document.getElementById("mySidenav").style.width = "300px";
document.getElementById("fixedbuttondiv").style.visibility = "hidden";
document.getElementById("navContent").style.display = "block";
document.getElementById("closeButton").style.display = "block";
/* ct = document.getElementsByClassName("navcontent"); */
/* ct.forEach(myShow); */
/* document.getElementById("mySidenav").style.opacity = 1.0; */
/* document.getElementById("mySidenavnav").style.display = "block"; */
} }
/* Set the width of the side navigation to 0 */ /* Set the width of the side navigation to 0 */
function closeNav() { function closeNav() {
document.getElementById("mySidenav").style.width = "0"; document.getElementById("mySidenav").style.width = "0px";
document.getElementById("navContent").style.display = "none";
document.getElementById("closeButton").style.display = "none";
/* ct = document.getElementsByClassName("navcontent"); */
/* ct.forEach(myHide); */
/* document.getElementById("mySidenav").style.opacity = 1.0; */
/* document.getElementById("mySidenavnav").style.display = "none"; */
} }
/* Manage navigation visibility */ /* Manage navigation visibility */
@ -787,21 +806,23 @@
</div> </div>
<!-- Todo : regarder https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav et https://www.w3schools.com/howto/howto_js_sidenav.asp --> <!-- Todo : regarder https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav et https://www.w3schools.com/howto/howto_js_sidenav.asp -->
<div id="mySidenav" class="sidenav"> <div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a id="closeButton" href="javascript:void(0)" onclick="closeNav()">&times;</a>
<nav> <nav id="navContent">
<ul> <ul>
<li><a href="#descriptif">Descriptif</a></li> <li ><a href="#descriptif">Descriptif</a></li>
<li><a href="#situation">Situation</a></li> <li ><a href="#situation">Situation</a></li>
<li><a href="#plan">Plan</a></li> <li ><a href="#plan">Plan</a></li>
<li><a href="#piece_principale">Pièce principale</a></li> <li ><a href="#piece_principale">Pièces&nbsp;:
<li><a href="#chambre_1">Chambre 1</a></li> <a href="#piece_principale" title="Cuisine et salon">🍽</a>
<li><a href="#chambre_2">Chambre 2</a></li> <a href="#chambre_1" title="Chambre 1">🛏</a>
<li><a href="#chambre_3">Chambre 3</a></li> <a href="#chambre_2" title="Chambre 2">🛏</a>
<li><a href="#salles_eau">Salles d’eau</a></li> <a href="#chambre_3" title="Chambre 3">🛏</a>
<li><a href="#divers">Divers</a></li> <a href="#salles_eau" title="Salles d’eau">🚿</a></a>
<li><a href="#literie">Literie</a></li> </li >
<li><a href="#photos">Photos</a></li> <li ><a href="#divers">Divers</a></li>
<li><a href="#cles">Remise des clés</a></li> <li ><a href="#literie">Literie</a></li>
<li ><a href="#photos">Photos</a></li>
<li ><a href="#cles">Remise des clés</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>

23
mon_site.css
View File

@ -1025,27 +1025,31 @@ table {width: 450px; height: 204px;border-collapse: collapse; border-spacing: 0p
tr.table_header {height: 19px;background-color: rgb(230, 230, 230);font-weight: bold;} tr.table_header {height: 19px;background-color: rgb(230, 230, 230);font-weight: bold;}
p.vert {writing-mode: tb-rl} p.vert {writing-mode: tb-rl}
div#mySidenav { width = 0px;}
/* The side navigation menu */ /* The side navigation menu */
.sidenav { div.sidenav {
height: 100%; /* 100% Full-height */ height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */ width: 0px; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */ position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */ z-index: 3; /* Stay on top */
top: 0; /* Stay at the top */ top: 0; /* Stay at the top */
left: 0; left: 0;
background-color: #111; /* Black*/ background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */ over>flow-x: hidden; /* Disable horizontal scroll */
padding-top: 40px; /* Place content 60px from the top */ padding-top: 40px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ transition: 0.8s; /* 0.5 second transition effect to slide in the sidenav */
} }
.sidenav nav { display: none}
/* The navigation menu links */ /* The navigation menu links */
.sidenav a { .sidenav a {
padding: 8px 8px 8px 8px; padding: 8px 8px 8px 8px;
text-decoration: none; text-decoration: none;
/* font-size: 25px; */ /* font-size: 25px; */
color: #818181; color: #818181;
display: block; display: inline-block;
transition: 0.3s; transition: 0.3s;
} }
@ -1063,8 +1067,15 @@ p.vert {writing-mode: tb-rl}
margin-left: 40px; margin-left: 40px;
} }
a#closeButton {
display: none;
text-align: end;
font-size: 26px;
}
#fixedbutton { #fixedbutton {
position: fixed; position: fixed;
top: 10px; top: 10px;
left: 10px; left: 10px;
z-index: 2;
} }