Dynamic Navigation Menus

calendar March 3, 2010

Next code demonstrates how to build a simple menu function with the current page high-lighted.

Code:

<?php
require_once('menu.php');
$page = isset($_GET['page']) ? $_GET['page'] : 'home';
?>
<html>
<head>
<title>Page - <?=$page?>
<style type="text/css">
.inactive, .active
{
 padding:2px 2px 2px 20px;
}

.inactive
{
 background:#ddd;
} 

.active
{
 background:black;
 font-weight:bold;
}

.inactive a
{
 text-decoration:none;
}

.active a
{
 text-decoration:none;
 color:white;
}
</style>
</title>
</head>
<body>
<table>
<tr>
<td width="200" valign="top">
<?php page_menu($page); ?>
</td>
<td width="600" valign="top">
Page: <?=$page?>
</td>
</tr>
</table>
</body>
</html>

Save this code as index.php

<?php
function menu_item($id, $title, $current)
{
  $class = ($current == $id) ? "active" : "inactive";
?>
  <tr><td class=<?=$class?>>
  <a href="index.php?page=<?=$id?>"><?=$title?></a>
  </td></tr>
<?php
}

function page_menu($page)
{
?>
  <table width="100%">
  <?php menu_item('home', 'Home', $page); ?>
  <?php menu_item('about', 'About', $page); ?>
  <?php menu_item('browse', 'Browse', $page); ?>
  <?php menu_item('download', 'Download', $page); ?>
</table>
<?php
}    
?>

Save this code as menu.php

admin PHP

Leave a Reply

You must be logged in to post a comment.