Hamburger menu

11 years ago · 2fbbee5daa
--- a/hamburger.js
+++ b/hamburger.js
@ -0,0 +1,9 @@
 var button = document.getElementById("hamburgerButton");
 var menu = document.getElementById("hamburgerMenu");

 var open = false;

 button.addEventListener('click', function(){
  menu.style.left = (open)? '-382px' : '0px';
  open = !open;
 }, false);
--- a/images/menu.png
+++ b/images/menu.png
--- a/index.css
+++ b/index.css
@ -1,6 +1,6 @@
 body
 {
    padding:0px;    
    padding:0px;
    overflow:hidden;
 }

@ -38,7 +38,7 @@ nav
 {
    position: absolute;
    top:0px;
    left:0px;
    left:-382px;
    width: 380px;
    height: 100%;
    padding: 0px;
@ -47,6 +47,9 @@ nav
    border-right: 2px solid #2b2b2b;
    z-index: 50;
    margin:0;

    transition-property:all;
    transition-duration:0.4s;
 }

 nav .onglet
@ -209,7 +212,7 @@ table

 tr
 {
  height:250px;  
  height:250px;
  border-style:none;
  margin:0;
  width:100%;
--- a/index.html
+++ b/index.html
@ -9,11 +9,12 @@
    </head>
    <body>
        <header id="title">
            <a id="hamburgerButton" href="#"><img alt="menu" src="./images/menu.png" /></a>
            <img alt="logo ESIR" src="./images/esir.png" />
            <img class="rightLogo" alt="logo Kiwi" src="./images/KiWiCalendar.png" />
        </header>
        
        


        <nav id="hamburgerMenu">
        <a id="ancherESIR" href="#ESIR" onclick="alert('Click on ESIR');">
            <div class="onglet" id="onglet-esir">
@ -154,8 +155,8 @@
 						<div id="link">Invasion de kakapos</div></td>
 					</tr>
 				</table>
        
        


 		      <div id="footer">
 							<div id="TextFooter">
 							<div id="exMois">
@ -167,5 +168,6 @@
 						  </div>
 		      <div>
        </div>
        <script src="hamburger.js"></script>
    </body>
 </html>