Pages

Tuesday, November 05, 2013

JS, CSS, HTML - Collapsible panel 

<html>
  <head>
    <meta charset="utf-8"/>
    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      table {
        empty-cells: hide;
        border-collapse: collapse;
        border-spacing: 0;
        border: 0;
      }
      tr, td, th {
        padding: 0;
        border: 0;
      }
      #page {
        background-color: blue;
        width: 100%;
        height: 100%;
      }
      #header {
        background-color: black;
        padding: 5px;
      }
      #menu {
        background-color: #ccc;
        width: 150px;
        height: 100%;
        padding: 10px;
        overflow: hidden;
      }
      #menu-text {
        color: #000;
        width: 150px;
      }
      #content {
        background-color: #555;
        height: 100%;
        padding: 10px;
        color: #fff;
      }
    </style>
    <script type="text/javascript">
      var menuVisible = true;
      var menuWidth = 0;
      var menuAnimationHandler = null;

      function stopMenu() {
        if (menuAnimationHandler)
          clearTimeout(menuAnimationHandler);
      }

      function hideMenu() {
        stopMenu();

        document.getElementById('btnMenu').innerHTML = 'Show menu';

        menuVisible = false;

        if (menuWidth <= 0) {
          document.getElementById('col_menu').style.visibility = 'hidden';
          document.getElementById('col_menu').style.display = 'none';

          return;
        }

        menuWidth -= 10;

        //alert(menuWidth);

        document.getElementById('menu').style.width = menuWidth + 'px';

        menuAnimationHandler = setTimeout(function() {
          hideMenu();
        }, 10);
      }

      function showMenu() {
        stopMenu();

        document.getElementById('btnMenu').innerHTML = 'Hide menu';

        menuVisible = true;

        document.getElementById('col_menu').style.visibility = 'visible';
        document.getElementById('col_menu').style.display = 'table-cell';

        if (menuWidth > 150) {
          return;
        }

        menuWidth += 10;

        document.getElementById('menu').style.width = menuWidth + 'px';

        menuAnimationHandler = setTimeout(function() {
          showMenu();
        }, 10);
      }

      function toogleMenu() {
        menuWidth = document.getElementById('menu').offsetWidth;

        if (menuVisible) {
          hideMenu();
        }
        else {
          showMenu();
        }
      }
    </script>
  </head>
  <body>
    <div id="header">
      <button id="btnMenu" onclick="toogleMenu();">Show Menu</button>
    </div>
    <table width="100%" height="100%">
      <tr>
        <td width="1" valign="top" id="col_menu">
          <div id="menu">
            <div id="menu-text">
              Menu item 01<br/>
              Menu item 02<br/>
              Menu item 03<br/>
              Menu item 04<br/>
              Menu item 05
            </div>
          </div>
        </td>
        <td valign="top">
          <div id="content">
            <div id="content-text">
              Test<br/>
              Testing 1 2 3...
            </div>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>
Postado por Allann Jones às 3:27 PM

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)