Jump to content

Automatic classing of current page nav item for CSS manipulation


johnnyflower

Recommended Posts

hi,

 

i actually got some code working to add an ID dynamically to a website i'm working on (it was a momentous occasion  :D).

 

here's the code:

in the functions.php file:

 

$url = 'tanzaniatravel.za.com';
$page = $_SERVER['PHP_SELF'];
$page = str_replace("/","",$page);
$page = str_replace(".php","",$page);
$page = str_replace("$url", "", "$page");

 

i call the functions.php file into the index.php file, and add this as the opening body tag:

 

<body id="<?php echo $page; ?>">

 

this dynamically adds an ID named after whatever the actual page is named.

 

now, i make use of the following top navigation structure:

 

<ul class="nav-top">
   <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a class="nav-top-lineheight" href="index.php" title="Tanzania Travel home">Home</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a class="nav-top-lineheight" href="about.php" title="Why use TanzaniaTravel.Za.Com">Why us</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a href="" title="">Overview and area map</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a href="" title="">Tanzania National Park</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a href="" title="">Tanzania Safari Lodges</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a href="" title="">Tanzania Tour Itineraries</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a href="" title="">Safari Dates & Prices</a></li>
  <li <?php echo ($page == '' ? 'class="nav-top-current"' : ''); ?>><a href="" title="">Zanzibar Kilimanjaro</a></li>
  <li class="<?php echo ($page == '' ? 'nav-top-current' : ''); ?> nav-top-last-li"><a class="nav-top-lineheight" href="" title="">Contact Us</a></li>
</ul>

 

you'll see that i've left the $page variable empty. i want that variable to call in the current page's ID, so that only the current page's <li> is active. this, of course, will greatly assist with developing the CSS for the navigation.

 

i appreciate your help very much. thank you.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.