Modifier le 01/06 pour gérer ouverture à gauche ('l') ou à droite ('r')

Objectif : Disposer d'un panneau de liens coulissant (non visible, ouvrable avec un bouton) qui reste en place sans défiler avec la page.

Partie HTML

<div id="mySidenav" class="sidenav"><a class="closebtn" style="cursor: pointer;" onclick="closeNav()"> ×</a> <a href="/codes-java-c28529942">Codes java</a> <a href="/codes-css-c28530540">Codes CSS</a> <a href="http://le-blog-facile.ek.la/generateur-de-code-css-p285703" target="_blank">Générateur CSS</a> <a href="http://esprima.org/demo/validate.html" target="_blank">Vérif syntaxe java</a> <a href="http://www.w3schools.com/jsref/" target="_blank">W3School</a> <a href="http://le-blog-facile.ek.la/" target="_blank">Blog facile Papasti</a> <a href="https://developer.mozilla.org/fr/" target="_blank">Mozilla dev</a> <a href="http://mootools.net/core/docs/1.5.1/Element/Element#Window" target="_blank">Mootools</a></div> <p><span style="font-size: 30px; cursor: pointer;" onclick="openNav('l')">☰ open</span></p>

Partie CSS

/* 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; /* left: 0;change this with JavaScript */ 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: #CCC8C8; display: block; transition: 0.3s } /* When you mouse over the navigation links, change their color */ .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } /* Position and style the close button (top right corner) */ .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px !important; margin-left: 50px; } /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ #main { transition: margin-left .5s; padding: 20px; }

Partie Javascript

si cote=='l' le panneau s'ouvre à gauche sinon =="r" s'ouvre à droite

<script>// <![CDATA[ function openNav(cote) { if (cote=='r') {document.getElementById(sidenavID).style.right = "0";} if (cote=='l') {document.getElementById(sidenavID).style.left = "0";} document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } // ]]></script>

Table sorter