Vertical Layout with Mobile Navigation

Vertical Layout with Mobile Navigation

Today’s creative web design solution is coming from Ettrics – a Canadian digital agency that uses strategy, design, data & technology to create experiences.

Two of its team members came up with a vertical layout solution that uses mobile navigation to deal with the content. Vertically scrolling sections with content are navigated through a smooth mobile hamburger navigation.

Structure

The structure is simple enough to be implemented.  The navigation is structured within a nav element. The hamburger icon is created with pseudo elements and is followed by an UL list with the links to each section.

The sections structure is given a class panel and it looks like this:

<section class="panel">
<article class="panel__wrapper">
<div class="panel__content"> // content here
</div>
</article>
</section>

Styling
In order navigation to on the top left cornet at all time, it is set to position:fixed. Hiding of the UL list which is within the navigation is created by adding transform: translate(0, -100%). This is used to move the UL upwards so it can be animated downwards when the hamburger icon is clicked.

Regarding the content sections, each of the sections (<section class=”panel”>) is given a min-height:100vh which makes it fill the entite height of the viewport.

Centering the content in each section is done by using flexbox on the parent container:

.panel {
display: flex;
align-items: center; // center vertically
justify-content: center; // center horizontally }

jQuery
Toggling classes are used when the hamburger icon is clicked. For each section there are, you will notice how the content animates in when it is scrolled in.
This is done by comparing the value of $(document).scrollTop() to the .offset().top of the <section class=”panel”> elements.

If the .offset().top value is less than the value of $(document).scrollTop() than we add a class to the content of that section so it animates in when we scroll to it, otherwise, we remove that class so the content is hidden again. We then bind this function to the window objects scroll event.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

Here is a result in a Codepen snippet.

See the Pen Vertical Layout with Navigation by Ettrics (@ettrics) on CodePen.

Download Code


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *