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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.