Post pobrano z: Squeezy Stretchy Flexbox Nav

I saw an interesting take on off-canvas navigation the other day over on The New Tropic. It wasn’t the off-canvas part so much. It was how the elements within the nav took up space. They stretched out to take up all the space, when available, but never squished too far. Those are concepts that flexbox makes pretty easy to express! Let’s dig in a little.

Here’s the nav, a video showing what I mean:

My favorite part is how there are submenus. When a submenu is toggled open, the same rules apply. If some stretching has happened, the nav items will shrink in height, making room for the submenu. But never shrink too far. If there isn’t room, the menu will just scroll.

Standard Two-Level Nav HTML

Pretty easy to mock out with Emmet:

<nav class="main-nav">
  <ul class="nav-list">
    <li><a href="">Lorem ipsum.</a></li>
    <li>
      <button class="submenu-toggle-button">+</button>
      <a href="">Explicabo, perspiciatis.</a>
      <ul class="submenu nav-list">
        <li><a href="">Lorem ipsum.</a></li>
        <li><a href="">Culpa, qui!</a></li>
        <li><a href="">Repudiandae, eaque.</a></li>
      </ul>
    </li>
    <li><a href="">Sit, dolor.</a></li>
    <li><a href="">Dicta, possimus?</a></li>
    
    <!-- etc -->

  </ul>
</nav>

Flexbox the Column

Let’s make sure that list is as tall as the browser window, which is easy with viewport units. Then make sure each of the list items stretch to fill the space:

.main-nav > ul {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main-nav > ul > li {
  flex: 1;
}

We’ve already gotten almost all the way there! Stretching works great, only when there is room, like we want:

Quick Toggles

We have a <button> in place to toggle the submenus (arguably, we should probably place those buttons with JavaScript, since they don’t do anything without). Here’s how they could work. The submenus are hidden by default:

.submenu {
  max-height: 0;
  transition: 0.5s;
  overflow: hidden;
}

We can open it with a class:

.submenu.open {
  max-height: 200px; /* non-ideal magic number */
}

We’re animating to an unknown height here, which is tricky. We hope to have a good article addressing this out soon (there are options).

Toggling classes is plenty easy:

var buttons = document.querySelectorAll('.submenu-toggle-button');

[].forEach.call(buttons, function(button) {
  button.addEventListener('click', function() {
    var submenu = button.parentNode.querySelector('.submenu');
    submenu.classList.toggle('open');
  });
});

That gets those submenus behaving like we want:

Demo

You’ll probably need to pop over to the Pen to play with the vertical stretching stuff.

See the Pen Squeezy Stretchy Nav by Chris Coyier (@chriscoyier) on CodePen.

Squeezy Stretchy Flexbox Nav is a post from CSS-Tricks

Post pobrano z: “lives in a sort of purgatory”

Brad Frost:

A front-end designer … lives in a sort of purgatory between worlds:

• They understand UX principles and best practices, but may not spend their time conducting research, creating flows, and planning scenarios
• They have a keen eye for aesthetics, but may not spend their time pouring over font pairings, comparing color palettes, or creating illustrations and icons.
• They can write JavaScript, but may not spend their time writing application-level code, wiring up middleware, or debugging.
• They understand the importance of backend development, but may not spend their time writing backend logic, spinning up servers, load testing, etc.

A front-end developer is aware.

Direct Link to Article — Permalink

“lives in a sort of purgatory” is a post from CSS-Tricks

Post pobrano z: “Write a script”

Jeremy Keith, on teaching people JavaScript for the first time:

A lot of that boils down to this pattern:

When (some event happens), then (take this action).

We brainstormed some examples of this e.g. „When the user submits a form, then show a modal dialogue with an acknowledgment.” I then encouraged them to write a script …but I don’t mean a script in the JavaScript sense; I mean a script in the screenwriting or theater sense. Line by line, write out each step that you want to accomplish. Once you’ve done that, translate each line of your English (or Portuguese) script into JavaScript.

Pseudo code. I’m a big fan.

Writing a code flow out in plain English works great for beginners, and in my experience remains useful forever. I find myself regularly writing pseudo code in Slack and in bug/idea tickets, although I’ve perhaps graduated from plain English to my own weird non-language:

IF (user_is_pro? AND has_zero_posts)
  OR (signed_up_less_than_three_days_ago) {
    // ajax for stuff
    // show thing
}

Direct Link to Article — Permalink

“Write a script” is a post from CSS-Tricks

Post pobrano z: Prepd

Post pobrano z: Heydays Design Agency

Post pobrano z: Hum Creative

Post pobrano z: Paul Valentine