user profile image

A flat horizontal navigation that uses jQuery for a clean dropdown menu alongside with animate.css for the nice flip at the beginning.


  1. i want to use it but i can't it's in LESS and in haml Please convert it

  2. Cool! You might want to add functionality that closes the other dropdown when you click the next one. Otherwise they overlap.

  3. @pib just click the little eye icon in the top right of the code box to compile it

  4. Awesome! Nice design.

  5. @pib As @waddington stated, you can just click the eye icon located on the top right which will compile LESS/HAML to CSS/HTML for you.

    @mikehobizal I'll make sure to do that, I was planning on just having it onHover toggle.

    @alexsafayan Thanks man, really love your pens aswell!

  6. Instead to using JS to open a menu, you can use a radio button (you can hide it). This solve the probem when you have two menu opens and you can imitate the animation for sure ! But it's very cool, I like it. When for responsive ?

  7. @Rictus You are correct that this could be done using a radio button. However, using jQuery was just a little bit quicker and easier for others planning to use it aswell. As for the responsiveness, I could always add it in.

  8. @Rictus or use tabindex, &:focus and sibling selector like this

    .sub-menu ul {
      display: none;
    .sub-menu > a:focus {
      outline: none;
      & ~ ul {
        display: block;

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.