<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>

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

  <p class="warning">
        This example demonstrates cutting-edge features that the <a href="" target="_blank">Adobe Web Platform Team</a> is working on. To see these features in action, <a href="" target="_blank">enable CSS Regions</a> in a browser which supports them:
        <a href="" target="_blank">CSS Regions Support Matrix</a>.      
  <p class="instructions">Resize the viewport and observe the menus.</p>
  <p class="instructions">
    This example demonstrates how to use <a href="" target="_blank">CSS Regions</a> to flow menu items into a side-menu when they don't fit the main menu.
  Don't have CSS Regions? Watch a <a href="" target="_blank">video demo</a> by <a href="" target="_blank">@simevidas</a>.
  <p>Inspired by the <a href="" target="_blank">The Guardian</a>'s responsive menu. Built by <a href="" target="_blank">@razvancaliman</a>.


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

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

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

  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;

  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 */
  flow-from: menu;

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

  padding: 1rem 3rem;
  width: 50%;

  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;

  font: 2.5rem/2.8rem normal georgia, serif;

  color: #444;
  font: 1.2rem/1.6rem normal georgia, serif;


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

var property = "flow-into";

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

property = isCapable ? property : 'no-' + property;
Loading ..................