Hi, I'm redesigning my website (new redesign: http://new.meh626.com (only the home page has been done at the moment)) and in each page I include the header via PHP. The header contains the navbar which looks like this: HTML: <nav> <ul> <li class="home"><a class="selected" href="http://new.meh626.com">home</a></li> <li class="about"><a href="http://new.meh626.com/about/">about</a></li> <li class="photos"><a href="http://new.meh626.com/photos/">photos</a></li> <li class="portfolio"><a class="notf1" href="http://new.meh626.com/portfolio/">portfolio</a></li> <li class="blog"><a class="notf2" href="http://new.meh626.com/blog/">blog</a></li> <li class="contact"><a class="notf3" href="http://new.meh626.com/contact/">contact</a></li> </ul> </nav> Code (markup): CSS: nav { height: 46px; width: 451px; float: right; right: 0; z-index: 4; } nav ul { width:451px;height:46px;margin:0 0 0 0;padding:0 0 0 0;list-style:none;position:relative;float:right;right:0; } nav ul li { margin:0 0 0 0;list-style:none;padding:0;line-height:1.4em;display:block;position:absolute;top:0;right:0;height:46px;width:451px; } nav ul li a { text-indent:-999em;display:block;height:46px;background:url(../images/navbar.png) no-repeat; } nav ul li.home { width:68px;left:1px; } nav ul li.about { width:68px;left:69px; } nav ul li.photos { width:77px;left:137px; } nav ul li.portfolio { width:92px;left:214px; } nav ul li.blog { width:57px;left:306px; } nav ul li.contact { width:85px;left:363px; } nav ul li.home a { width:68px;background-position:-1px 0px; } nav ul li.home a:hover { width:68px;background-position:-1px -47px; } nav ul li.home a.selected,nav ul li.home a.selected:hover { background-position:-1px -94px; } nav ul li.home a.notf1,nav ul li.home a.notf1:hover { background-position:-1px -141px; } nav ul li.home a.notf2,nav ul li.home a.notf2:hover { background-position:-1px -188px; } nav ul li.home a.notf3,nav ul li.home a.notf3:hover { background-position:-1px -235px; } nav ul li.about a { width:68px;background-position:-69px 0px; } nav ul li.about a:hover { width:68px;background-position:-69px -47px; } nav ul li.about a.selected,nav ul li.about a.selected:hover { background-position:-69px -94px; } nav ul li.about a.notf1,nav ul li.about a.notf1:hover { background-position:-69px -141px; } nav ul li.about a.notf2,nav ul li.about a.notf2:hover { background-position:-69px -188px; } nav ul li.about a.notf3,nav ul li.about a.notf3:hover { background-position:-69px -235px; } nav ul li.photos a { width:77px;background-position:-137px 0px; } nav ul li.photos a:hover { width:77px;background-position:-137px -47px; } nav ul li.photos a.selected,nav ul li.photos a.selected:hover { background-position:-137px -94px; } nav ul li.photos a.notf1,nav ul li.photos a.notf1:hover { background-position:-137px -141px; } nav ul li.photos a.notf2,nav ul li.photos a.notf2:hover { background-position:-137px -188px; } nav ul li.photos a.notf3,nav ul li.photos a.notf3:hover { background-position:-137px -235px; } nav ul li.portfolio a { width:92px;background-position:-214px 0px; } nav ul li.portfolio a:hover { width:92px;background-position:-214px -47px; } nav ul li.portfolio a.selected,nav ul li.portfolio a.selected:hover { background-position:-214px -94px; } nav ul li.portfolio a.notf1,nav ul li.portfolio a.notf1:hover { background-position:-214px -141px; } nav ul li.portfolio a.notf2,nav ul li.portfolio a.notf2:hover { background-position:-214px -188px; } nav ul li.portfolio a.notf3,nav ul li.portfolio a.notf3:hover { background-position:-214px -235px; } nav ul li.blog a { width:57px;background-position:-306px 0px; } nav ul li.blog a:hover { width:57px;background-position:-306px -47px; } nav ul li.blog a.selected,nav ul li.blog a.selected:hover { background-position:-306px -94px; } nav ul li.blog a.notf1,nav ul li.blog a.notf1:hover { background-position:-306px -141px; } nav ul li.blog a.notf2,nav ul li.blog a.notf2:hover { background-position:-306px -188px; } nav ul li.blog a.notf3,nav ul li.blog a.notf3:hover { background-position:-306px -235px; } nav ul li.contact a { width:85px;background-position:-363px 0px; } nav ul li.contact a:hover { width:85px;background-position:-363px -47px; } nav ul li.contact a.selected,nav ul li.contact a.selected:hover { background-position:-363px -94px; } nav ul li.contact a.notf1,nav ul li.contact a.notf1:hover { background-position:-363px -141px; } nav ul li.contact a.notf2,nav ul li.contact a.notf2:hover { background-position:-363px -188px; } nav ul li.contact a.notf3,nav ul li.contact a.notf3:hover { background-position:-363px -235px; } Code (markup): I have made the header as separate file so I can easily update the notification badges on the navbar site wide in one go. The home list item has a link class of selected: <li class="home"><a [B]class="selected"[/B] href="http://new.meh626.com">home</a></li> Code (markup): This is all good if you are just on the home page but if I create another page eg. http://new.meh626.com/about/ the navbar shows with the home section selected. I am wondering if it's possible to create a script (PHP or Javascript) that will detect what current page I am on and change the navbar class' to correctly reflect the current page I am viewing. Thanks,
You can use "if" as suggested. In php, you may use $currentFile = $_SERVER["SCRIPT_NAME"]; PHP: to get the current file name with path. Then use something like, if ($currentFile == "you path 1"){ echo "your html code"; } else if ($currentFile == "you path 2"){ echo "your html code"; } PHP: Make sure you use php code within your HTML file as below. your html code <? your php code ?> your html code
NeoCambell: Thank you! That worked a treat. I did make a few minor tweaks though, eg: <?php if ($currentFile == "/index.php"){echo [COLOR="Red"]'class=[B]"selected"[/B]'[/COLOR];} [COLOR="DarkOrchid"]else{echo 'class="notf1"';}[/COLOR] ?> Code (markup): 1. Fixed the echo quote marks so the class styles apply properly and validate. 2. Added an else statement to make sure when your not on that page it can still have other styles applied, eg. notification styles.