How To Create Full-Screen Pop-Out Navigation

How To Create Full-Screen Pop-Out Navigation

Here is a fixed menu that drives users’ attention to a couple of call-to-action buttons first, then let them explore the full-screen navigation.

full-screen-pop-out-nav-featured-new


It’s becoming a common approach to hide the navigation, make it accessible after a click on the menu link. “One click more than necessary” some of you may argue. It really depends by the specific case IMO. I mean Amazon could never hide the entire navigation on a big device. But if you have a website with a relatively modest quantity of content, a huge menu with few important call-to-action buttons, it makes sense to drive the user’s attention to those buttons first, then let her/him explore the rest.

Creating the structure :

We created a <header> element to wrap the logo, the secondary navigation (login/signup) and the trigger for the primary navigation (.cd-primary-nav-trigger). The primary navigation is outside the header, which makes it easier for us to handle the CSS transformation effects. Both primary and secondary navigations are unordered lists semantically wrapped into a <nav> element.

Adding style :

First of all, to create the slide-in effect of the primary navigation we use a combo of CSS3 transitions and transformations. By default the navigation is hidden by pushing it right above the viewport (translateY(-100%)). When the user clicks on the trigger element (.cd-primary-nav-trigger), we use jQuery to add the .is-visible class to the navigation. The transition applied to the transform property smooths the movement.

For the header slide-in effect – activated when the user changes the scrolling direction from down to up – we needed to create some classes and handle them through jQuery. By default the header is in absolute position: that means that it scrolls with the content (it’s in absolute position so we can place it on top of the background-image). As soon as the header is no longer visible, we give it a .is-fixed class, thus changing its position from absolute to fixed, and placing it right above the viewport (top: -80px). As the user scrolls up, the header gets back: we give it the .is-visible class, this way we move it down along the Y axis (translate3d(0, 100%, 0)).

Events handling :

When user starts scrolling, we need to detect if he’s scrolling up or down, and add/remove classes to the primary navigation accordingly :

The header slide-in effect has been implemented only when the viewport is larger than 1170px (the MQL variable has been defined in the .js file).

iOS devices, in fact, freeze the DOM manipulation during scrolling, so functions are executed only at the end of the scrolling (we couldn’t find a bug report, but here is what jQueryMobile says).

 

In the Anshul Labs you can find wordpress free themes, and html template, and much more tip and tricks and Android games and Apps. There is number of free css and html, jQuery code to free download. All things web design and development focusing on design, HTML, CSS, jQuery, WordPress, Photoshop, Android Games , Applications and more!

2 COMMENTS

Leave a Reply