PHP web design tutorials, php active button, css active button, active button with php

This series of the videos explains how to create Photo Gallery using PHP, MySQL, ImageMagic and jQuery. Using PHP you will be able to add, modify and populate data stored on the MySQL Database and display records of all images on the page. ImageMagic will help us to resize and crop images to the relevant dimentions, while jQuery will provide the support in the presentation of the gallery. The last two chapters are dedicated to adding the earlier created gallery to our Content Management System. Over 4 hours of videos!!!

Watch sample video

Go back

PHP tutorials

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.

I hope it's clear enough - any questions - get in touch.

Total tutorials: 0

Subtotal: £0.00

View basket

My Space
Delicous
Stumbleupon
Digg

Contact Web Design Tutorials

Thank you for subscribing to our newsletter.
To complete registration please click on the link in the email which has been sent to you.

Invalid first name
Invalid last name
Invalid email address