css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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.

Comments

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