matthieu/dubuval
1
0
Fork 0
Code Releases Activity

Amélioration sommaire

Browse Source
This commit is contained in:
Matthieu Dubuget 2018-09-30 12:11:08 +02:00
parent 01f94a54c9
commit f9f3045fc4
3 changed files with 77 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
files/menu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

58
index.html
View File

@ -34,6 +34,17 @@
.galleria{ width:100% }
.galleria-theme-classic { background: #aaaaaa}
</style>
<script type='text/javascript'>
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</head>
<body>
@ -793,30 +804,29 @@
</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 -->
<div class="sommaire">
<div class="insommaire">
<nav>
<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">Piece 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="#tarifs">Tarifs et planning</a></li>
</ul>
</nav>
</div>
<div class="insommaire">
<p class="vert">Sommaire</p>
</div>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<nav>
<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">Piece 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="#tarifs">Tarifs et planning</a></li>
</ul>
</nav>
</div>
<div>
<a href="#head" onclick="openNav()">
<img id="fixedbutton" src="files/menu.png" >
</a>
</div>
</body>
</html>

52
mon_site.css
View File

@ -1023,13 +1023,47 @@ footer.bk-footer{padding:3em 0;}
}
table {width: 450px; height: 204px;border-collapse: collapse; border-spacing: 0px; font: inherit; border: 0px none;background-color:rgb(255,255,255);text-align:center}
tr.table_header {height: 19px;background-color: rgb(230, 230, 230);font-weight: bold;}
div.sommaire {
position:fixed;
left: -175px;
top: 90px;
transition: 0.5s;
background-color: rgb(230, 230, 230);
}
div.sommaire:hover {left: 10px}
p.vert {writing-mode: tb-rl}
div.insommaire {display:table-cell}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#fixedbutton {
position: fixed;
top: 10px;
left: 10px;
}