The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to make the CSS-TRICKS nav bar?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #31194

    Hi guys!
    I was trying to figure out how to make the nav bar of CSS-TRICKS. It’s like when you hover your mouse over it, the width changes. I looked at the CSS source but I couldn’t do it myself.
    nav li:hover a{width:24%}
    nav ul:hover .active{width:19%}
    nav ul:hover .active:hover{width:24%}
    This part makes me confused. And where should I assign the reference width(100%)? Thanks!


    If I’m understanding the code you posted correctly, it does the following:

    when you hover over a anchor link in the a list item tag (which will be Home, Forums Videos, Downloads and Snippets), the width of that element will be 24%. Also, since you’re hovering over an li element that is inside a ul element, the active tab of the navigation (defined by the .active class) will be shrink to 19%. However, should you hover over the active tab, you don’t want it to shrink to 19% and thats what the last line does; it overrides the line above that, so when you hover over the active tab, it will stay at 24%.

    I hope that makes sense.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.