Welcome Guest [Log In] [Register]
Search Members Calendar | Rules ZB Code Index IF Code Index
ZBCode
  • Navigation
  • ZBCode
  • Coding Support
  • Code University
  • CSS Acitve Links
Hey, welcome to ZBCode, the premier coding forum for ZB. Here you fill find some of the best Invisionfree and Zetaboards Codes on the network! Unfortunately, you're sorta hovering around in guest mode at the moment; why not join in on the fun? Register an account and you can start accessing the wealth of resources we have available here. Enjoy your stay at ZBCode, and remember to tell all your friends about us; the more members, the more codes available. ;)

Interested in joining? Click here.


If you are already a member of ZBCode, feel free to login right here:

Username:   Password:
Locked Topic
  • Pages:
  • 1
  • 2
CSS Acitve Links
Tweet Topic Started: May 13 2009, 02:06 AM (398 Views)
Flavius May 13 2009, 02:06 AM Post #1
Member Avatar


Posts:
283
Group:
Member
Member
#360
Joined:
Jul 29, 2008
Coding language
HTML/CSS
Is it possible to do in CSS decorations of certain links if you are viewing the page to that certain link. So I want the Search submenu link to be same as the submenu hover if I am viewing the Search Page.
Posted Image
Offline Profile Goto Top
 
Reid May 13 2009, 07:10 AM Post #2
Member Avatar
What? The land of the free? Whoever told you that was your enemy.

Posts:
1,790
Group:
Distinguished Coder
Member
#148
Joined:
Jul 20, 2008
Wait, what? To add hover you simply add :hover... like, for example
Code:
 
.submenu a:hover {
/* add things here for the a links in the submenu to do when hovered over */
}
Or you could do something like
Code:
 
.submenu a[href=LINK]:hover {
/* add something for any href in the submenu */
}
I guess. CSS isn't really my thing. :P
The Resource Board
Offline Profile Goto Top
 
Vitality May 13 2009, 02:21 PM Post #3
Member Avatar
Tabula Rasa

Posts:
784
Group:
Former Staff
Member
#320
Joined:
Jul 26, 2008
I'm not following it 100% either. But Reid has it right; only the submenu is an ID I believe, not a class so it would look like:
Code: HTML
 
#submenu a:hover {
/* add things here for the a links in the submenu to do when hovered over */
}
Offline Profile Goto Top
 
Reid May 13 2009, 02:46 PM Post #4
Member Avatar
What? The land of the free? Whoever told you that was your enemy.

Posts:
1,790
Group:
Distinguished Coder
Member
#148
Joined:
Jul 20, 2008
Vitality
May 13 2009, 02:21 PM
I'm not following it 100% either. But Reid has it right; only the submenu is an ID I believe, not a class so it would look like:
Code: HTML
 
#submenu a:hover {
/* add things here for the a links in the submenu to do when hovered over */
}
Oops, oh well.
The Resource Board
Offline Profile Goto Top
 
Kevin May 13 2009, 03:13 PM Post #5
Member Avatar


Posts:
700
Group:
Former Staff
Member
#8
Joined:
Jul 2, 2008
Coding language
HTML/CSS
He wants the submenu link to be highlighted depending on which page you're on. I'm pretty sure you'd need a code to do it, something like:

Get the page you're on (so like /search/ for example), and then get the a tag in #submenu which has "Search" in it (Because the individual links don't have ids/classes), and then make that link coloured or whatever.

However, I have no clue how to go about doing that. :P
Posted Image
Offline Profile Goto Top
 
Reid May 13 2009, 03:45 PM Post #6
Member Avatar
What? The land of the free? Whoever told you that was your enemy.

Posts:
1,790
Group:
Distinguished Coder
Member
#148
Joined:
Jul 20, 2008
Code:
 
if (location.href.match(/search/)) {
var subStuff = document.getElementById('submenu').getElementsByTagName('a');
var _len = subStuff.length;
while (_len--) {
if (subStuff[_len].innerHTML.indexOf("Search")!=-1) {
subStuff[_len].style.backgroundColor='yellow';
}}
That's the general way to do it.. although without telling me what all pages you want it to be different on and telling me how all you want it to be different, I can't do much more.
The Resource Board
Offline Profile Goto Top
 
Flavius May 14 2009, 04:19 AM Post #7
Member Avatar


Posts:
283
Group:
Member
Member
#360
Joined:
Jul 29, 2008
Coding language
HTML/CSS
I found this:

#submenu a:active

What is it?
Posted Image
Offline Profile Goto Top
 
PD.Phoenix May 14 2009, 04:53 AM Post #8
Member Avatar
Kokuhyou no Tentei

Posts:
326
Group:
Member
Member
#602
Joined:
Aug 15, 2008
Coding language
HTML/CSS
That's for active links. So it would be the page you're currently on when you click something on the submenu
Phoenix Designz is now open
Looking for staff and classers PM me here or on PD if interested.

Want to win some easy money? Enter Phoenix Designz tournaments. Learn more here ->> click


Posted Image
| My dA | Vote PD Top 100 |
Offline Profile Goto Top
 
Flavius May 15 2009, 02:04 AM Post #9
Member Avatar


Posts:
283
Group:
Member
Member
#360
Joined:
Jul 29, 2008
Coding language
HTML/CSS
That is what I mean.

1. I click "Search" on the submenu.
2. I am viewing the Search Page and the "Search" link in the submenu looks as if I was hovering over it.
Posted Image
Offline Profile Goto Top
 
rockon1824 May 16 2009, 01:36 PM Post #10
Member Avatar
I never know what to put for my member title. =(

Posts:
186
Group:
Member
Member
#424
Joined:
Aug 2, 2008
Coding language
HTML/CSS
Are you using ZB or IF? If you're using ZB, just paste this code into the Above the Copyright section of your Board Template:
Code:
 
<script type="text/javascript">
var aLink = location.href;
$("a[href='"+aLink+"']").addClass("alink");
</script>

This adds the class "alink" to any link that has the same URL as the page you're on so that you can style it in your CSS, using something like:
Code:
 
#submenu .alink {
color:#000;
font-weight:bold;
}
Or however you want it to look. If you want it to look like you're hovering over it like you mentioned, you could find "#submenu a:hover" in your CSS, and put this there as well; for instance:
Code:
 
#submenu a:hover, #submenu .alink {
*style stuff*
}
Edited by rockon1824, May 16 2009, 01:36 PM.
Posted Image
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Code University · Next Topic »
Locked Topic
  • Pages:
  • 1
  • 2

Track Topic · E-mail Topic Time: 7:47 PM Jul 10
Hosted for free by ZetaBoards · Privacy Policy