breadcrumbs menu – problem with background imgs, different states active, inactive etc

[lorem]

Hi there,

I’m tryin to get a breadcrumbs-navi right, but i struggle with the background images.
the current status can be seen here: http://splyte.de/breadcrumbs/

the buttons/bg arrows got the states:
1. active to inactive
2. inactive to active
3. inactive to inactive

the .active class is set by js, as you can see the bg-states are off, when you are on the third item

does anyone know how to solve this riddle or maybe knows a link to a similar menu?

thanks in advance, cheers, jan

[tobeeornot]

https://css-tricks.com/triangle-breadcrumbs/

[lorem]

hey tobeeornot,

thanks a lot :)

meanwhile someone helped me with my code, the above CSS is updated

ul li.page-ctrl {

background: url("NavNotCurrent.jpg") no-repeat scroll left 0 #A8C8DE;

}

ul li.page-ctrl.active {

background-color: #579CCD;

background-image: url("NavToCurrent.jpg");

}

ul li.page-ctrl.active + li {

background-image: url("NavCurrent.jpg");

}

ul li.page-ctrl.first {

background-image: none !important;

}

and it works!

cheers, jan

[tobeeornot]

No probs – glad you worked it out.

[Author]

Posts