javascript

Fullscreen Navigation

Roberto Guido

• 3 min read

Me: Well, it's 10 days to the deadline. Back-office panels are mostly done, but still I've seen nothing about design. Do you have some template, a mockup, a wireframe, a layout drawn on a Post-It...?

Designer: Errr... Nope... But it have to be like this. How elegant! How smart! Do this.

As usual, designers have no idea about what they are doing and what they are asking. And a pretty simple website expected to be published in a short timespan became an implementation challenge within five minutes, with a mere link pretending to be a full specification.

If you visit the Work.co website, mentioned above, and try to navigate using the logo on top right corner, you will be presented with a grid showing previews of the webpages you are going to see. Clicking on one of it, the preview explodes on the entire screen. I had to implement that, with a plus: the grid should not contains previews, but custom visuals for each navigable section.

I tried to look for an existing example doing this but, perhaps due the wrong keywords of my search, I've found nothing. And I re-created it.

Following, my sample components...

First of all, HTML markup. Each section sports a div.cover, to be used when navigating the grid, and a div.contents, to be expanded when the page is selected.

<html>
  <head>
    <title>Navigation Test</title>

    <link rel="stylesheet" href="nav.css">
    <script type="application/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="application/javascript" src="nav.js"></script>
  </head>
  
  <body>
    <div id="nav-sidebar">
      <a href="#grid">
        MENU
      </a>
    </div>

    <div id="grid">
      <div class="page active" id="home">
        <div class="cover">
          <p>
            Cover Home
          </p>
        </div>
        <div class="contents">
          <p>
            Contents Home
          </p>
        </div>
      </div>
      
      <div class="page" id="page1">
        <div class="cover">
          <p>
            Cover Page 1
          </p>
        </div>
        <div class="contents">
          <p>
            Contents Page 1
          </p>
        </div>
      </div>
      
      <div class="page" id="page2">
        <div class="cover">
          <p>
            Cover Page 2
          </p>
        </div>
        <div class="contents">
          <p>
            Contents Page 2
          </p>
        </div>
      </div>
      
      <div class="page" id="page3">
        <div class="cover">
          <p>
            Cover Page 3
          </p>
        </div>
        <div class="contents">
          <p>
            Contents Page 3
          </p>
        </div>
      </div>
      
      <div class="page" id="page4">
        <div class="cover">
          <p>
            Cover Page 4
          </p>
        </div>
        <div class="contents">
          <p>
            Contents Page 4
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

Then, my usual jQuery hack. It mostly changes CSS classes on different events.

$(document).ready(function() {
  function expandPage(identifier) {
    var page = $('#' + identifier);
    $('.page').not(page).removeClass('active');
    page.addClass('active');
    location.hash = '#' + identifier;
  }

  $('#nav-sidebar a').click(function() {
    $('.page').removeClass('active');
  });

  $('.cover').click(function() {
    expandPage($(this).closest('.page').attr('id'));
  });
  
  if (location.hash != '') {
    if (location.hash == '#grid')
      $('#nav-sidebar a').click();
    else
      $(location.hash + ' .cover').click();
  }
});

Finally, the CSS part: this provides the effective instructions for the visual effect. Please note the few lines at the end: this is mobile-ready.

body {
  font-size: 30px;
}

#nav-sidebar {
  text-align: center;
  display: inline-block;
  width: 10%;
  float: left;
}

#grid {
  display: inline-block;
  width: 90%;
  flex-wrap: wrap;
  position: relative;
  float: left;
}

.page .cover {
  transition: all 0.5s ease-in-out 0s;
  text-align: center;
  display: table;
  height: 300px;
  width: calc(50% - 110px);
  float: left;
  box-size: border;
  border: 2px solid red;
  margin-left: 100px;
  margin-bottom: 20px;
  overflow: hidden;
  cursor: pointer;
}

.page.active .cover {
  transition: all 0.5s ease-in-out 0s;
  transform: scale(0.5);
}

.page .contents {
  transition: all 0.5s ease-in-out 0s;
  text-align: center;
  display: table;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.page.active .contents {
  transform: translate(0, 0);
  transition: all 0.5s ease-in-out 0s;
  background-color: #444;
  opacity: 1;
  z-index: 2;
}

.page .cover p {
  display: table-cell;
  vertical-align: middle;
}

.page .contents p {
  display: table-cell;
  vertical-align: middle;
}

@media (max-width: 800px) {
  #nav-sidebar {
    float: none;
    width: 100%;
    margin-bottom: 10px;
  }
  
  #grid {
    float: none;
    width: 100%;
  }
  
  .page .cover {
    width: calc(50% - 20px);
    margin-left: 10px;
  }
}

The effect is not exactly the same of the original website, as the cards are not pop'd in and out but transition between page and navigation mode happens as a content fade, but I think it is still good enough.