Stretchy Navigation

​Stretchy Navigation

Source from: https://codyhouse.co/gem/stretchy-navigation/

A rounded navigation trigger that stretches on click/tap to reveal the navigation items.
Creating the structure
The HTML structure is pretty basic: a nav.cd-stretchy-nav is used to wrap an unordered list (containing the navigation items) and an a.cd-nav-trigger (for the menu icon).
An additional span.stretchy-nav-bg element is used to create the stretchy background.
 

Stretchy Navigation

Adding style

We created the .cd-stretchy-nav class to define the main style for the stretchy navigation. We then used two additional classes, .add-content and .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.

Stretchy Navigation

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.

Stretchy Navigation

For the toolbars: when the navigation is open we only display the item icons (using thescaleIn animation), while the item labels are shown when hovering over the navigation (using CSS Transitions).
For the editing toolbar, for example, we have:

 

Stretchy Navigation

Events handling

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 nav.cd-stretchy-nav.

Stay tuned

Let the news come to you

Best video from Flexitech

UNCHARTED 4: A Thief's End - Multiplayer

2 years ago

SoftKinetic 3D Vision Technology

2 years ago

Microsoft Surface Book, a rival to Apple's Mac Book has arrived

2 years ago

Jibo, The World’s First Social Robot for the Home

2 years ago

The Ultimate Race Bike: new Trek Madone

2 years ago