Pure CSS Dropdown Navigation Bar (Improved)

45
68

Want more? Explore the library at https://www.codecourse.com/lessons Official site https://www.codecourse.com Twitter https://twitter.com/teamcodecourse.

source

45 COMMENTS

  1. Hi, thanks for a great tutorial, very well explained. I have followed it closely and I have produced this:

    http://codepen.io/Aljobrad/full/MJxqEp/

    I have three questions:

    1. How can I tailor the width of the blue drop-down menus to match the width of the nav link above them? (currently the blue drop-down menu has a fixed width of 150px which doesn't look great)
    2. How can I center the blue drop-down menus?
    3. Is there a way to make the drop-down menus appear on hover, rather than on click?

    thanks!

  2. the only thing that prevents the effect described below is you transition! because it prevents that the displayed ul is immediately closed (i.e. not reachable any more for a click).
    unfortumately, if I'm not wrong, it remains impossible to open up a further level, because at any rate the first level is being closed (if in 'slow motion') when the triggering anchor looses its focus… (one can observe that the next level is being opend while the first is being closed 'swallowing' it up… or is there a work-around? thanx!

  3. It looks very nice, but it won't work that way.. if you would change (<li><a href="#">About us</a></li>) to for example (<li><a href="About-us.html">About us</a></li>) once you open menu Amazing and you click on About us, menu will just disappear and nothing else will happen, link won't work :/

  4. To all who are saying that when they apply a hover to the nav-item that the content disappears when you move your cursor: use this code: .nav-content:hover
    {
    max-height: 400px;
    }

    its self explanitory really but some might not get it. as for links, just apply a href link directly into the allocated code

  5. You're a god damn wizard! Very talented however I would say that your speed of explanation doesn't allow your guidance to breathe and be absorbed by those following. Your speed of coding in this tutorial made it even more difficult for people like myself still learning to keep up. In my opinion your video would benefit from you slowing down a bit and explaining things a bit more.

    Also as focus is only really relevant to Chrome I can't really use this for cross-browser websites. Though aside from that particular feature I thank you so much! It's really helped. Like I said, you're a wizard otherwise, appreciate this tutorial regardless!

  6. Is there a way to make nav-content height transition back to 0 when nav-item is unfocused?
    Because the way is set up it rolls down when whe click on nav-item but when we click anywhere else it JUST disappears.

  7. This dude clearly does not know how to give a tutorial. It is bullshit. You don't want to mix div classes with list items. He may know how to give a poor demonstration but your code does not match what's on your screen, despite what you might think fooling everybody else will accomplish you on any level. You're another fraudulent, fake british wanker. To hell with you, I have debunked a lot of FALSE tutorials… this is yet another.

LEAVE A REPLY