Question

I tried inspecting the elements for this website, but I could not figure out how they got the CSS triangle to move to different nav elements when a different page anchor is clicked.

See website: http://www.simple.com

Answer 1

The arrow is a CSS sprite contained in http://simple.com/img/sprites.png. It’s set up in the CSS with transitions as follows:

#main-nav #nav-arrow {
    -webkit-transition: left opacity;
    -moz-transition: left opacity;
    -o-transition: left opacity;
    transition: left opacity;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    width: 22px;
    height: 14px;
    position: absolute;
    top: 60px;
    text-indent: -10000px;
    background: url("/img/sprites.png") no-repeat -577px -52px
}

That does the animation when the left property of the CSS changes. The left property is altered by Javascript hooked from the main navigation library that drives the site, NavSimple, in the (customised and minified) https://www.simple.com/js/brawndo.min2175719530.js. The more general NavSimple code to do the navigation also triggers custom Javascript that moves the arrow’s left position to halfway along the active navigation element (it’s subtracting eleven pixels because the arrow is 22 pixels wide):

this.nav_arrow.setStyle("left",d.getPosition(this.nav_wrapper).x+(d.getWidth()/2-11))}

And that’s basically how it works. Nice site, very well-engineered, I’d say. (The navigation arrow is actually a div containing a letter “V”, so it’ll still look like an arrow even if the background images don’t load, which I thought was a nice touch.)

Having said all that, I think this question might be a bit too specific to survive…