ayok Posted May 7, 2008 Share Posted May 7, 2008 Hi, I've got a question. Is it possible to create a button or navigation menu that shows the page we are on. For example, we are on "home" page, I want to make that "home" button has different color than others, so we know that we are on "home" page. I have tried with a:active, but it doesn't work on firefox and the active state change if we click on anywhere. Is it also possible to make the other button, which is also "home" button if we have two "home" buttons on a page. Or I can only do it with php? Thank you. I hope you understand my question. ayok Quote Link to comment https://forums.phpfreaks.com/topic/104480-active-link/ Share on other sites More sharing options...
Fadion Posted May 7, 2008 Share Posted May 7, 2008 As u said, a:active will not maintain state even if another link is clicked, so after a refresh u dont even think about it. Dont think there is a pure css approach to this without some php code on the back. Quote Link to comment https://forums.phpfreaks.com/topic/104480-active-link/#findComment-534854 Share on other sites More sharing options...
jcombs_31 Posted May 8, 2008 Share Posted May 8, 2008 For an "active" page you need to add a new style. You can use a class or id, so in your stylesheet you might have something like: a { color: #000; background-color: #fff } a#active { color: #fff; background-color: #000; } If you are using a list for your menu you may have something like <ul> <li><a href='#' id='active'>Home</a></li> <li><a href='#'>Another Page</a></li> </ul> From here you can see that the "home" link is marked by the active id. Now you can either hard code this into each page or if are including your menu you will have to add a little logic with php, but this should give you the idea of how people mark active pages. Quote Link to comment https://forums.phpfreaks.com/topic/104480-active-link/#findComment-535806 Share on other sites More sharing options...
ayok Posted May 8, 2008 Author Share Posted May 8, 2008 aah.. i c what you mean.. Thanks for the trick. ayok Quote Link to comment https://forums.phpfreaks.com/topic/104480-active-link/#findComment-535830 Share on other sites More sharing options...
TheFilmGod Posted May 9, 2008 Share Posted May 9, 2008 <div id="nav"> <ul> <li id="active"><a href="#">Homepage</a></li> <li><a href="#"></a></li> </ul> </div> #nav ul li#active { code.... } The reason this way is better than the other provided example is that you stress the importance of the "active" link to be connected with <li></li> instead of <a>. It's also a lot easier to read and understand. Quote Link to comment https://forums.phpfreaks.com/topic/104480-active-link/#findComment-536471 Share on other sites More sharing options...
ayok Posted May 9, 2008 Author Share Posted May 9, 2008 Hi God, I've tried to do #nav ul li#active { code.... } <li id="active"> but it doesn't work. #nav ul li a#active { code.... }<a id="active"> is working.. Why is that? Quote Link to comment https://forums.phpfreaks.com/topic/104480-active-link/#findComment-536572 Share on other sites More sharing options...
GameYin Posted May 9, 2008 Share Posted May 9, 2008 You declared it wrong. Also make sure you close your style tag..? I assume you did it.... #nav ul li #active. There Quote Link to comment https://forums.phpfreaks.com/topic/104480-active-link/#findComment-536586 Share on other sites More sharing options...
jcombs_31 Posted May 9, 2008 Share Posted May 9, 2008 <div id="nav"> <ul> <li id="active"><a href="#">Homepage</a></li> <li><a href="#"></a></li> </ul> </div> #nav ul li#active { code.... } The reason this way is better than the other provided example is that you stress the importance of the "active" link to be connected with <li></li> instead of <a>. It's also a lot easier to read and understand. On the contrary, you're styling the link, not the list item. The link style is what changes onrollover, active, etc and should be the item that is styled for consistency. As far as being easier to read and understand, that is up for debate, in the end it is all about the result. Quote Link to comment https://forums.phpfreaks.com/topic/104480-active-link/#findComment-536591 Share on other sites More sharing options...
bronzemonkey Posted May 10, 2008 Share Posted May 10, 2008 I agree with FilmGod. Better to put the class on the list item that is the parent of the link...rather than the link. It means you can also style the list item if needed, which it often is. I also avoid using a class of "active" because there is already a css pseudo-class :active - a current page state is distinctly different from a link being active. <!-- html --> <ul id="nav"> <li><a href="#"></a></li> <li class="current"><a href="#"></a></li> <li><a href="#"></a></li> </ul> /* css */ #nav li.current a {} You can also use purely css to produce current-page styles (I wouldn't use this technique on a large site though). Just give the body a page-specific id and each list item of the nav an id (or class) <body id="home"> <ul id="nav"> <li id="navHome"><a href="#">Home</a></li> <li id="navAbout"><a href="#">About</a></li> <li id="navBlog"><a href="#">Blog</a></li> <li id="navContact"><a href="#">Contact</a></li> </ul> </body> /* css */ #nav li a {font-weight:normal; color:#000; background:#fff;} #home #navHome a, #about #navAbout a, #blog #navBlog a, #contact #navContact a {font-weight:bold; color:#fff; background:#000;} Quote Link to comment https://forums.phpfreaks.com/topic/104480-active-link/#findComment-537797 Share on other sites More sharing options...
TheFilmGod Posted May 10, 2008 Share Posted May 10, 2008 Hey Ayok. I copied and pasted some code that I have on my website. Feel free to change/edit the code as much as you want. The active link is colored gray. It also has some nice hover effects. Make sure you name the css file as master.css. HTML: call the file index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> @import url("master.css"); </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Navigation Test Page - TheFilmGod is AWESOME!</title> </head> <body> <div id="nav"> <ul> <li id="active"><a href="#">Home</a></li> <li><a href="#">Page1</a></li> <li><a href="#">Page2</a></li> <li><a href="#">Page3</a></li> <li class="last"><a href="#">Page4</a></li> </ul> </div> </body> </html> CSS: call the file master.css #nav ul { margin: 0 0 0 70px; padding: 0; } #nav li { list-style: none; margin: 0 20px 0 0; display: block; width: 95px; height: 25px; float: left; font: 14px/25px arial, sans-serif; font-weight: bold; text-align: center; } #nav li.last { margin: 0; } #nav a { display: block; width: 95px; height: 25px; color: #fff; background: url(layout/nav.png) no-repeat #424242; } #nav a:hover { text-decoration: none; background: url(layout/nav_hov.png) no-repeat #835d31; } #nav li#active a { color: #000; background: url(layout/nav_act.png) no-repeat #e1e1e1; } Quote Link to comment https://forums.phpfreaks.com/topic/104480-active-link/#findComment-537845 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.