Docstoc

active css

Document Sample
active css Powered By Docstoc
					      Active button with PHP and CSS
      Active button with PHP and CSS

This tutorial will explain you how to make your button (link) in the navigation active
when you are on a specific page. Example can be seeing here.

Let's begin with the layout. Create five pages:

      index.php
      about_us.php
      services.php
      testimonials.php
      contact_us.php

Copy and paste the following structure in all of them - I'm just creating navigation for our
pages because that's the only thing which we will need here:

<div id="nav">
<ul id="mainnav">
<li><a href="index.php" title="Welcome page">Welcome</a></li>
<li><a href="about_us.php" title="About us page">About us</a></li>
<li><a href="services.php" title="Services page">Services</a></li>
<li><a href="testimonials.php" title="Testimonials page">Testimonials</a></li>
<li><a href="contact_us.php" title="Contact us page">Contact us</a></li>
</ul>
</div>

Now let's attach the stylesheet:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
margin: 0px;
padding:20px 0px;
text-align: center;
}
#nav {
padding: 0px;
width: 515px;
margin:0px auto;
}
#mainnav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#mainnav li {
padding: 0px;
float: left;
margin:0px 3px 0px 0px;
}
#mainnav li a:link, #mainnav li a:visited, #mainnav li a:active {
color: #333;
text-decoration: none;
margin: 0px;
display: block;
float: left;
border-bottom:solid 5px #dadada;
padding: 0px;
width: 100px;
height: 20px;
text-align: center;
}
#mainnav li a:hover {
text-decoration: none;
border-bottom:solid 5px #333;
}
#mainnav li a.active:link, #mainnav li a.active:visited, #mainnav li a.active:active,
#mainnav li a.active:hover {
text-decoration: none;
border-bottom:solid 5px #990000;
}

Stylesheet simply formats our navigation giving it the bottom border of 5px.
Also on hover the border changes colour and when the button (link) is active we are
applying a class="active".

Prietty straight forward.
Now at the top of each page, before any html or DOCTYPE definitions type the
following:

<?php $page = basename($_SERVER['SCRIPT_NAME']); ?>

This piece of php code will retrieve the name of the currently viewed page (i.e.
index.php) and assing it to the $page variable.

In the navigation, after title in the index.php link add the following:

<?php if ($page == 'index.php') { ?>class="active"<?php } ?>
Do the same for each link in the navigation replacing the 'index.php' with the name of
the page it links to. Your code should now look like this:

<div id="nav">
<ul id="mainnav">
<li><a href="index.php" title="Welcome page" <?php if ($page == 'index.php') {
?>class="active"<?php } ?>>Welcome</a></li>
<li><a href="about_us.php" title="About us page" <?php if ($page == 'about_us.php') {
?>class="active"<?php } ?>>About us</a></li>
<li><a href="services.php" title="Services page" <?php if ($page == 'services.php') {
?>class="active"<?php } ?>>Services</a></li>
<li><a href="testimonials.php" title="Testimonials page" <?php if ($page ==
'testimonials.php') { ?>class="active"<?php } ?>>Testimonials</a></li>
<li><a href="contact_us.php" title="Contact us page" <?php if ($page ==
'contact_us.php') { ?>class="active"<?php } ?>>Contact us</a></li>
</ul>
</div>

What this code does is it checks if variable $page is the same as the name of the link and
if so it applyes class="active" to it what changes the look of the link indicating that it's
the one related to the currently viewed page.

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:12
posted:11/16/2010
language:English
pages:3