Front-end development is as an opportunity to bring design details to life. I love working on subtle interface animations and transitions for sites I’m designing, testing to see how well they scale across viewport widths, while doing my best to write simple markup.
The trick is to reveal the
nav-submenu div on hover of the parent
nav-item div. If
nav-item is relateively positioned, then the subnav can be positioned absolutely within it. The same code can be reused to add a submenu within each
nav-item in the main nav.
The network icons slide in with css animations. The position of the icon image, and the padding on the containing link, have two states.
The default state sets the icon’s left margin to be -20px. The
overflow:hidden;line in the
.nav-submenuclass means these icons won’t be visible.
The hover state for links within the submenu, moves the icon to a position where it is visible and adjusts the padding of the text in the link accordingly, so the whole row looks like it’s sliding together to the right as the icon appears.
I also added opacity as a pararmeter that changes, to enhance the animated transition. The same idea and scss approach is applied to the last “view all” link, but a pseudo element is added to contain the → character that appears on hover.