The Fab Four Techinc (with max-width only)

by Konstantin Rouda

HTML

<!--Truncating Menu-->
  
  <!--Toggle Menu Won't work here, due to thimble restriction on href="#" -->
  <nav  id="menu">
    <ul class="menu">
      <li class="menu__item"><a href="#x">First</a></li>
      <li class="menu__item"><a href="#x">Second</a></li>
      <li class="menu__item"><a href="#x">Third</a></li>
      <li class="menu__item"><a href="#x">Fourth</a></li>
      <li class="menu__item"><a href="#x">Fifth</a></li>
      <li class="menu__item"><a href="#x">Sixth</a></li>
      <li class="menu__item"><a href="#x">Seventh</a></li>
      <li class="menu__item toggle-btn open-btn">
        <a href="#menu">Open</a>
      </li>
      <li class="menu__item toggle-btn close-btn">
        <a href="#x">Close</a>
      </li>
    </ul>
  </nav>  
  
  
  
  
  <!--<div class="container">
    <div class="child">

    </div>
  </div>

  <p class="log">

  </p>


  <script>

    const log = document.querySelector(".log");
    const container = document.querySelector(".container");

    window.addEventListener("resize", function(e) {

      log.textContent = "container width: " + container.offsetWidth;

    });

  </script>-->

CSS

HTML {
  font-family: "Libre Baskerville", "Open Sans", sans-serif, serif;
  font-size: 100%;
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  color: #3a3d40;
  margin: 0;
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

.log {
  max-width: 50%;
  margin: 2em auto 0;
  font-size: 2em;
  text-align: center;
}


.container {
  max-width: 70%;
  margin: 2em auto 0;
  border: 1px solid;
}

/*
Here in our example, child element will disappear
when width of its container (parent element)
will be less than or equal to 900px. 
Otherwise child container will occupy 50% of its parent element 
which is its max-width value
*/

.child {
  width: calc( (900px - 100%) * -900 ); 
  max-width: 50%;
  height: 20em;
  background: indianred;
}



/*Truncating Menu (Using the trick above)*/

NAV {
  height: 2.25em; /*this parameter we'll use in our toggle-button*/
  overflow: hidden;
  padding-right: 3.5em;
}

.menu {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  //justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
  color: #fff;
  background: rgba(50, 50, 50, .9);
}

.menu__item {
  //font-size: 1.5em;
  flex: 1 0 auto;
  background: rgba(110, 110, 110, 1);
  //border: 1px solid;
}

.menu__item > A {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: .37em;
  white-space: nowrap;
}

.toggle-btn {
  position: absolute;
  right: .1em; top: 0;
  width: 3.35em;
  height: calc((2.25em - 100%) * -1000);
  max-height: 2.25em;
  background: rgba(100, 100, 100, .9);
  overflow: hidden;
}


.close-btn {
  display: none;
}

NAV:target {
  height: auto;
}

NAV:target .open-btn {
  display: none;
}

NAV:target .close-btn {
  display: block;
}