active state menubar

so, what's the big secret?

[idiotgirl]

I never paid much attention to all those little tabbed menu bars that show an 'active' or colored tab for the section/page you're currently viewing.

But now I am. Despite all common sense, I think I want one! I think I can do a pretty one that loads fast and would compliment my new site.

But HOW? I don't want to get into a whole bunch of lines of javascript and dhtml this-and-that if I can avoid it. I don't want an applet < big ugly gray from here to there while it loads > and, most of all, I don't want to have to code every stinking page of a big site so the tab on the menu bar for that particular page shows the correct 'active' state.

I need portability, reliability, flexibility, in as few lines of code as possible. Some pages [of this site] are done the old-fashioned way, and others are pulled from a db.

I don't use an app like DreamWeaver or NetObjects or FP or anything that makes the pages and manages my files and then uploads them for me. I don't like being that reliant on it dragging my content around and fighting to get something 'here' when it [html program] wants it 'there'.

My life revolves around HomeSite, Perl, SSI and templates :)

Is there some script or application everyone knows about that I never heard of - or is there just no way to get around doing it the hard way?

Ideas?

[Marshall]

idiotgirl,

If I understand you correctly, you want to show visitors what page they're on. I use CSS. On my navigation links, I merely change the background color. I'll stickmail you a URL you can look at.

[idiotgirl]

Marshall - I stickymail'd you back. Thanks.

But I'm going for a graphic 'tabbed' menu for lack of a better word that uses a highlighted image, like js rollover, when you are in that section of the web site. Other image menu tabs are drab (off), current section is highlighted (on).

I thought of putting all my menu tab images into an array in Perl, doing a foreach, and matching the image names to the current folder name - if matches, image_on is used, else image_off is used... something like that.

But I don't know that I want another Perl function per page, either. Seems like it's overkill. On the other hand, if it works and nothing else does, I may do it.

[sugarkane]

I tend to do this in PHP using variables and the include() function.

Basically, I keep the menu generation code in a seperate file, set a variable on the current page and then call the menu code. The code decides how to output the menu with a simple 'if, else' routine based on the variable you've set.

You can also do something similar in Perl using the 'require' or 'use' commands to access a menu generating module.

[mdharrold]

I have used a combination of perl, SSI, and css for the same effect.
I called the script with SSI between <style> tags.
Assigned class names to each link.
Had script design the classes based on which page was being called.

The nice thing was, when used across an entire site, you only had to update the script if you wanted to change images or elminate the effect all together.

[idiotgirl]

mdharrold - you're so smart ;) I think between you and Marshall and sugarkane this helped me decide which direction to go with this. Thanks.

Now, if I'm following what you did, which might be what I was considering, we have:

<headstuff>
<style>
<!--
[ < SSI CALL HERE > ]
-->
</style>
</head>

And we have ourselves a little perly script that says something like:

if ($pagename eq "blah") {
print \"appropriate style sheet tag including image, bgd, etc.\";
}

etc., etc. And could be refined or made more complicated, which ever.

I think it'll work.

[mdharrold]

Pretty much. I used a table for the navigation and applied the image as the cell background.

#!/usr/local/bin/perl
########Get only the page name requested
@new = split(/\//, $ENV{REQUEST_URI});
########Doesn't work without changing the "." to "_" don't know why
$new[-1] =~ tr/./_/;
########Remove the page extensions may not be needed but makes css look better
@request = split(/_/, $new[-1]);
########List pages in menu area
@pages = ('test1','test2','test3');

$yes = "highlighted.jpg";
$no = "not_highlighted.jpg";

print "Content-type: text/html\n\n";
########Decide which background each link should have
foreach $pages (@pages)
{if ($request[0] eq "$pages")
{$style = ".$pages { background-image: url('$yes'); background-repeat: no-repeat; background-position: center }\n";}
else
{$style = ".$pages { background-image: url('$no'); background-repeat: no-repeat; background-position: center }\n";}
print "$style";
}

exit(0);

That way each time the script was called it assigned the appropriate image to each class.

[idiotgirl]

Pretty cool stuff. And if you defined the current path:

/contact_us/currentpage.html

and matched images (from an array) to pathname using regex:

@images =('contact_us_on.gif', 'contact_us_off.gif', 'products_on.gif', 'products_off.gif') # blah blah

it would print the 'on' image if you were in the contact_us directory, and all other images in the array (image file names conveniently match folder names) would print the off state using a foreach and printing successive <td></td>'s.

That way I can print my whole menubar using SSI w/without style sheets and have the correct image shown as the highlighted image for that folder. It'll work!

Thanks.

Yeah- I found out the whole pathname thing last week when I was stuck and you graciously enlightened me. I was so close, yet so far away. But that was for something else. Turns out it works for this, too. I love it when a plan comes together.