secondary expandable navigation
June 6, 2014 | 108 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 and Nucleo. 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 ;-)

        • ProperLabs

          Wondering if you guys still have plans to create a bootstrap compatible version?

  • 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.

      • Bob the Builder

        Hi Claudia,

        Thanks for this great navigation menu!
        I made it slide from the left using a few lines of CSS, however I noticed on mobile display that when the menu is displayed the vertical scrollbar still shows (and a horizontal scrollbar appears).
        How can I make them disappear?

        Thank you

  • 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://codyhouse.co/ Sebastiano Guerriero

      You can use jQuery mobile (swiperight event). You can check how we did it here:

      http://codyhouse.co/gem/css-faq-template/

      • Bosco

        Sebastiano, i still could not get the swipe function, please help me!

  • 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()

  • Roberto

    I’m having a problem on Safari/Chrome with fixed position elements inside the . If I put outside it works, any tip on how to fix it?

    • Brandon DeWeese

      Im having this same issue. Were you ever able find a fix?

      • Roberto

        Unfortunately I couldn’t fix. I had to put the fixed position elements outside .cd-main-content

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

  • Sree Harissh

    How to close the menu when a link on the menu is clicked? Please Help! :)

    • http://codyhouse.co Claudia Romano

      Hi Sreem, when you click on a link in the menu, you will be redirected to that page (refreshing the page). So you should not need to implement that.

      • Sree Harissh

        I’m working in angular.js and the navbar belongs to a partial. Thank you so much for replying! :)

        • Henrique Macedo

          Any solution for this?

  • Sanj

    Hi Claudia and Sebastiano, any news on a Bootstrap version? Thank you….

  • Luis

    Is there any possibility to configure so that the entire web is not moved, the emnu appears with the effect from right to left, but without moving the website.

    • Chaz Le

      yeah me too for it to just overlay the page

    • http://codyhouse.co/ Sebastiano Guerriero

      That would require a change in z-index properties (navigation has to be on top of main content). Also by default navigation should be off the canvas, while now it’s right under the main content. I’d suggest you to check this resource:

      http://codyhouse.co/gem/css-slide-in-panel/

  • Chaz Le

    How can i push the menu down the page instead of it being on top?

    • http://codyhouse.co/ Sebastiano Guerriero

      replace top: 0; with bottom: 0; for the header element

  • Pingback: Peter Smith()

  • Pingback: Vanessa Smith()

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

    @Claudia Romano:disqus @Sebastiano Guerriero:disqus this page may not be the right place to ask for this kind request but I was wondering if you could also share a tutorial on how we can (1) use JQuery/Ajax/PHP to SUBMIT and (2) how we can use JQuery/Ajax/PHP to PULL/FETCH results from a DB when let’s say one clicks on a button…. I love your tutorials, from cool navigations to slide-out panels they have been very much appreciated and used :) but to affect some dynamics to these awesome features, I always felt like i needed more info on how to use Jquery together with Ajax and PHP (and even mySQL).. hope you’d consider doing some tutorials on those, too. thanks so much!

  • Alex

    First of all thanks Claudia for sharing this awesome work! Love it!
    Can anyone help me with this issue.. I’m trying to make this menu slide out from left to right. I’ve modified all the necessary classes, but when it is dispayed on a mobile devices, X overflow doesn’t work at all..

    • http://codyhouse.co Claudia Romano

      Hi Alex, you should try with overflow: hidden to the body when the navigation is open. That should solve the bug.

    • jeanpierre

      hi alex,
      was able move the menu right to left wing?
      could say that codes change?
      thanks

  • Anders Tryggsäter

    Is there an easy way to have the open, instead of closed on page load?

    • http://codyhouse.co Claudia Romano

      Hi Anders, in the html try adding the ‘lateral-menu-is-open’ class to main, header and nav elements and the ‘is-clicked’ class to the #cd-menu-trigger element. that should work!

      • Anders Tryggsäter

        Thanks a million! It works perfectly :D

        • Craig

          Hi Claudia, expanding on this question, is there a way to *only* expand the menu on page load for desktop, or min-width:768px?

  • Miguel G

    Hi there

    Love your work! :)

    I would like to know if it is possible to add an overlay option to the Navigation?
    Ir other words, instead of of pushing the content to reveal the Navigation, the Navigation overlays the content.
    See example:
    http://mac81.github.io/pure-drawer/
    (Slide in on top effect)

    Thanks so much.

  • Роман Барабаш

    Good afternoon . Can you please get rid of the problem in IE9 when rasskrytii list appears in the navigation break Mezhuyev navigation and navigation buttons ( narrows navigation)

  • Роман Барабаш

    I found how to fix. The .cd-lateral-nav together width use min-width

  • Роман Барабаш

    a {outline:none;} removed the frame from the list buttons

  • Роман Барабаш

    -webkit-transform: translateX(260px);
    -moz-transform: translateX(260px);
    -ms-transform: translateX(260px);
    -o-transform: translateX(260px);
    transform: translateX(260px);

    otherwise when you open the menu will flicker part – is not beautiful

  • Barun Gautam

    @claudiarrromano:disqus I loved this menu.

    When I used the css files, the menu worked perfectly.
    But when I tried to implement the scss files I got some problem with layout as in the screenshot I sent you. Can you help me to easily fix this?

  • Thomas Gimesi

    Hi, just a short question, maybe someone encountered it before. Everything works fine when I implemented it on a page but when opening/closing the menu it keeps flickering at the end. I think it has something to do that the menu slides/pushes the content and then “removes/overlays” the scrollbar that has been there because of y-overflow of the page. Any ideas? By the way, that also happens when you resize the demo version so that a scrollbar shows up. Thanks :)

  • Craig

    Thanks so much for the great menu! In addition to my question below (in response to a previously answered comment), I was wondering if there was a way to prevent the main content from sliding when the expanded menu is clicked? Obviously no need for such a feature when viewing on mobile, but I’d like for the left side of the screen to not slide off when viewing on desktops.

  • Craig

    I noticed a bug on IE9 with some undesirable whitespace. Seems to be a problem when the link navigation gets large enough to the point a scrollbar appears. In the picture, I re-sized my window small enough for it to show that way.

  • Craig

    Came across an annoying bug in IE9 (maybe other versions of IE, too). See included picture. In other browsers, that whitespace does not appear. It seems to be a problem when the link navigation gets large enough to the point a scrollbar appears. In the picture, I re-sized my window small enough for it to show that way. I have experimented with all the CSS and can’t find a fix. Any help is greatly appreciated!

    • Роман Барабаш

      I found how to fix. The .cd-lateral-nav together width use min-width

      • Craig

        Indeed, that fixed it. Thanks very much!

  • Роман Барабаш

    Craig, I found how to fix. The .cd-lateral-nav together width use min-width

  • dwood

    Hi, I am using your “points of interest” plugin with the secondary expandable navigation menu but I’m running into an issue related to adding fixed position elements (the toggle) inside the .cd-main-content container. I believe it is due to the z-index conflicting with each other when you try to view the toggle smaller than 600px wide. Any advice? thanks!

    • http://codyhouse.co Claudia Romano

      Hi, I’m not sure about your problem but if it’s z-index related, you should try giving a higher z-index to the toggle (if it’s not visible).

  • Pingback: zakład szklarski piotrków trybunalski()

  • Micael

    Hi, i would ask you a question: when i use it on my wordpress website, i see that the navbar and the lateral bar have a different transition…it seems that the lateral bar have an ease that the navbar doesn’t have…could you suggest something? If you write me i could give you the link in pvt. Thankyou for your help and for your great job. Thankyou.

    • http://codyhouse.co Claudia Romano

      Hi Micael, you should make sure that the resource css is not overwritten by your theme css. Hope this helps!

      • Micael

        Hi Claudia, thankyou for your fast reply. I already checked but nothing is overwritten. I also tried with another theme, and the result is the same. Have you some other suggest? I don’t understand…i checked also in different browsers but the effect is the same…i don’t know what to do, the only solution is to set to “0” each transition so to not have effect :'(

        • Micael

          Hi and here i’m, sorry but i would ask you also how should i do to add on the cd-top-nav menu, an item with some submenu. So i see only the menuo voice and when i click on the tropdown, it shows me the submenu voices.
          In just some words, i would only insert a WordPress menu on teh cd-top-nav. So how can i do? :P
          Thankyou so much again and sorry for my english but i’m italian :)