Navigation with sprites

Hi,

I have navigation that seems to have been a better idea in my head than in the real world.

It’s hard to explain in brief. Basically the links are slanted words that all line up with a coloured bar that runs the full width of the page.

I want this bar to change colour up to the point of the link that is being hovered over…but I can’t with sprites as the links can’t overlap…unless I made the image rather large by increasing it’s height a lot as there are 14 pages in the nav bar…

You can see what I mean here. The index page doesn’t seem so bad but go to another page in the site and note the current page state and the hover states of the other links you’ll see what I mean.

I know there must be some better way of doing this and I feel like I’m kinda close but right now i’m just stumped.

Should I use JavaScript/jQuery? If so what kind of code (I’m a javascript beginner) or can i put the bar in a separate div and give that a hover state or something…?

As you can see I need all the help I can get.

Thanks

forgot to post link (not the first time)

Welcome to Tralee | Home

i only have the first 3 pages up there

Just thinking off the top of my head here, but could you use position:relative; to make the links overlap? You’d need to increment it for each one, so for the first link it might be left:-5px, then for the second it would be left:-10px, the third left:-15px and so on.

That sounds like the code I am using but it means I am only able to change the block of the link in question. i don’t get to change the whole width of the bar up to the end of that block if you get me.

This is the code I am using for the home page. The other pages use the exact same message but with different background images for each page so that the current page is highlighted;


#nav_bar {
    width: 940px; 
    height: 150px;
    background: url(images/nav_home.jpg);
    margin: 0; 
    padding: 0;
    position: relative;
    left: 10px;
    z-index: 9999; !important
    }

#nav_bar li {
    margin: 0;
    padding: 0; 
    list-style: none;
    position: absolute; 
    top: 0;
    }
#nav_bar li, #nav_bar a {
    height: 150px; 
    display: block;
    }
#childcare {
  left: 0; 
  width: 66px;
}
#community {
  left: 66px; 
  width: 68px;
}
#education {
  left: 134px; 
  width: 67px;
}
#train_employ {
  left: 152px; 
  width: 116px;
}
#financial {
    left: 268px;
    width: 64px;
}
#emergency {
    left: 332px;
    width: 67px;
}
#support {
    left: 399px;
    width: 67px;
}
#map {
    left: 466px;
    width: 67px;
}
#health {
    left: 533px;
    width: 54px;
}
#leisure {
    left: 587px;
    width: 59px;
}
#ent_tour {
    left: 617px;
    width: 117px;
}
#transport {
    left: 734px;
    width: 60px;
}
#contacts {
    left: 794px;
    width: 74px;
}
#other {
    left: 868px;
    width: 67px;
}

#childcare a:hover {
    background: transparent url(images/nav_home.jpg) 0 -300px no-repeat;
    }
#community a:hover {
    background: transparent url(images/nav_home.jpg) -66px -150px no-repeat;
    }
#education a:hover {
    background: transparent url(images/nav_home.jpg) -134px -450px no-repeat;
    }
#train_employ a:hover {
    background: transparent url(images/nav_home.jpg) -152px -150px no-repeat;
    }
#financial a:hover {
    background: transparent url(images/nav_home.jpg) -268px -300px no-repeat;
}
#emergency a:hover {
    background: transparent url(images/nav_home.jpg) -332px -150px no-repeat;
}
#support a:hover {
    background: transparent url(images/nav_home.jpg) -399px -300px no-repeat;
}
#map a:hover {
    background: transparent url(images/nav_home.jpg) -466px -150px no-repeat;
}
#health a:hover {
    background: transparent url(images/nav_home.jpg) -533px -150px no-repeat;
}
#leisure a:hover {
    background: transparent url(images/nav_home.jpg) -587px -150px no-repeat;
}
#ent_tour a:hover {
    background: transparent url(images/nav_home.jpg) -617px -300px no-repeat;
}
#transport a:hover {
    background: transparent url(images/nav_home.jpg) -734px -150px no-repeat;
}
#contacts a:hover {
    background: transparent url(images/nav_home.jpg) -794px -300px no-repeat;
}
#other a:hover {
    background: transparent url(images/nav_home.jpg) -868px -150px no-repeat;
}


*method not message

actually that file is a code is inaccurate in terms of the block dimensions but the method used is the exact same. The current file is out of my reach at the moment

Hi,

Assuming your main problem was the top progress bar you could do it with 2 images only and not need a different image for each page by separating the top bar from the sprite.

I’d do it like this.

It only requires 2 images.



I couldn’t be bothered making the whole nav but you should get the idea.:slight_smile:

sorry it’s taken me so long to post back here. Thanks so much for the solution. I printed out the code you used in your example. It’s helped a lot. I don’t blame you for not doing the whole bar…copy paste type repeat…hopefully i’ll eventually get it and it’ll pay off though.

Only getting around to trying it again now. (it’s a little overwhelming thinking about all the work I’m supposed to do :confused: ).

One thing I’d like to ask about; in your example when you hover over the bar at the top the marker jumps away to the last link.

Is there a way of stopping this? I haven’t got the whole bar in sync just yet so I may be jumping the gun. I’ll check back when I have though. Hopefully some time in the next 24 hrs.

Thanks in advance

Hi,

I never noticed that before but it only happens when you move off the text. The only solution I could see was to stop the hover having an effect on the bar itself and just restrict it to the text like this.

awe man. I love this forum. Thanks for the help. things like that aren’t coming naturally to me yet. Glad to have the help.

have it working exactly as in your first example. just added the new mark-up but it doesn’t seem to have changed anything. I’m gonna put it down to tired eyes because I literally just copied and pasted. I changed some values for padding etc earlier on and it’s probably just something to do with that.

will try again in the morning.

No doubt you’ll hear from me again.

Thanks.

If my second example works ok for you then it’s probably a typo somewhere.:0

yeah it does. so the hunt begins…