Hello and welcome to my latest tutorial. This is a simple and easy to understand explination
for a set of links that will highlight the "active" link.
Let's get to it!
We will be using some PHP, HTML and MYSQL. The MYSQL is simple enough, we just need
to make a table for the links.
CREATE TABLE `main_links` (
`id` tinyint(4) NOT NULL auto_increment,
`active` tinyint(2) NOT NULL default '0',
`order` tinyint(3) NOT NULL default '0',
`text` varchar(155) NOT NULL default '',
`link` varchar(155) NOT NULL default '',
PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=6 ;
--
-- Dumping data for table `main_links`
--
INSERT INTO `main_links` VALUES (1, 1, 1, 'Home', 'index.php');
INSERT INTO `main_links` VALUES (2, 1, 2, 'Blog', 'blog.php');
INSERT INTO `main_links` VALUES (3, 1, 3, 'Pictures', 'pictures.php');
INSERT INTO `main_links` VALUES (4, 1, 4, 'News', 'news.php');
INSERT INTO `main_links` VALUES (5, 1, 5, 'Contact', 'contact.php');
`id` tinyint(4) NOT NULL auto_increment,
`active` tinyint(2) NOT NULL default '0',
`order` tinyint(3) NOT NULL default '0',
`text` varchar(155) NOT NULL default '',
`link` varchar(155) NOT NULL default '',
PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=6 ;
--
-- Dumping data for table `main_links`
--
INSERT INTO `main_links` VALUES (1, 1, 1, 'Home', 'index.php');
INSERT INTO `main_links` VALUES (2, 1, 2, 'Blog', 'blog.php');
INSERT INTO `main_links` VALUES (3, 1, 3, 'Pictures', 'pictures.php');
INSERT INTO `main_links` VALUES (4, 1, 4, 'News', 'news.php');
INSERT INTO `main_links` VALUES (5, 1, 5, 'Contact', 'contact.php');
Pretty simple here, but notice how there is a row for "active" and "order". This way you can
set the order of your links and add or remove them as you like. The above example has all
links active and the order will be Home - Blog - Pictures - News - Contact
The row "text" is the check we will do later (in a session) to match the link and webpage
together.
To explain a bit more, index.php is the home page, so the "text" for that row can be "Home".
A session will be set in the next part of this tutorial for the index.php.
Top of page
index.php
Here is how we will set the session to check for the active link and also include the main_links.php.
I'm including a style sheet for the links. (The code will be last for the stylesheet)
<?PHP
//Start Sessions
session_start();
//Set session for active/live link
//This next line needs to be set accordingly to each page
$_SESSION['active'] = 'Home';
//Include the style sheet
echo '<link href="style.css" rel="stylesheet" type="text/css" />';
//Include your header code here
include 'header.php';
//Include your links
include 'main_links.php';
//Include your content
include 'content.php';
//Include your footer
include 'footer.php';
?>
//Start Sessions
session_start();
//Set session for active/live link
//This next line needs to be set accordingly to each page
$_SESSION['active'] = 'Home';
//Include the style sheet
echo '<link href="style.css" rel="stylesheet" type="text/css" />';
//Include your header code here
include 'header.php';
//Include your links
include 'main_links.php';
//Include your content
include 'content.php';
//Include your footer
include 'footer.php';
?>
Top of page
main_links.php
Now lets make the code to show all "active" links and put them in the order you specified in
the "main_links" table of your database.
First we need to include your config.php code and do the query for the active links.
<?PHP
//include your config.php
include 'config.php';
//Select the active links from your "main_links" table, then echo them out in order
$links = mysql_query("SELECT * FROM main_links WHERE `active` = 1 ORDER by `order` ASC") or die(mysql_error());
//include your config.php
include 'config.php';
//Select the active links from your "main_links" table, then echo them out in order
$links = mysql_query("SELECT * FROM main_links WHERE `active` = 1 ORDER by `order` ASC") or die(mysql_error());
Now below is the code to show your active link. Since you are including this to each page
that uses these links, each page has a different $_SESSION['active'].
In this tutorial we are including main_links.php in the index.php. The if statement below
can now tell what link to hightlight. As of now $_SESSION['active'] is equal to Home. This
now makes index.php the link to hightlight and set it to the class "main_live". All other links
will be set to "text_14".
The last part of main_links.php will echo out the results. Hey, see how we are using that "text"
field from the table? It's also being used as the text for the actual link.
while($r = mysql_fetch_array($links))
{
//Set class for active link
//(Set this session at the top of each page you want this code included)
if ($_SESSION['active'] == $r['text'])
{
//This is setting the background and color of text for the active page
$class = "main_live";
} else {
//This sets all other links to the normal setting
$class = "text_14";
}
//Echo out all the active links
echo "<a href=".$r['link']." class=".$class.">".$r['text']."</a> ";
}
?>
{
//Set class for active link
//(Set this session at the top of each page you want this code included)
if ($_SESSION['active'] == $r['text'])
{
//This is setting the background and color of text for the active page
$class = "main_live";
} else {
//This sets all other links to the normal setting
$class = "text_14";
}
//Echo out all the active links
echo "<a href=".$r['link']." class=".$class.">".$r['text']."</a> ";
}
?>
Full code for main_links.php
<?PHP
//include your config.php
include 'config.php';
//Select the active links from your "main_links" table, then echo them out in order
$links = mysql_query("SELECT * FROM main_links WHERE `active` = 1 ORDER by `order` ASC") or die(mysql_error());
while($r = mysql_fetch_array($links))
{
//Set class for active link
//This is done on at the top of each page you want this code included
if ($_SESSION['active'] == $r['text'])
{
//This is setting the background and color of text for the active page
$class = "main_live";
} else {
//This sets all other links to the normal setting
$class = "link_14";
}
//Echo out all the active links
echo "<a href=".$r['link']." class=".$class.">".$r['text']."</a> ";
}
?>
//include your config.php
include 'config.php';
//Select the active links from your "main_links" table, then echo them out in order
$links = mysql_query("SELECT * FROM main_links WHERE `active` = 1 ORDER by `order` ASC") or die(mysql_error());
while($r = mysql_fetch_array($links))
{
//Set class for active link
//This is done on at the top of each page you want this code included
if ($_SESSION['active'] == $r['text'])
{
//This is setting the background and color of text for the active page
$class = "main_live";
} else {
//This sets all other links to the normal setting
$class = "link_14";
}
//Echo out all the active links
echo "<a href=".$r['link']." class=".$class.">".$r['text']."</a> ";
}
?>
Top of page
style.css
We need to set the styles for active and non-active links. Just add this to your stylesheet.
/* ========== Main links ========== */
.main_live{background-color:#CCC;font-size:14px;color:#000;TEXT-DECORATION:none;}
.main_live:hover{background-color:#999;font-size:14px;color:#000;}
.link_14{font-size:14px;color:#FF6600;TEXT-DECORATION:none;}
.link_14:hover{background-color:#999;font-size:14px;color:#000;}
.main_live{background-color:#CCC;font-size:14px;color:#000;TEXT-DECORATION:none;}
.main_live:hover{background-color:#999;font-size:14px;color:#000;}
.link_14{font-size:14px;color:#FF6600;TEXT-DECORATION:none;}
.link_14:hover{background-color:#999;font-size:14px;color:#000;}