جستجو

Mega-Site Navigation in CSS and jQuery | CodyHouse

  • 2948
November 5, 2014 | 230 Feedbacks

Mega-Site Navigation

A responsive and easy to customize navigation for mega-sites, enriched by subtle CSS animations and support for devices with javascript disabled.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

We’ve already shared some navigation solutions here on CodyHouse. They can suit small to middle websites, where navigation is not that challenging. This time we wanted to work on something more complex: a mega-menu!

About the challenges: starting from mobile, I didn’t want the “accordion” effect to reveal the sub-items (like we did with the Secondary Expandable Navigation). So I went for a slide-in approach. Also, since the downside with mega-menu is that main categories are generally not clickable, I introduced a “see all” button (if you check the demo, you immediately get what I mean).

On bigger devices, I tried to avoid the never ending nested approach, when you move from one column to the other while surfing sub items. Showing the secondary navigation options right away looks like a better UX solution.

The icons included in the source file have been created by the talented Dario Ferrando and can be download for free on Freebiesbug.com.

Creating the structure

The HTML structure of a complex navigation is generally composed by nested unordered lists. This one makes no exception. We created 4 main sections:

,
,