secondary expandable navigation
June 6, 2014 | 33 Feedbacks

Secondary expandable navigation

This simple responsive navigation let users focus on few important menu items, while the entire navigation is still accessible, just one-click away.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Navigations should always be accessible to users. But there are cases in which you don’t have enough space in your header to show all your menu items, or you just want to give more relevance to some items rather than others. In these cases, a secondary navigation can make the job!
We were inspired by a nice solution adopted by Squarespace: the secondary navigation is hidden under the main content of the page; a click on the menu icon makes the page content to smoothly translate, revealing the hidden navigation. Like it!

Creating the structure

We inserted the primary navigation in a <header> element and used a <main> element to wrap all our content. We inserted the secondary navigation outside the <main> element, so that it is not affected by the CSS Translation of the main content.

Inside the secondary navigation, we created two separate unordered lists, one for items with submenu elements and one for simple items. Also a .socials container was added for your social links.

Adding style

To animate the <main> element, we combined a CSS3 Transformation with a CSS3 Transition:

We did the same to animate the <header>.

Note that, to assign a min-height to the <main> element, we set height: 100%; to <body> and <html>. But you'll eventually have content right below the header, so these properties could not be necessary.

As default, the primary navigation scrolls with the content. To switch form a scrolling navigation (in position: absolute;) to a fixed navigation, add the class .is-fixed to the <header> element.

An interesting note: the hamburger icon, and the ‘X’ icon that replaces it when the menu is visible, have been created in CSS. We used a <span> element and 2 pseudo-elements (::before and ::after). Now when the the ‘X’ is visible, we hide the <span> element by setting visibility: hidden; while for the pseudo-elements we set visibility: visible; – since the visibility property isn’t inherited by default (unlike the Display and Opacity properties). It did work…except in IE, where looks like pseudo-elements inherit the parent visibility property. The trick here was to use the rgba function to give background-color: rgba(255, 255, 255, 0); to the <span> element, while background-color: rgba(255, 255, 255, 1); to the pseudo-elements. It worked!

Events handling

Nothing fancy in the jQuery file, apart from adding/removing classes according to specific events. Next time will be better!

Changelog

June 22, 2014
  • Added the .is-fixed class to switch from a scrolling navigation to a fixed one - by CodyHouse
June 6, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse. You can follow her on Twitter.

  • Laurensius Adi

    Thanks for sharing this. I’ll be using it on my blog next time.

  • Pingback: CSS3 Secondary Expandable Navigation | Design News

  • Matija Strlekar

    super.. looks fantastic … thanx for sharing

  • Матвей Иванов

    How to adopt this to Twitter bootstrap?

    • Sebastiano Guerriero

      We’ll be updating all resources with a bootstrap compatible version (and maybe a Foundation version too). Not scheduled for this month, but most probably next one

      • http://webentwicklungrostock.de Michael Pehl

        Is the Foundation version done yet? If not I will do my own ;-)

  • Colton Fitzgerald

    This is super beautiful. Upgrading from sidr to this right now for a mobile nav. Thanks a ton!

  • Jen Adam

    So awesome! Thanks!

  • Sebastián Ruiz

    Hi guys….thanks for your awesome job….
    There is any way to make navigation fixed to top??…this way, navigation is always accesible to user….

    • Claudia Romano

      You should make some tweaks to the scss/css. We’ll update the resource so that it’ll be possible to easily switch from a static header to a fixed one.

  • Andy Miller

    Hi Claudia

    Another really useful gem. Thanks.

    Can I just ask what happens on older versions of IE? (I’m on a Mac and I’m being too lazy to reboot into Windows).

    Is Modernizr being used to support css3 transitions in IE9?

    Thanks again.

    • Claudia Romano

      We have tested it in IE9+ (it works in IE9, but without transition).

  • Pingback: Secondary Expandable Menu | HTML5 and CSS3 | S...

  • Sean

    I have a feeling I’m going to use this idea soon! Really nice design and write up. Thanks for sharing!

  • Daniela Filipa Aldeia Tavares

    Can i use something like this on my wordpress site? By the way it’s awesome!

    • Sebastiano Guerriero

      Of course you can ;) http://codyhouse.co/terms/

      • Daniela Filipa Aldeia Tavares

        Thanks! It’s works perfectly!

  • Marja Schwartz

    It looks fantastic! How to use it in my Squarespace theme (Five)?????

  • Atte Aaltonen

    Looks great — I have one problem though: once I put content on the page and trigger the menu on smaller screens. the content overlaps the menu. Any idea what could solve that problem?

    • Claudia Romano

      Hey Atte, did you insert all your content inside the element?

  • Pingback: OsClass и Bender — делаем плоское кроссбраузерное меню - MyWWWeb

  • Pingback: 50 Visually Appealing CSS Tutorials & Techniques – Web Designing Kerala India

  • Pingback: Visually CSS3 Tutorials to Enhance Web Designs

  • Pingback: 提高网页设计的视觉CSS3教程-字体效果、按钮样式、导航条 | Specs' Blog

  • Pingback: 50 Visually Appealing CSS Tutorials & Techniques | Brisa

  • Jack White

    I love this design, it works really well thanks a lot for sharing. The only issue I’ve had is when I am trying to implement a sticky footer, the footer won’t stick. Do you know any issues around this?

    • Claudia Romano

      Hi Jack, glad you like it! :)
      Do you have a working example so that I can check this issue? Thanks.

  • brutyke

    Nice looking script!

    Is there an easy way to make it slide out from the left instead of right ?

    And, can you have 2 pop-outs on the same page ?
    i.e. left AND right

    • Claudia Romano

      To make it slide from the left, you have to change the position of #cd-lateral-nav (left:0; transform: translateX(-80px)) and the lateral-menu-is-open class (transform: translateX(260px) ) . Of course you have also to change the position of the #cd-menu-trigger so that it can be clicked also when the menu is open.

  • http://www.example.com/ taylan

    This will come very handy in one of my next projects :) thank you :)

  • Pingback: Gregory Smith

  • gauchomatt

    This is fantastic guys! I have a quick question… I am having some trouble with z-index on all browsers where the sidebar is on top of all the main content. Not sure what’s happening. Any ideas??

    • http://codyhouse.co/ Sebastiano Guerriero

      I just did a test adding lot of content into the .cd-main-content and it’s working fine