hi friends
i need small help
http://kenrock.com.pk/ open this plz
suppose home page opened , i want to make “home” text color in menu “white”
or any active page like
http://kenrock.com.pk/completedProjects.html active page “completed projects” its color should be changed into white… because its active page
user get to know, its in which page
thanks,waiting
It’s easy with CSS. Firstly, add a special class to each link. E.g.
<ul>
<li><a [COLOR="#FF0000"]class="home"[/COLOR] href="index.html">Home</a></li>
<li><a class="com" href="completedProjects.html">Completed Projects</a></li>
<li><a class="cli" href="clientele.html">Clientele</a></li>
<li><a class="sta" href="keystaff.html">Key Staff</a></li>
<li><a class="equ" href="equipment.html">Equipment</a></li>
<li><a class="con" href="contact.html">Contact Us</a></li>
</ul>
Then add this to your CSS:
.home #mainMenuContainer ul li a.home, .com #mainMenuContainer ul li a.com, .cli #mainMenuContainer ul li a.cli, .sta #mainMenuContainer ul li a.sta, .equ #mainMenuContainer ul li a.equ, .con #mainMenuContainer ul li a.con {
color: white;
}
Then on the Home page, add the same class to the <body> tag:
<body class="home"
and put the equivalent class on the body tag for each other section. E.g. all pages in the Key Staff section all have this on the <body> tag:
<body class="sta">
thanks,first i thought similar thing, but i thought , any small other trick might be
but now i ve to add this code on all pages 
thanks a lot sir
Cool, glad it worked. Why the sad face?
no i am not sad 
happy thanks
I dislike the dual class approach myself – but then I really don’t tend to think of a lot of legitimate reasons to put a ID or class on BODY. Usually I just put a class of ‘current’ on the current menu item server-side in the markup. It’s easier to style for, less confusing, and less code.
can you give me an example
Well, my menus are usually built off a PHP array… so… well, I’ll pull it from the codebase I’m working on right now – this is PHP so it’s a wee bit more complex, but you’d have to swap the ID on body anyways for each page so it’s not that different. I’ll simplify it down a little.
I typically have an associative array of URL => description:
$mainMenu=array(
'/' => 'Home',
'/forums' => 'Forums',
'/technical' => 'Technical Reference',
'/about' => 'About Us'
);
(this array is usually built or added to dynamically by my back-end code)
Which I then iterate through to echo out.
echo '
<ul id="mainMenu">';
foreach ($mainMenu as $url => $text) {
echo '
<li><a href="',htmlspecialchars($url),'"',(
$text==$currentURL ? ' class="current"' : ''
),'>',$text,'</a></li>';
}
echo '
</ul>';
With a variable $currentURL which equals the current page minus the domain.
So when $currentURL==“/” it outputs:
<ul id="mainMenu">
<li><a href="/" class="current">Home</a></li>
<li>a href="/forums">Forums</a></li>
<li>a href="/technical">Technical Reference</a></li>
<li>a href="/about">About Us</a></li>
</ul>
When $currentURL==“/technical”
<ul id="mainMenu">
<li><a href="/">Home</a></li>
<li>a href="/forums">Forums</a></li>
<li>a href="/technical" class="current">Technical Reference</a></li>
<li>a href="/about">About Us</a></li>
</ul>
So on and so forth. Bit more code on the back end, but really
.current {
Is WAY easier to deal with than the headache of going:
#home .home,
#forums .forums,
#technical .technical,
#about .about {
Especially since it lets me add or remove items with impunity without worrying about adding/removing them from the CSS. Having to modify the CSS just because you want to add a new menu item is… well… indicative of failing to future-proof.
Nice work, DS; though it depends on the site being set up like that from the outset. I guess another way to do it with PHP on an already created site would be something like this (though I’m sure you could improve on it, me bein’ a noob’n’all):
<?php $currentPage = basename($_SERVER['SCRIPT_FILENAME']); ?>
<ul>
<li><a href="index.html" <?php if ($currentPage == 'index.html') {echo 'class="current"';} ?>>Home</a></li>
<li><a href="completedProjects.html" <?php if ($currentPage == 'completedProjects.html') {echo 'class="current"';} ?>>Completed Projects</a></li>
<li><a href="clientele.html" <?php if ($currentPage == 'clientele.html') {echo 'class="current"';} ?>>Clientele</a></li>
<li><a href="keystaff.html" <?php if ($currentPage == 'keystaff.html') {echo 'class="current"';} ?>>Key Staff</a></li>
<li><a href="equipment.html">Equipment</a></li>
<li><a href="contact.html" <?php if ($currentPage == 'equipment.html') {echo 'class="current"';} ?>>Contact Us</a></li>
</ul>
Well, it’s not bad, though I’d probably have that ALL in a echo statement since I consider opening and closing php like that to be bad coding practice – but again I’m in favor of having <?php and ?> removed from PHP entirely. Would speed it up, plug a number of security holes, make the folks at turdpress have to throw out their entire codebase and maybe try writing code properly for a change…
My approach would probably use inline evaluations like this:
<?php
$currentPage = basename($_SERVER['SCRIPT_FILENAME']);
echo '
<ul>
<li><a href="index.html"',(
$currentPage=='index.html') ? ' class="current"' : ''
),'>Home</a></li>
<li><a href="completedProjects.html",(
$currentPage=='completedProjects.html' ? ' class="current"' : ''
),'>Completed Projects</a></li>
<li><a href="clientele.html",(
$currentPage=='clientele.html' ? ' class="current"' : ''
),'>Clientele</a></li>
<li><a href="keystaff.html",(
$currentPage=='keystaff.html' ? ' class="current"' : ''
),'>Key Staff</a></li>
<li><a href="equipment.html",(
$currentPage=='equipment.html' ? ' class="current" : ''
),'>Equipment</a></li>
<li><a href="contact.html",(
$currentPage=='contact.html' ? ' class="current" : ''
),'>Contact Us</a></li>
</ul>';
?>
Though really that’s a lot of redundant code… I’d probably still build an array first… just to make it a loop and eval for less total code.
$mainMenu=array(
'index.php' => 'Home'
'completedProjects.php' => 'Completed Projects',
'clientele.php' => 'Clientele',
'keystaff.php' => 'Key Staff',
'equipment.php' => 'Equipment',
'contact.php' => 'Contact Us'
);
echo '
<ul id="mainMenu">';
foreach ($mainMenu as $title => $url) {
echo '
<li><a href="',$url,'"',(
$currentPage==$url) ? ' class="current"' : ''
),'>',$title,'</a></li>';
}
echo '
</ul>';
It would also make adding/removing menu items a lot simpler since you would just add the url and title to the array, then let the loop handle the markup.
Could take it even further and use that same array to build your TITLE attribute.
<?php
$siteTitle='Name of the website';
$mainMenu=array(
'index.php' => 'Home'
'completedProjects.php' => 'Completed Projects',
'clientele.php' => 'Clientele',
'keystaff.php' => 'Key Staff',
'equipment.php' => 'Equipment',
'contact.php' => 'Contact Us'
);
$currentPage = basename($_SERVER['SCRIPT_FILENAME']);
$currentTitle=isset($mainMenu[$currentPage]) ? $mainMenu[$currentPage] : '';
if ($currentTitle=='Home') $currentTitle='';
echo '
<title>
',(is_empty($currentTitle) ? '' : $currentTitle.' - '),$siteTitle,'
</title>
</head><body>
<h1>',$siteTitle,'</h1>
<ul id="mainMenu">';
foreach ($mainMenu as $title => $url) {
echo '
<li><a href="',$url,'"',(
$currentPage==$url) ? ' class="current"' : ''
),'>',$title,'</a></li>';
}
echo '
</ul>';
?>
Though that’s treading into starting to build your own CMS… which isn’t necessarily a bad thing given the quality of most of the off the shelf ones.
That’s fine if you’re using PHP, but I mostly go for a much simpler approach and use SSIs to pull in the menu, meaning that the only effective way to achieve that result is to put a class/ID on the <body>. It works fine, it doesn’t cause any problems, I see nothing wrong with it as an approach.
Wait, people still use SHTML? Kidding.
You’re right, within the limitations of SHTML that’s really the best (only?) option; though I HATE what it does in the CSS AND the markup since it reeks of ‘slap values on EVERYTHING’.
Sooner or later it’s time to strap on the big boy boots.
Thanks for all those demos, Jason. For someone just learning PHP, they are fascinating and very educational.
I really do like Jasons first one with setting the variables to different values. I use that currently on my site to indicate activity among certain pages.
It’s annoying to have to have an if statement everywehre by it adds dynamictivity to it
Why not? It does everything I need it to do on those sites. Why make things more complicated than they need to be?
Nothing wrong with it, I’ve just not seen anyone actually use it in five or six years. Kinda like coldfusion – you just don’t see it being used unless it’s an older site.
I use a similar stand-alone file which is included in every page:
#sp-menu li {display:inline-block; padding:0 1em}
#sp-menu #active {color:#900}
<!--Start of Main Menu-->
<div id="mainMenuContainer">
<?php include 'incs/__sp-menu.php';?>
</div>
<?php
$a=array
(
'home' => 'Home',
'complete' => 'Completed Projects',
'client' => 'Clientele',
'key-staff' => 'Key Staff',
'equipment' => 'Equipment',
'contact-us' => 'Contact Us',
);
$rqst = $_SERVER['REQUEST_URI'];
echo '<ul id="'sp-menu">';
foreach( $a as $url => $title):
# Maybe active page
if( ('/'==$rqst && 'home' == $url) || strpos( $rqst, $url ) )
{
$title = '<stong id="active">' .$title .'</strong>';
}
echo '<li><a href="' .$url .'">' .$title .'</a></li>';
endforeach;
echo '</ul>';