secondary-sliding-navigation
February 26, 2015 | 63 Feedbacks

Secondary sliding navigation

A bold, secondary menu that slides over the main navigation.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Today’s resource is a simple, handy snippet: a secondary navigation that slides down, replacing the main navigation links.

This approach can be an alternative to a standard dropdown menu, in particular if you want to emphasise more the sub navigation. Besides you can easily customize the snippet and use the slide in panel for a search box instead, or a login form – just to give you a couple of ideas.

Creating the structure

The HTML is structured in 2 main elements: an <header> wrapping the main navigation, and a <main> containing the page content.
The main navigation is composed of 2 nested unordered lists, semantically wrapped in a <nav> element.

Adding style

On small devices, the main navigation is on the right side, hidden by default; when user clicks the menu icon, the <main> and <header> elements translate to the left (nav-is-visible class is applied) to reveal the navigation.
When user clicks the .cd-subnav-trigger, the main navigation is pushed to the left and replaced by the secondary navigation.

On desktop devices (viewport width more than 1024px), the secondary navigation is placed on top of the header (outside the viewport) and slides in covering the main navigation. We assigned a higher z-index to the .cd-logo and .cd-subnav-trigger so that they remain visible after the sub navigation has slided in.
Besides, we assigned the sub navigation the same padding as the .cd-main-nav  and inserted a .placeholder element as last list item occupying the same space of the .cd-subnav-trigger: this way we make sure the sub navigation list items don’t cover both the logo and the .cd-subnav-trigger.

Events handling

We used jQuery to add/remove classes according to specific events.
The only important thing to note is that in the starting HTML structure the navigation is inside the <header>. On mobile, we wanted the navigation to be on the side, hidden by default, and it was easier for us to have it outside the header. So we use jQuery to move the navigation outside the header on small devices.

Changelog

May 25, 2015
  • Fixed bug on Chrome 43.0.2357.65
Feb 27, 2015
  • Bug fixed - prevent .cd-subnav-trigger flicker on Safari
Feb 26, 2015
  • 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.

  • Gabriel Mendes

    Muito bom!

  • SamuelC

    Wow love it! thanks for the inspiration

  • http://anishmalias.url.ph/ Anish M Alias

    nice i like it

  • Jozef Benz

    Yess! Very nice! Thanks!

  • Мікола Стэфановіч

    Thanks!

  • piotr_marciniak

    On Safari (Mac) problem with CSS (screencast): http://ila.li/ZyQN

    • http://codyhouse.co Claudia Romano

      Fixed! (you may need to clear your cache) thanks ;)

  • Nitin

    Just the kind of inspiration I needed, thanks a bunch!

  • Ibrahim Mohamed Abd Elhay

    very nice , thnak you :)

  • http://www.bdsub.com/ Syed Sirat Ullah

    very intelligent.. thank you..

  • Joe Burdick

    You know, it would be really cool if posting articles like this would push to an individual github repo. Updating the post’s code contents would push a version to Github. A certain section of the post could be deemed as the README and people would be able to fork or bower install instead of downloading a zip. :)

  • http://www.sfpcoder.com/ sina

    heeey! that is so cool! tanx for sharing claudia..

  • https://moter8.pw Moter8

    Does not seem to work on Chrome 41 at all. Vid: https://a.pomf.se/axrbjm.mp4

    • http://www.thesimpleix.com Matthew Talebi

      Chrome 40 here, can confirm

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi there! Chrome 41 is still a beta version, we’re not testing on Beta versions. We’ll check as soon as it’s released. @thesimpleix:disqus about Chrome 40, I just run another test on both a Mac and Windows and it’s working fine. Can you please provide more info about what’s not working?

  • froyo

    has a bug, when from mobile to desktop,the .main-content must remove .nav-is-visible

    • http://codyhouse.co Claudia Romano

      fixed! thanks

      • froyo

        your’re weclome.
        It’s cool~Thanks for sharing .

  • Samuel Brynolf

    Will be used :)

  • ozgur

    Really simple and smart. Thanks for sharing!

  • http://thehung.net/ The Hung

    Thanks for sharing. It’s cool!

  • http://metrothemes.me metrothemes

    really cool idea ,

  • tudo75

    Cool and simple. Thanks for sharing!

  • http://www.elmnt.com/ Greg Smith

    Love this one. I’ve been using a similar module, but this is much cleaner. Thanks!

  • http://www.socient.net Socient

    Thanks for sharing this. I tested and whenever there are multiple subnavs, it overlays on top of each other.

  • Snow

    Hello,

    First and Foremost this (like everything else on CodyHouse) is wonderful! I’m quite inspired every time I see a piece of work here. That said, I would like to know is if I could get some help. I’m trying to make every link within the menu have its own separate submenu with different colors and yet function like the original “Category” link. I strongly dislike being a nuisance but my development skills have quite a ways to go yet I refuse to give up.

    I Thank you all greatly as I’m pretty certain you are all fairly busy. You assistance is much obliged.

    Thank you,

    Snow

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Snow. Not easy: the more you move on the left, the more the subitems will be pushed on the left side, leaving empty space on the right. I think you should try a difference UX approach: you can fire the sliding submenu every time the user clicks on a link, but you should replace all content of the main navigation (but the logo). Them you can put a small close icon on the right (X), to get back on the original main navigation. This will give consistency to the whole user experience.

  • Thulank

    on mobile view, this kind of navigation need body or content wrapper to be locked(scroll) when nav is open, i thing thats will be nice :D
    any way great creation codyhouse :D

  • Jesse David Kevon

    Hi, any tips on how to allow for multiple instances of a dropdown?

    For example http://codepen.io/jessekevon/pen/ZYqoLw

  • Joel Rivera

    Hi, I would like to know how to make the Desk top version state like that event when the width is 760px, When i change values from
    @media only screen and (min-width: 1170px)
    @media only screen and (max-width: 1169px)
    To —————Example—————————

    @media only screen and (min-width: 900px)
    @media only screen and (max-width: 899px)

    The ul and li go down to the midle of the screen.

    • http://codyhouse.co/ Sebastiano Guerriero

      this can happen if you have a lot of links, that basically don’t fit. If it’s the case, you can try by reducing the size of the fonts and/or margins

  • Miguel G

    Hi, Is it possible to change the behavior from “on click” to “on hover” ?
    Any help is much appreciated.

    Cheers :)

  • Jaime D

    I started to create a pure Javascript version (without jQuery). However, I had trouble rewriting the navigation placement (different screen sizes). If you do not understand this sentence, you may look at my comments in the javascript code: http://codepen.io/anon/pen/QwYbYP?editors=101
    I hope someone can help me. Cheers :)

  • 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 a horizontal scrollbar appears.
    How can I make it disappear just like you did? I must have missed something.

    Thank you

  • Optimix

    Hi Claudia,
    Awesome concept as always, thank you! :)
    The only thing I would recommend to add is “overflow: hidden;” for .cd-main-nav on mobile / PADs.
    Best regards,
    Optimix

  • Alexander Nesterenko

    found a bug in secondary navigation.
    dropdown not working when have the another position (not last in list)

    • Banicode

      Yes, I agree. Also, when we have several dropdown items will not work correctly.

  • Banicode

    Hi Claudia. I got it from the menu, but there is a problem and it is not possible to define several dropdown list. Please help me. Thank you.

  • Oscar Orozco

    hola !! primero quiero decirles que me encantan sus proyectos y otra es que tengo un problema con
    Secondary Sliding Navigation

    En Google Chrome No Funciona Correctamente El Menu
    Secondary Sliding Navigation
    Cuando Es Responsive , Me Gustaria Saber Cual Es Problema, Anduve Buscando Pero No Lo Encuentro O No Se porque ocurre
    —————————————————————————————–

    Hi !! I first want to say that I love your projects and another to have a problem with
    Sliding Secondary Navigation

    In Google Chrome it does not work properly When Menu is Responsive , I like to know what problem , I have been looking but can not find or do not because it happens

    • http://codyhouse.co Claudia Romano

      Thanks for the heads-up! Fixed now ;)

  • Oscar Orozco

    Claudia Romano Gracias por la pronta respuesta y solucion , sigan asi excelente trabajo :) me gusta mucho su trabajo

    —————————————————————————

    Claudia Romano Thanks for the prompt response and solution , so keep excellent work :) I love your work

  • Wayne

    I’m trying to get it to work with this but there’s loads of problems:
    http://parallax-scroll.aenism.com/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation

    Anyone got any ideas or suggestions or know where I can download a working parallax scroll with this fixed header menu system – I’m not bothered about the secondary menu, just like how this menu works on mobiles. TIA

    • Wayne

      this is a simpler parallax scroll, https://github.com/pixelcog/parallax.js/ – still can’t get it to work with this menu, it seems to get better with removal of navreset.css but still doesn’t work properly and I guess the nav needs navreset.css.. any help much appreciated

  • Meuwka

    Such a cool idea how to check the current window width! Thank you so much!

  • PHP Tester

    How to add submenu in Category Menu ??

    For example i want to add Sub menu in Category 3

  • Yug Shende

    Can the same be extended to have two sub-navigations instead of one? like nav sliding down for search the other sliding down for login?
    As of now simply changing classes in css and js isn’t doing the trick, it loads content from both sub-navs even if I click just one. Like even if I ask for login-sub-nav it shows a search bar as well as login form. I think I am doing something terribly wrong here.

  • http://meh-hikwa.com/ Meh

    @claudiarrromano:disqus Great work on the navigation. I love it. Im new to wordpress theme development and was wondering How can I use this menu or register it in a custom wordpress theme?

  • Marlana Mumme Muzny

    This is an interesting navigation. Awesome work. I wish you could do more examples of responsive drop downs like this as this is what clients want from us. Keep up the great work and helping keep us educated.

  • Orokana Meinu

    Its neat, but it breaks really easily if you add another submenu. I feel that the solution should be that the submenu drops down under the menubar. Have not figured out how to do this yet. If anyone knows, please post.

    • http://meh-hikwa.com/ Meh

      If you have more menu items, then play around with font-size, padding between each menu item or if you need a good fix create more break points

      • Orokana Meinu

        Thats not going to help, and it did not help. As an example, simply add cd-subnav-trigger to lets say Projects. Watch what happens.

  • Nick Else

    Hello,

    Just wondering if anyone knew how to edit the JS so that when the navigation is viewed on a mobile device, the nav area will close once it is clicked, doing a parallax site so need the nav to close on click really.

  • Chirag Suthar

    Hello,
    How to create 3rd level menu?

  • Matt McMullen

    Is there a version of this that will work with multiple sub-menus?

  • http://www.stringslash.com/ Abid Devecha

    Wow, this slider helped me a Lot. Works perfectly.
    Thank you :)

  • Tyler

    Anyone know if it is possible to “hide” the secondary nav behind the main-nav so it is not just hidden out of viewport? I am trying to make a navigation similar to CodyHouse. Nav starts out on bottom and scrolls to fix nav on top as the user scrolls, however currently the secondary nav is viewable once scrolled.

    Cheers!

  • http://mckds.pe.hu Kairus Dark Seeker

    When will it have desktop support?

  • Diyar Bakir

    it has some problem when you scrolling the page.. some time the slide nav will flash during scrolling
    also it has scroll problem when on mobile size

    you can fix it by adding following code
    to css file
    .cd-main-nav{ overflow-x: hidden;}

    to js

    $( window ).scroll(function() {
    $(‘header’).removeClass(‘nav-is-visible’);
    $(‘.cd-main-nav’).removeClass(‘nav-is-visible’);
    $(‘.cd-main-content’).removeClass(‘nav-is-visible’);
    if($(‘header’).hasClass(‘nav-is-visible’)) $(‘.moves-out’).removeClass(‘moves-out’);
    $(‘.cd-main-nav’).removeClass(‘moves-out’);
    });

    goodLUCK :)