- This topic is empty.
-
AuthorPosts
-
July 21, 2014 at 10:56 am #176052KungPaoKittiesParticipant
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!
July 21, 2014 at 11:00 am #176053TheDutchCoderParticipantWe 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.
July 21, 2014 at 11:08 am #176056Paulie_DMemberYou 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.
July 21, 2014 at 11:15 am #176058KungPaoKittiesParticipantI 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.
July 21, 2014 at 11:21 am #176059TheDutchCoderParticipantYeah 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.
July 21, 2014 at 11:23 am #176060Paulie_DMemberYou can always host the images with another online service and link from there. I use photobucket.com but there are plenty of others.
July 21, 2014 at 11:49 am #176065KungPaoKittiesParticipantI 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
July 21, 2014 at 11:57 am #176067r00tParticipanthttps://css-tricks.com/forums/topic/can-highlight-current-page-navbar/
See my post for a practical example.
July 21, 2014 at 12:00 pm #176069KungPaoKittiesParticipantThere is the link
July 21, 2014 at 1:19 pm #176087KungPaoKittiesParticipantSo 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?
July 21, 2014 at 2:18 pm #176099KungPaoKittiesParticipantAh okay I will try that thank you!
July 21, 2014 at 3:59 pm #176110KungPaoKittiesParticipantAlright 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
July 21, 2014 at 4:06 pm #176112KungPaoKittiesParticipantAhhhh that makes sense XD
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.