Make link a different color when active
|
2:29 AM |
No comments |
Make link a different color when active
All, I've currently got the following CSS for my navigation menu:
#primary-menu, .default-menu, #mobile-menu-dropdown li, .site-navigation a { font-size: 32px; } Then I have the following HTML to display the menu:
When someone clicks on one of these links I'd like to make the link active and color #FF0000 for example. I tried the following CSS but it doesn't keep the color when the new page loads:
#primary-menu, .default-menu, #mobile-menu-dropdown li, .site-navigation a:active { color: #FF0000; } Anyone have any ideas on how to make this work?
EDIT: I added some jQuery as Explosion Pills recommended. This jQuery looks like this:
jQuery(".menu a").each(function () { if(jQuery(this).attr('href') === jQuery(location).attr('href')){ if (jQuery(this).attr('title') === jQuery(this).text()) { alert("It is in here and the title is: " + jQuery(this).attr('title')); jQuery(this).css('color', '#FF0000'); } } }); It is getting into my alert successfully but it isn't applying the color that I have specified to the link (it doesn't do it for any link)
Link to the page: http://tinyurl.com/a7tpvwy
Answer by Explosion Pills for Make link a different color when active
I assume that you want the next page to load, so this is not possible purely with CSS because CSS has no way of knowing what page you are on. You can either employ a JavaScript solution that checks whether the current location is equal to the location of any link and highlights it green, e.g.
Array.prototype.forEach.call(document.querySelectorAll('a'), function (elem) { if (elem.getAttribute('href') === window.location.pathname) { elem.style.color = '#FF0000'; } }); The simpler alternative is to handle it on the server side. When you are printing out the header links, check the current location and set the link's style if there's a match.
EDIT: jQuery version:
$("a").each(function () { if ($(this).attr('href') === window.location.pathname) { $(this).css('color', '#FF0000'); } }); Answer by Muhambi for Make link a different color when active
Try .site-navigation:visited for visited links. See here:http://jsfiddle.net/Kgxrw/
Answer by Philip Whitehouse for Make link a different color when active
Your CSS isn't doing what you think it is:
#primary-menu, .default-menu, #mobile-menu-dropdown li, .site-navigation a:active
The commas represent OR not AND
Answer by Krayg for Make link a different color when active
One simple way to style the link:
ul.menu li a:active {color: #FF0000;} Edit: sorry, I missed the part where you said you want the colour to persist when the new page loads. As has been said, you need some client/server side code for that.
Answer by Jonathan Bellavaro for Make link a different color when active
In order to do what your are trying to do you must first understand a:hover Must come after a:link and a:visited in the CSS definition in order to be effective. If they are not in this order then they will not work.
Second is you must understand that if you where thinking (a:active) meant the color of the current link the end user was on, this is incorrect. (a:active) changes the color when you click on the link. You can test this by holding down the mouse button on the link that you made a different color with the (a:active).
Finally, if you are trying to do this using just CSS you have to add a specific class on the current link that the end user is on. Below I left you an example hope this helps :)
Your Navigation Bar As Follows
-Home
-News
-Blog
-ect...
We are on the "Blog" Page For This Example:
/*YOUR CSS SHOULD LOOK LIKE THIS*/ /* Note: You can make these any colors you want *\ /* unvisited link grey */ #primary-menu-container a:link { color: #777; } /* visited link grey */ #primary-menu-container a:visited { color: #777; } /* mouse over link blue */ #primary-menu-container a:hover { color: #0CF; } /* selected link blue */ #primary-menu-container a:active { color: #0CF; } /* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/ /* Note: You can make this any color you want */ .activePage a { color: #0CF !important }Notice I did not put the .activePage tag in the other links? What this does is allow your original colors that you choose in your css for your navigation bar to still take place while the page that is active stays solid with a different color.
The reason this worked is because I added !important at the end of the color for that separate class.
.activePage { color: #0CF !important }So to apply this same technique to your other pages it would simply look like this:
"Home Page"
/*YOUR CSS SHOULD LOOK LIKE THIS*/ /* Note: You can make these any colors you want *\ /* unvisited link grey */ #primary-menu-container a:link { color: #777; } /* visited link grey */ #primary-menu-container a:visited { color: #777; } /* mouse over link blue */ #primary-menu-container a:hover { color: #0CF; } /* selected link blue */ #primary-menu-container a:active { color: #0CF; } /* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/ /* Note: You can make this any color you want */ .activePage a { color: #0CF !important } I hope I gave you a solid answer to your question.
Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72
0 comments:
Post a Comment