Source from: https://codyhouse.co/gem/stretchy-navigation/
We created the
.cd-stretchy-nav class to define the main style for the stretchy navigation. We then used two additional classes,
.edit-content, to customise the toolbars for adding and editing content respectively.
The basic idea of the animation is: we assign to the
span.stretchy-nav-bg a fixed height and width (the same of the
a.cd-nav-trigger); when the navigation is open, we use the
.nav-is-visible class to animate its height (or width, for the
.add-content toolbar) to create the stretching effect while revealing the navigation list items.
For the navigation items, we defined 2 different CSS Animations: the
scaleIn for the item icons and the
slideIn for the item labels; the animation-delay property is then used to animate different children at different moments.
For the toolbars: when the navigation is open we only display the item icons (using the
scaleIn animation), while the item labels are shown when hovering over the navigation (using CSS Transitions).
For the editing toolbar, for example, we have:
We used jQuery to listen to the click event on the
a.cd-nav-trigger, and add/remove the
.nav-is-visible class from the