Active State Navbar Sprite

[KungPaoKitties]

Hi all! I am trying to design a website and I have created a navbar similar to one found on Apple.com and I have successfully created a rollover with an image sprite. However I would like the current page be highlighted in the navigation bar for visual context. So when somebody clicks on say, the “What We Do” page that button will be highlighted on that page. Thanks!

[TheDutchCoder]

We would need a link to the site in order to see how you’ve written your HTML and CSS, or put it up on CodePen.

[Paulie_D]

You might want to refer to this thread.

https://css-tricks.com/forums/topic/can-highlight-current-page-navbar/

Firstly you have to have some way of telling the page that it is the current one and apply the CSS accordingly.

JS is usually the simplest way depending on the size and complexity of your site.

[KungPaoKitties]

I have the code here although it might not help since all of the images are stored locally and I don’t have hosting as of yet.

http://codepen.io/KungPaoKitties/pen/ismuB

[TheDutchCoder]

Yeah what Paulie_D said: you would need to specify which nav element is active, the easiest way of doing that is just give it an extra class (if you use static HTML), or use JavaScript to determine it.

[Paulie_D]

@KungPaoKitties

You can always host the images with another online service and link from there. I use photobucket.com but there are plenty of others.

[KungPaoKitties]

I want it be as efficient as possible so sounds like Javascript will be the best method. My only confusion is how to achieve that via an image sprite (single image). Apple.com used their navbar as one single image sprite and then they used the text as a separate image over it. I’m definitely a novice so I apologize if I’m not being clear! I just got hosting through GoDaddy so I’ll send the link

[r00t]

https://css-tricks.com/forums/topic/can-highlight-current-page-navbar/

See my post for a practical example.

[KungPaoKitties]

http://webwavebuilding.com/

There is the link

[KungPaoKitties]

So I added JQuery to the site but what elements is the class current-page being applied to? If I already have a rollover sprite and a bunch of CSS already applied how does it differentiate between all that and current-page?

[KungPaoKitties]

Ah okay I will try that thank you!

[KungPaoKitties]

Alright so I did manage to get it to work (albeit still have to figure out a way of getting it to work with single image sprite) however I noticed it only works on /index.html and no others so I was confused with this

[KungPaoKitties]

Ahhhh that makes sense XD

[Author]

Posts