Forums

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

Home Forums Other css-tricks’ menu

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #38651
    Lucia
    Member

    Hi!

    Thank you for this site! Is there any chance you can tell me how did you do your site’s main menu? I love it!

    Best

    Paula

    #104867
    tobeeornot
    Member

    Use firebug or ‘Inspect Element’ on your browser and all will be revealed.

    #104882

    Paula,

    The menu uses keyframe/animations to animate the background color, as well as media queries to restructure itself under varying browser-widths.

    Keyframes

    Here’s an example that resembles that of CSSTricks:

    @keyframes fadeToBlue {
    50% { background: blue }
    }

    This creates a keyframe animation called “fadeToBlue”. If any element is animated with animation, that elements background will be changed to “blue” at half-way through the animation. You could further complicate this by adding 75% markers, and more.

    We apply this to elements using the “animation” property.

    .foo:nth-child(1) { animation: fadeToBlue 1.5s 1.0s ease 1; background: red }

    This finds the first .foo element in a container and sets its animation property to “fadeToBlue”.

    Further, it instructs the browser to make the animation last 1.5 seconds, and be delayed 1 second. So 1 second after the page loads, our animation will run for 1.5 seconds on the first .foo element in any container.

    The next value, “ease”, refers to the timing-function that is used on the animation.

    Lastly, the 1 refers to the iteration-count. This instructs the animation to happen only once, an no more.

    So if we have numerous elements we want to animation, we can do so by simply incrementing the delay on each. For the first, run it at 1 second. The second will be ran at 1.2 seconds. The third at 1.4 seconds, and so on. This would look something like the following:

    .foo:nth-child(1) { animation: fadeToBlue 1.5s 1.0s ease 1; background: red }
    .foo:nth-child(2) { animation: fadeToBlue 1.5s 1.2s ease 1; background: green }
    .foo:nth-child(3) { animation: fadeToBlue 1.5s 1.4s ease 1; background: orange }
    .foo:nth-child(4) { animation: fadeToBlue 1.5s 1.6s ease 1; background: silver }
    .foo:nth-child(5) { animation: fadeToBlue 1.5s 1.8s ease 1; background: maroon }
    .foo:nth-child(6) { animation: fadeToBlue 1.5s 2.0s ease 1; background: olive }​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

    Notice how each .foo element will be delayed .2 seconds more than the .foo element that precedes it. This gives our animation that riding effect from left to right.

    Experiment with this effect: http://dabblet.com/gist/2996529

    Important: I have not used any vendor prefixes (such as -webkit-, -moz-, -o-, or -ms-) in the above code. You will need to use these, leading to verbose code, or consider a tool like -prefix-free which lets you write unprefixed code and it handles the prefixes for you.

    #104891
    Chris Coyier
    Keymaster
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Other’ is closed to new topics and replies.