A fairly common solution for a site or app to conserve its screen space, is a shrinking navigation on scroll. It allows for a large header to introduce users to your sites many sections, while still giving familiar users an uncluttered view of content. In many cases it’s the best of both worlds, and why so many use it today.
Deciding to go about creating a new way to control navigation size for myself. I started looking into a CSS solution for my nav, as I knew I wanted it animated and am most familiar with web animation using CSS.
Here’s how I did it.
To start out I put together the HTML structure of the my entire header, this contains both a top notification area (.nav-memo) and then the actual navigation (.navigation).
It is important to understand a few important pieces in this structure, that we’ll need later. Currently we have ‘.nav-memo’ and ‘.navigation’ in two wrappers (‘.header’ and ‘.nav_wrap’) this lets us do a little trick on making the large and small navigations in one.
How this will ultimately work is by setting the outter wrapper to the expanded height (150px), and then having the inner wrapper be twice the desired shrunk height (100px). Once both wrappers have the same background color the two fall seamlessly into place. Both navigation sizes are then built into one.
Right now our navigation looks nothing like it should, lets take care of the content layout now and get a better picture of how this will end up looking.
You can now see what resembles the final product.
Now getting into the vertical sizing at the navigations expanded state. Here it is important to set the values so that ‘header’ is the total height you want, and that the ‘header’ and ‘.nav-wrap’ background-colors are the same.
Setting the ‘.nav-memo’ height is not necessary unless you want the scroll > catch and shrink effect mine has. Where the user scrolls normally until ‘.nav-memo’ is passed then triggers the shrinking.
Before we can trigger the navigation transition we need proper styling to transition to. Add a new class with position fixed as well as a top value if you are doing the delayed compacting, the value of that should be negative the ‘.nav-memo’ height.
Using jQuery we next grab the scroll value and check for it crossing the 50px threshold to trigger. When it is greater than 50 we add the fixed class created above.
The header now transitions to its smaller state, but the navigation does not. Shrink the navigation when it reaches the trigger by creating a new class and add/removing it in the JS like above.
And the trigger…
Now we have the nav switching between states! But it jumps, which is not what we want, to make the transition between the staes smooth add a transition to ‘nav’ in your css. Be sure to mess with this value changing up the timings and adding a bezier may improve the feel here.
Assuming you also have a logo on the left side of your navigation bar I will lastly show you how to transition the logo to minimize with the rest of your header.
We’ve added onto the ‘.nav-logo’ styling, setting the scale (I made mine a little bigger than one so that it overhangs). as well as adjusting the origin this way when it shrinks it stays aligned with your sites content. Finally apply another transition to it, though do not set this one as fast as the links.
Finally just implement the last transitions into the trigger.
Getting through the site content, you can see how easy to implement this can be. For both the shrinking nav and notification area, as well as how easy it is to adapt to your needs.
I hope you were able to make it through and understand what I did here, if you have any questions or suggestions be sure to let me know.