Advertisement
Highlight Current Active Navigation Link - Step 1 - Xhtml and Css
Highlight Current Active Navigation Menu Link using PHP Xhtml and CSS
Today I am going to teach you how to make Dynamic Navigation bar or Highlight the Currently Active Link in your Navigation menu or anywhere in your page, like the ones being used on our site.
This can easily be done using PHP, CSS and HTML / XHTML.
Step 1 : XHTML and CSS
First of all, we need to create a Page using in which we will use our PHP Code to Highlight Links.
Open any text editor, notepad, wordpad, dreamweaver or anything and Copy and Paste this code:
XHTML Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Highlight Current Active Navigation Link - Pegor.com</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!–content–>
</body>
</html>
Save it as home.php
Now we will create a navigation bar using XHTML.
Create a new document, and write this code in it:
XHTML Code :
<div id="menu">
<ul>
<li class="home"><a href="home.php">Home</a></li>
<li class="portfolio"><a href="portfolio.php">Portfolio</a></li>
<li class="contests"><a href="contests.php">Contests</a></li>
<li class="about"><a href="about.php">About</a></li>
<li class="contact"><a href="contact.php">Contact</a></li>
</ul>
</div>
Save it as menu.php
Now that our Page and navigation bar is ready, we need to do some Styling to this menu bar, for that, we will use CSS.
Create a new document, and Copy and Paste this code in it:
CSS Code :
* {
font-family: Tahoma;
font-size: 12px;
}
#menu {
clear: both;
height: 33px;
margin-left: 18px;
width: 964px;
}
#menu ul {
float: left;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
padding-top: 3px;
padding-right: 1px;
padding-bottom: 3px;
padding-left: 1px;
margin-top: 5px;
margin-left: 18px;
}
#menu ul li {
color: #ffffff;
display: inline;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #1b70b0;
border: 1px solid #0096ff;
}
#menu ul li:hover {
background-color: #217fbd;
}
#menu ul li.current {
font-weight: bold;
border: 1px solid #a4bf37;
background-color: #86bf0e;
}
#menu ul li a
{
color: #ffffff;
text-decoration: none;
}
Now we need to Use PHP Code to integrate our menu into our pages and make the links of navigation bar highlight according to our page.
To do this, Proceed to next step :
Highlight Current Active Navigation Link - Step 2 - PHP
Posted on Sep 20, 2008 at 10:04:59
I find it very interesting and easy to understand the codes. I am not a critic but I would like to suggest that the codes are to be written in ‘STRICT’conformance and LINKED Stylesheet so as to emable us to easily adapt to the new environment.
The present tutorial is no doubt extremely good and useful for new comers to CSS especially so in CSS-P.
I thank you for your guidance and i fully appreciated it.
exe2bin_2000@yahoo.com
richard sataiyah