Thursday, November 7, 2013

Applying selected classes to anchor tags for dynamic pages ?

Websites have menu items. Each menu item points to unique page. Menu item usually associated with anchor tags which are placed in li tag. Colors are applied to these items default. Normally these colors are taken from the site color schemes. Designers will do job of applying colors on mouse over, mouse out. These can be easily do with the help of css styles.

They will create individual pages for each menu item. The navigation structure is placed in all pages so that it is possible to write to add color to the selected menu item. This is fine when the pages are at hand of designers. But in development if we go with CMS or core PHP there its' need to design other way as its needs optimized some common sections of the website front end.

Say for example: Header, footer and left navigation are commonly seen in all web pages. The code/html used for these section usually same in all pages.  In scripting languages like php,aspx and jsp we can eliminate redundancy, and write the same in separate pages for each section. We can include these pages using include statement in all pages so that it makes us to easily change textual changes further. Also further maintenance  will reduce too.

In case of adding the sections as included files. we will not able to see selected color if we navigate through pages in front end.  This is happened because of every page is coming through the same included file. So here it is not able to identify pages separately. To avoid this issue, the script needs able to identify the page and apply the code behavior.  see the same in below example.

$current_page = str_replace(".php","", end(explode('/',$_SERVER['SCRIPT_NAME'])));

The statement above returns the page name and holds in the variable "$current_page". For example say we are browsing the page aboutus.php, then the variable "$current_page" holds the string "aboutus". Then you can react further if the variable matches the value "aboutus". See below.

if($current_page=="aboutus")
{
$aboutus="class='selected' ";
}

Using if condition, we are checking the current page. one more variable $aboutus holds the string "class='selected'". if the page is about us then the variable will be set to "class='selected' ", for other pages the variable is set to empty.

To add css class "selected" to the page aboutus you have to echo the same variable in about us anchor tag. see example below.

 <a href="aboutus.php" <?php echo $aboutus; ?>>ABOUT US</a>

You can apply "selected" classes to anchor/li tag in the same fashion as stated above. Please find the script for 3 pages.  services, about us and contact us

<?php

$current_page = str_replace(".php","", end(explode('/',$_SERVER['SCRIPT_NAME'])));

if($current_page=="services")

$services_page="class='selected' ";
}

if($current_page=="aboutus")

$aboutus_page="class='selected' ";
}

if($current_page=="contactus")

$contactus_page="class='selected' ";
}

 <a href="services.php" <?php echo $services_page; ?>>SERVICES</a>
 <a href="aboutus.php" <?php echo $aboutus_page; ?>>ABOUT US</a>
 <a href="contactus.php" <?php echo $contactus_page; ?>>CONTACT US</a>

?>


No comments:

Post a Comment