CodePen

HTML

            
              <header>
  <nav id="nav-global">
    <a href="#">Home</a>
    <a href="#">World</a>
    <a href="#">Technology</a>
    <a href="#">Business</a>
    <a href="#">Travel</a>
    <a href="#">Environment</a>
    <a href="#">Comment</a>
    <a href="#">Sport</a>
    <a href="#">Life & style</a>
  </nav>

  <div id="menu">
    <a href="#" class="toggle"></a>
    
    <aside class="visible">
      <nav id="nav-compact">
        <!-- #global nav items will flow here -->
      </nav>
      <em>
        Overflow menu items will appear above.
      </em>
    </aside>
    
  </div>
</header>
  
<article>
  <h1>Responsive menu using CSS Regions</h1>

  <p class="warning">
        This example demonstrates cutting-edge features that the <a href="http://html.adobe.com/webplatform/" target="_blank">Adobe Web Platform Team</a> is working on. To see these features in action, <a href="http://html.adobe.com/webplatform/enable/" target="_blank">enable CSS Regions</a> in a browser which supports them:
        <a href="http://html.adobe.com/webplatform/layout/regions/browser-support/" target="_blank">CSS Regions Support Matrix</a>.      
  </p>
  
  <p class="instructions">Resize the viewport and observe the menus.</p>
  
  <p class="instructions">
    This example demonstrates how to use <a href="http://html.adobe.com/webplatform/layout/regions/" target="_blank">CSS Regions</a> to flow menu items into a side-menu when they don't fit the main menu.
  </p>
  
  <p>
  Don't have CSS Regions? Watch a <a href="http://www.youtube.com/watch?v=lrnMcOV_VxA" target="_blank">video demo</a> by <a href="https://twitter.com/simevidas" target="_blank">@simevidas</a>.
  </p>
  
  <p>Inspired by the <a href="http://www.theguardian.com/world?view=mobile" target="_blank">The Guardian</a>'s responsive menu. Built by <a href="https://twitter.com/razvancaliman" target="_blank">@razvancaliman</a>.
  </p>
  
</article>  
            
          
!
via HTML Inspector

CSS

            
              body, html{
  margin: 0;
  padding: 0;
}

#nav-global a:hover{
  text-decoration: underline;
}

header{
  box-sizing: border-box;
  display: flex;
  height: 3rem;
  border-bottom: 1px solid #E3E3DB;
  background: #F4F4EE;
}


#nav-global{
  height: 3rem;
  flex: 1 1 auto;
  padding-left: 3rem;
}

#nav-global a{
  text-decoration: none;
  margin-right: 1.3rem;
  padding: 0.5rem 0 0;
  float: left;
  color: #333;
  font: 1.3rem/1.9rem normal georgia,serif;
}

#menu{
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 4rem;
  position: relative;
  background: #214583;
}

#menu aside{
  visibility: hidden; /* toggled by JavaScript */
  background: #214583;
  width: 10rem;
  padding: 0.5rem 1rem 1rem;
  position: absolute;
  top: calc(3rem - 1px);
  border: none;
  right: 0;
}

#menu aside.visible{
  visibility: visible;
}

#menu em{
  display: block;
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid #E24D4D;
  color: rgba(252,252,252,0.7);
  font-family: helvetica, arial, serif;
}

#menu .toggle{
  display: block;
  width: 4rem;
  height: 3rem; 
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTIiIHdpZHRoPSIxOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAuNSAxOCAxMiIgdmlld0JveD0iMCAwLjUgMTggMTIiPjxyZWN0IHk9Ii41IiB3aWR0aD0iMTgiIGhlaWdodD0iMiIgZmlsbD0iI2ZmZiIvPjxyZWN0IHk9IjUuNSIgd2lkdGg9IjE4IiBoZWlnaHQ9IjIiIGZpbGw9IiNmZmYiLz48cmVjdCB5PSIxMC41IiB3aWR0aD0iMTgiIGhlaWdodD0iMiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
  background-position: center center;
  background-repeat: no-repeat;
}

/* collect all nav links */
#nav-global a{
  flow-into: menu;
}

/* reflow nav links into original container and overflow into another element */
#nav-global,
#nav-compact{
  flow-from: menu;
}

/* region-styling for overflow region */
@-webkit-region #nav-compact{
  #nav-global a{
    color: white;
  }
}


article{
  padding: 1rem 3rem;
  width: 50%;
}

.warning{
  background: #ffc;
  color: black;
  padding: 1em;
  margin: 0 0 0 -1em;
  display: none;
}

.no-flow-into .instructions{
  display: none;
}
.no-flow-into .warning{
  display: block;
}

h1{
  font: 2.5rem/2.8rem normal georgia, serif;
}

p{
  color: #444;
  font: 1.2rem/1.6rem normal georgia, serif;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var toggle = document.querySelector('.toggle'),
    aside = document.querySelector('aside');
    
toggle.addEventListener('click', function(){
  aside.classList.toggle('visible')
})

var property = "flow-into";

// check if any variant exists, prefixed or not
var isCapable = ['-webkit-','-ms-','-moz-',''].some(function(prefix){
  return prefix + property in document.body.style 
})

property = isCapable ? property : 'no-' + property;
 
document.body.classList.add(property)
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................