Amazon.com style tabs - bonnieritt.com

January 6th, 2009 Amazon.com style tabs

I'm working on a new site, and I am finally breaking down and using the "folder tab" style of menu. I want to include this menu using include(), but as it sits it only displays the original menu. Is there any way that PHP can determine what the current URL is, thus changing the color of the appropriate tab to "active", as well as the table underneath?

The page I'm working on right now is located at:

http://www.advancedhorizons.com/Spectraserv/index.php - right now the menu is static, but you will be able to see what I want to do.

Is this possible with PHP?

-jim

Sure JimF. Throw

phpinfo();

In a php file and run it. You will see all the variables you have access to and PHP_SELF will be the current URL.

This is definitely possible, but looks like it would be a real pain...

I'm still trying to understand the template system, but as far as I can tell, you can have no logic in the template whatsoever. Only a variable which gets passed to it...

To do this sounds like a pain in the a.. but doable...just create a different template for each tab...and then in each program that gets called, put the logic to call the right template....

Even if you wrote this out as a hack I would never install it though even though the idea is good...every new hack would require too much work in calling the right template and in general I would find this hard to be extendable unless the vB creators changed the way they do things....

imo.

oops, dummy me. Got what you're doing now....

Funny, it's a different experience when you read messages from the "View New Threads" link or going into categories...I didn't even realize I was in the php coding section when I replied...

good luck w/ the new site.

Get rid of the button curves, that isn't neccessary if you make the part of the button that isn't white transparent.

Krucifyx,

Many thanks! Every now and then I have to remind myself of the KISS rule: Keep It Simple, Stupid! I was trying things way more complicated and involved than that, and your solution is the easiest, most basic way to do this. I was here at the office until close to 10:00 last night trying to get it to work, and reading all my php books and all the online documentation. I didn't even think of doing something so easy as this - but it makes perfect sense! Thanks!

This is what I have at the top of my header.php file:

// BUTTON BACKGROUNDS
if (empty($bg_home)) {$bg_home = "#031883";}
if (empty($bg_services)) {$bg_services = "#031883";}
if (empty($bg_news)) {$bg_news = "#031883";}
if (empty($bg_corp)) {$bg_corp = "#031883";}

// BUTTON FONT COLOR
if (empty($font_home)) {$font_home = "#ffffff";}
if (empty($font_services)) {$font_services = "#ffffff";}
if (empty($font_news)) {$font_news = "#ffffff";}
if (empty($font_corp)) {$font_corp = "#ffffff";}

// BUTTON TEXT
if (empty($text_home)) {$text_home = "Home";}
if (empty($text_services)) {$text_services = "Services";}
if (empty($text_news)) {$text_news = "Newsletters";}
if (empty($text_corp)) {$text_corp = "Corporate";}

// BUTTON CURVES
if (empty($left_home)) {$left_home = "../img/leftcurve.gif";}
if (empty($right_home)) {$right_home = "../img/rightcurve.gif";}
if (empty($left_services)) {$left_services = "../img/leftcurve.gif";}
if (empty($right_services)) {$right_services = "../img/rightcurve.gif";}
if (empty($left_news)) {$left_news = "../img/leftcurve.gif";}
if (empty($right_news)) {$right_news = "../img/rightcurve.gif";}
if (empty($left_corp)) {$left_corp = "../img/leftcurve.gif";}
if (empty($right_corp)) {$right_corp = "../img/rightcurve.gif";}

And then in each file, I have:

$bg_home = "#E0DBA6";
$font_home = "#000066";
$text_home = "Home";
$left_home = "../img/leftcurve_on.gif";
$right_home = "../img/rightcurve_on.gif";
include("header.php");

But I change the variables depending on the page it's in.

I feel so ridiculous right now - doing something like this never occured to me.

Thanks!

-jim

Well first off, your curves. Since they are not anti-aliased you should only have one set. For the part that is NOT white, make it transparent, this will make everything easier and it's one less thing to worry about.

Now for the header:

First, we start by declaring the default background colors:

if (empty($bg_home)) {$bg_home = "#031883";}
if (empty($bg_services)) {$bg_services = "#031883";}
if (empty($bg_ nletter)) {$bg_ nletter = "#031883";}
if (empty($bg_corporate)) {$bg_corporate = "#031883";}

Now when you call the header, just above it supply a different background color for the tab you want active:

$bg_services = "#E0DBA6";
include("header.php");

That should do it.

Originally posted by Krucifyx
Get rid of the button curves, that isn't neccessary if you make the part of the button that isn't white transparent.

I knew how to do that in PhotoShop 5.5, but they changed it for PhotoShop 6.0. I tried it, but couldn't get it to work. I figured I'd be able to type the code faster than I could try to re-learn PhotoShop ;).

-jim

This isn't for vBulletin, it's for another site I'm designing. Making separate files would defeat the purpose of using include() to include the file.

-jim

Hey JimF

How do you use the include() in the header & footer?

I've been trying for a couple hours already..

I've turned on php parsing in header & footer

added in: include("header.php"); & footer.php respectively.. & I get a parse error in global.php

Help me please? :(

Thanks.

#If you have any other info about this subject , Please add it free.#

Posted in bonnieritt.com | edit

Search

Archives

January 6th, 2009 Amazon.com style tabs