I saw a Dribbble shot the other day by Eli Brumley that had a cool interactive effect. A simple circular blue button, when clicked, expands into a small menu itself. I fired up Professor Mode on CodePen to let people watch as I built, but I also recorded it so I could talk my way through it and publish it here.
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.
The following is a guest post by Micah Miller-Eshleman. Micah designed a variation of the "Priority+ Navigation" concept and uses it in production at the college he works for. I always dig a show & tell behind the thinking and creation of a design pattern, especially when it's working out there in the real world.
The best part about CSS is that it allows web developers to achieve more with less. What exactly does that mean? Well, for a start, CSS allows developers to:
- Code much, much less XHTML
- Separate website formatting from content
- Control as much of the website theme/design as the developer allows himself with one CSS file
- Easily adapt website display to the user instead of the user adapting to the website
- Change the display of our website for specific devices and special circumstances
The list goes on and on. The functionality to do great things with less code is there; it's up to the developer to code the XHTML to take full advantage of the power of CSS. One place I often see CSS being under-utilized is with navigation menus.