secondary expandable navigation
June 6, 2014 | 61 Feedbacks

Secondary expandable navigation

This simple responsive navigation lets 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

Oct 09, 2014
  • Fixed bug on Safari - by CodyHouse
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

  • Bosco

    Good job guys! How to implement swipe to close menu like squarespace.com?

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

    @seguerriero:disqus and @claudiarrromano:disqusone of the reasons that I really love your site is not only that you are providing some super amazing layouts we can easily built upon but mostly because you are so very much keeping up with your followers, responding to questions, comments etc. keep up the good work and thank you for all these wonderful items in your amazong library.. cant wait for it to grow.

    • http://codyhouse.co Claudia Romano

      Hi Taylan, thanks! It’s so nice to read that! :) Unfortunately we’re not able to reply/help everyone, but always try to do our best! Btw, we can’t wait to see our library growing too ;)
      Cheers!

  • Poseydon Espilacopa

    Olá, posso usar para meus projetos comerciais? Gostei muito.

  • gauchomatt

    @claudiarrromano:disqus and @seguerriero:disqus any ideas on how to address this little bug: https://twitter.com/derpixeldan/status/519936486264037376 It’s like that on your demo as well. It happens using Safari’s rubber band effect and from what I can tell, in Safari and iOS only. Any ideas??

    • http://codyhouse.co/ Sebastiano Guerriero

      Fixed

      • gauchomatt

        @sebatiano, do you mind me asking what you adjusted?

        • http://codyhouse.co/ Sebastiano Guerriero

          not at all :) I gave a visibility: hidden by default to the #cd-lateral-nav. When the user clicks on #cd-menu-trigger the visibility is switched to ‘visible’. I used the visibility property because 1) it doesn’t change the flow of the page (the navigation is still there, just not visible) and 2) you can apply a CSS3 transition to it (which is important, since the navigation gets hidden AFTER the menu animation when you close it)

  • Artem Pasichnyk

    Nice work! This navigation is very useful.
    Unless, I’m having troubles with Bootstrap modals, to be exact, with z-index values. When modal is triggered, it blocks whole page.
    Hope you can help me with this problem, thanks!

    • http://codyhouse.co Claudia Romano

      Hi Artem, glad you liked it! Do you have a live version we can check? Cheers!

      • Artem Pasichnyk

        Sorry Claudia, my site is under developing on my local server but I’ll try to provide you as much information as it possible. Also you could recreate the problem on your own.

        Here I made some screenshots so you could see what is this all about.

        • http://codyhouse.co Claudia Romano

          Hi Artem, actually the problem seems not to be related to our nugget but to the Bootstrap modal only.

  • Pingback: кредит на карту онлайн()

  • Pingback: взять онлайн займ()

  • Pingback: мгновенный займ на карту()

  • Pingback: smart fixed navigation – A fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It’s smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solu()

  • JAspen

    When I add a link on the parent of the drop down it doesn’t work. It just opens the drop down instead of going to the link. Is there a way to solve this?

    • http://codyhouse.co Claudia Romano

      In order to do that, you should remove the following lines of code from the js:

      But this way you won’t be able to open the dropdown.
      Or you can add a ‘See all’ link in the dropdown (something like http://codyhouse.co/gem/css-mega-site-navigation/ – mobile version).

  • Pingback: 38 Visually Awesome CSS Tutorials & Techniques | SmashingApps.com()

  • Pingback: chapter 7 bankruptcy means test()

  • Pingback: chapter 13 bankruptcy()

  • Pingback: filing bankruptcy()

  • Pingback: chapter 11 bankruptcy()

  • Pingback: bankruptcy forms()

  • Pingback: find bankruptcy lawyer()

  • Pingback: 38 Visually Awesome CSS Tutorials & Techniques()