diff --git a/files/menu.png b/files/menu.png
new file mode 100644
index 0000000..84def69
Binary files /dev/null and b/files/menu.png differ
diff --git a/index.html b/index.html
index 80fd3af..5f8e752 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/mon_site.css b/mon_site.css
index 92f376d..58f80f4 100644
--- a/mon_site.css
+++ b/mon_site.css
@@ -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;
+}
