Using the following PHP script to select the page Im currently on.
each page has the variable $page== 'pagename'
This script works fine but sometimes the buttons need to be rolled over twice in order for the dropdown menu to appear.
Is there a better way?
<div id="navigation">
<ul id="nav">
<!-- If the button HOME is selected then make the HOME Button Active -->
<?php if ($page == 'home') { ?><li><a href="index.php" a id="current">HOME</a></li>
<?php } else { ?><li><a href="index.php">HOME</a><?php } ?>
<!-- If the button ABOUT US is selected then make the ABOUT US Button Active -->
<?php if ($page == 'about-us') { ?><li><a href="about-us.php" a id="current">ABOUT US</a>
</li>
<?php } else { ?><li><a href="about-us.php">ABOUT US</a>
</li>
<?php } ?>
<!-- If the page projects is selected then make the Projects Button Active -->
<?php if ($page == 'projects') { ?><li><a href="projects.php" a id="current">PROJECTS</a>
<ul>
<li><a href="project-01.php">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
<li><a href="#">Project 4</a></li>
</ul>
</li>
<?php } else { ?><li><a href="projects.php">PROJECTS</a>
<ul>
<li><a href="project-01.php">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
<li><a href="#">Project 4</a></li>
</ul>
</li>
<?php } ?>
<!-- If the page Capabilities is selected then make the Capabilities Button Active -->
<?php if ($page == 'capabilities') { ?><li><a href="capabilities.php" a id="current">CAPABILITIES</a>
<ul>
<li><a href="capabilities-civil-works.php">Civil Works</a></li>
<li><a href="capabilities-commercial-construction.php">Commercial Construction</a></li>
<li><a href="capabilities-controlled-waste-management.php">Controlled Waste Management</a></li>
<li><a href="capabilities-plant-hire.php">Plant Hire</a></li>
</ul>
</li>
<?php } else { ?><li><a href="capabilities.php">CAPABILITIES</a>
<ul>
<li><a href="capabilities-civil-works.php">Civil Works</a></li>
<li><a href="capabilities-commercial-construction.php">Commercial Construction</a></li>
<li><a href="capabilities-controlled-waste-management.php">Controlled Waste Management</a></li>
<li><a href="capabilities-plant-hire.php">Plant Hire</a></li>
</ul>
</li>
<?php } ?>
<!-- If the page Careers is selected then make the Careers Button Active -->
<?php if ($page == 'careers') { ?><li><a href="careers.php" a id="current">CAREERS</a></li>
<?php } else { ?><li><a href="careers.php">CAREERS</a>
</li>
<?php } ?>
<!-- If the page Contact Us is selected then make the Contact Us Button Active -->
<?php if ($page == 'contactus') { ?><li><a href="contact-us.php" a id="current">CONTACT US</a></li>
<?php } else { ?><li><a href="contact-us.php">CONTACT US</a>
</li>
<?php } ?>
</ul>
<!-- Search Form -->
<div class="search-form">
<form method="get" action="#">
<input type="text" class="search-text-box" />
</form>
</div>
</div>
<div class="clear"></div>
</div>
<!-- Navigation / End -->
The second part could be smaller:
<?php if ($page == 'projects') { ?><li><a href="projects.php" a id="current">PROJECTS</a> <?php } else { ?> <li><a href="projects.php">PROJECTS</a> <?php } ?>
<ul>
<li><a href="project-01.php">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
<li><a href="#">Project 4</a></li>
</ul>
</li>
So basically on which page your are on, that should have id="current"? This can be done the following way:
<?php
$selected = array($page => ' id="current"');
?>
...
<li><a href="index.php"<?php print $selected['home']; ?>></li>
<li><a href="about-us.php"<?php print $selected['about-us']; ?>>ABOUT US</a></li>
...
The array $selected will have one index which is the current page and the value will be id="current". So this value will be applied to the active page only.
However this will trigger an undefined index notice, but you won't need any ifs in your code.
If you are okay with a bit more complex structure you could do it like this and won't get notices.
<?php
$selected = array($page => ' id="current"');
?>
...
<li><a href="index.php"<?php print isset($selected['home'])?$selected['home']:''; ?>></li>
<li><a href="about-us.php"<?php print isset($selected['about-us'])?$selected['about-us']:''; ?>>ABOUT US</a></li>
...
Since you are basically doing the same thing over and over again, I'd suggest automating the whole thing anyway.
<?php
$naviPages = array(
array('name' => 'HOME', 'url' => 'index.php'),
array('name' => 'ABOUT US', 'url' => 'about-us.php'),
array('name' => 'PROJECTS' => 'url' => 'projects.php', 'children' => array(
array('name' => 'Project 1', 'url' => 'project-01.php'),
array('name' => 'Project 2', 'url' => 'project-02.php'),
)),
//...
);
//...
foreach ($naviPages as $naviPage) {
print '<li><a href="'.$naviPage['url'].'"';
if ($page == $naviPage['name'])
print ' id="active"';
print '>'.$naviPage['name'].'</a>';
if (isset($naviPage['children'])) {
print '<ul>';
foreach ($naviPage['children'] as $naviPageChild) {
print '<li><a href="'.$naviPageChild['url'].'">'.$naviPageChild['name'].'</a></li>';
}
print '</ul>';
}
print '</li>';
}
I would tend to stick the $page as a css class in your <body> tag or the navigation div. Then you can do just about everything else in pure css!
So for example, say you have this:
<div id="navigation" class="page-<?php echo $page ?>">
<ul id="nav">
<li class="nav-home"><a href="index.php">HOME</a>
<li class="nav-about"><a href="about-us.php">ABOUT US</a></li>
Notice how the navigation div has the page name, and each menu item has a unique class name. Now all you have to do is use some CSS:
.page-home .nav-home,
.page-about .nav-about {
color: red; /** assuming you want your active/current menu item to be red **/
}
See how much cleaner that is?
Of course you can then extend this to show/hiding the sub-menus. Give your sub-menu <ul> tag a unique classname:
<li class="nav-projects"><a href="projects.php" a id="current">PROJECTS</a>
<ul class="submenu sub-projects">
...
</ul>
And some CSS to control that:
.submenu {
display: none; /** Our default **/
}
.page-projects .sub-projects {
display: block; /** Show the projects sub-menu when you are on that page **/
}