brian Posted November 12, 2011 Share Posted November 12, 2011 Here what am trying to do is I created a unorderlist of 4 links. Link1 , link2 , link3 and link4. I created a new page for the unorderlist so that i can include it with php with include_once code in the main page. Actually what i want is when ever i clik any link its color be change but the remaining be unchanged. For eg. I click link1 . The page opens and remaining link color same as what i expected but when i click another link as link2 my previous link1 color and link2 color are same. I can't give a active class in each link because i include the unoderlist link in external page and include it with php include_once text. Any idea how can i complete it.www.w3schools.com ..the website left hand side menu is an example what i am wishing to do is.. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 12, 2011 Share Posted November 12, 2011 What you normally do is have the included menu check the current page address it is been inserted into, against the menu link values and then add the class for active styling. Edit: Reading your topic again, Are you are describing pages that are visited, then you have to set the pseudo class for the anchor links to achieve this. Example: #menu a:visited { color:purple; } This must be placed in specific order though, a good way to remember the order is to use the phrase 'love hate' L = :linkoV =:visitedeH = :hoverA = :activete Link to comment Share on other sites More sharing options...
brian Posted November 14, 2011 Author Share Posted November 14, 2011 well am very noob .. but i want create a buttons like same as this forum menu ( w3schools Forums Members Calender) effect is same link visited hover and active just not working.. i cant give active class in each link because my link items are in external page . I had include it with include_once php code so that when ever i had to add or del only once.Do i need java script or only css its possible . My code doesnt show any action like this forum menu type. :(Below is my code.. Link to comment Share on other sites More sharing options...
brian Posted November 14, 2011 Author Share Posted November 14, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css</title><style type="text/css">ul.tabs {margin: 0;padding: 0;float:left;list-style: none;height: 32px; /*--Set height of tabs--*/border-bottom: 1px solid #999;border-left: 1px solid #999; }ul.tabs li {float: left;height: 31px;line-height: 31px;border: 1px solid #999;border-left: none;margin-bottom: -1px;overflow: hidden;position: relative;background: #ddd;}ul.tabs li a {text-decoration: none;color: #000;display: block;font-size: 1.2em;padding: 0 20px;border: 1px solid #fff;outline: none;}ul.tabs li a:hover {background: #ccc;}ul.tabs li.active, html ul.tabs li.active a:hover {background: #f1f2f2;border-bottom: 1px solid #f1f2f2; } </style></head><body><ul class="tabs"><li><a href="#"> link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> </ul></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted November 14, 2011 Share Posted November 14, 2011 but when i click another link as link2 my previous link1 color and link2 color are same that is reference to visited link Anyhow you need to dynamically produce your menu using php, then you can search the current page address, and assign the active class to that specific link. menu.php<?php$link_title = array("link 1", "link 2", "link 3", "link 4");$link_page = array("page1.php", "page2.php", "page3.php", "page4.php");$count=0;?><ul class="tabs"><?phpforeach($link_page as $link){if(basename($_SERVER['SCRIPT_NAME']) == $link){$active=' class="active"';}else{$active='';}echo '<li '.$active.'><a href="'.$link.'">'.$link_title[$count].'</a></li>';$count++;}?> </ul> page1.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">ul.tabs {margin: 0;padding: 0;float:left;list-style: none;height: 32px; /*--Set height of tabs--*/border-bottom: 1px solid #999;border-left: 1px solid #999; }ul.tabs li {float: left;height: 31px;line-height: 31px;border: 1px solid #999;border-left: none;margin-bottom: -1px;overflow: hidden;position: relative;background: #ddd;}ul.tabs li a {text-decoration: none;color: #000;display: block;font-size: 1.2em;padding: 0 20px;border: 1px solid #fff;outline: none;}ul.tabs li a:hover {background: #ccc;}ul.tabs li.active, html ul.tabs li.active a:hover {background: #f1f2f2;border-bottom: 1px solid #f1f2f2; } </style></head><body><?phpinclude("menu.php");?><h1>Page 1</h1></body></html> copy page1.php for page2.php and so on Link to comment Share on other sites More sharing options...
brian Posted December 9, 2011 Author Share Posted December 9, 2011 Its really a awome trick thank you very much Dsonesuk:) Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.