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>
<script type='text/javascript'>
/* 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() {
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 */
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 */
@ -787,21 +806,23 @@
</div>
<!-- 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">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<nav>
<a id="closeButton" href="javascript:void(0)" onclick="closeNav()">&times;</a>
<nav id="navContent">
<ul>
<li><a href="#descriptif">Descriptif</a></li>
<li><a href="#situation">Situation</a></li>
<li><a href="#plan">Plan</a></li>
<li><a href="#piece_principale">Pièce principale</a></li>
<li><a href="#chambre_1">Chambre 1</a></li>
<li><a href="#chambre_2">Chambre 2</a></li>
<li><a href="#chambre_3">Chambre 3</a></li>
<li><a href="#salles_eau">Salles d’eau</a></li>
<li><a href="#divers">Divers</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>
<li ><a href="#descriptif">Descriptif</a></li>
<li ><a href="#situation">Situation</a></li>
<li ><a href="#plan">Plan</a></li>
<li ><a href="#piece_principale">Pièces&nbsp;:
<a href="#piece_principale" title="Cuisine et salon">🍽</a>
<a href="#chambre_1" title="Chambre 1">🛏</a>
<a href="#chambre_2" title="Chambre 2">🛏</a>
<a href="#chambre_3" title="Chambre 3">🛏</a>
<a href="#salles_eau" title="Salles d’eau">🚿</a></a>
</li >
<li ><a href="#divers">Divers</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>
</nav>
</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;}
p.vert {writing-mode: tb-rl}
div#mySidenav { width = 0px;}
/* The side navigation menu */
.sidenav {
div.sidenav {
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 */
z-index: 1; /* Stay on top */
z-index: 3; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
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 */
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 */
.sidenav a {
padding: 8px 8px 8px 8px;
text-decoration: none;
/* font-size: 25px; */
color: #818181;
display: block;
display: inline-block;
transition: 0.3s;
}
@ -1063,8 +1067,15 @@ p.vert {writing-mode: tb-rl}
margin-left: 40px;
}
a#closeButton {
display: none;
text-align: end;
font-size: 26px;
}
#fixedbutton {
position: fixed;
top: 10px;
left: 10px;
z-index: 2;
}