Search code examples
css-frameworks

Menu items don't show on large screens (pure.css)

This is pure.css framework (https://purecss.io/). I'm trying to copy a menu from their examples.

Documentation (and a working example): https://purecss.io/layouts/tucked-menu-vertical/

html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
    <link rel="stylesheet" href="src/css/custom.css">

    <title>Hello, world!</title>
    </head>
    <body>
      <div class="custom-wrapper pure-g" id="menu">
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pure-menu">
                <a href="#" class="pure-menu-heading custom-brand">Brand</a>
                <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
            </div>
        </div>
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pure-menu pure-menu-horizontal custom-can-transform">
                <ul class="pure-menu-list">
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
                </ul>
            </div>
        </div>
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
                <ul class="pure-menu-list">
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="src/js/main.js"></script>
    </body>
</html>

css

.custom-wrapper {
  background-color: #ffd390;
  margin-bottom: 1em;
  -webkit-font-smoothing: antialiased;
  height: 2.1em;
  overflow: hidden;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}

.custom-wrapper.open {
  height: 14em;
}

.custom-menu-3 {
  text-align: right;
}

.custom-toggle {
  width: 34px;
  height: 34px;
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}

.custom-toggle .bar {
  background-color: #777;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 100px;
  position: absolute;
  top: 18px;
  right: 7px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.custom-toggle .bar:first-child {
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
}

.custom-toggle.x .bar {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.custom-toggle.x .bar:first-child {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@media (max-width: 47.999em) {
  .custom-menu-3 {
    text-align: left;
  }
  .custom-toggle {
    display: block;
  }
}
/*# sourceMappingURL=custom.css.map */

JS

  (function (window, document) {
  var menu = document.getElementById('menu'),
      rollback,
      WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';

  function toggleHorizontal() {
      menu.classList.remove('closing');
      [].forEach.call(
          document.getElementById('menu').querySelectorAll('.custom-can-transform'),
          function(el){
              el.classList.toggle('pure-menu-horizontal');
          }
      );
  };

  function toggleMenu() {
      // set timeout so that the panel has a chance to roll up
      // before the menu switches states
      if (menu.classList.contains('open')) {
          menu.classList.add('closing');
          rollBack = setTimeout(toggleHorizontal, 500);
      }
      else {
          if (menu.classList.contains('closing')) {
              clearTimeout(rollBack);
          } else {
              toggleHorizontal();
          }
      }
      menu.classList.toggle('open');
      document.getElementById('toggle').classList.toggle('x');
  };

  function closeMenu() {
      if (menu.classList.contains('open')) {
          toggleMenu();
      }
  }

  document.getElementById('toggle').addEventListener('click', function (e) {
      toggleMenu();
      e.preventDefault();
  });

  window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
  })(this, this.document);

Codepen: https://codepen.io/Kifsif/pen/xxwMQpd

The problem is that menu items on large screens are not shown.

Solution

  • Remove overflow: hidden; property from custom-wrapper class and it will be shown. Although I am not sure if menu on large screen is positioned well but that is another problem. 

    .custom-wrapper {
      background-color: #ffd390;
      margin-bottom: 1em;
      -webkit-font-smoothing: antialiased;
      height: 2.1em;
      -webkit-transition: height 0.5s;
      transition: height 0.5s;
    }