Selectively coloring a menu's item members

[hacker]

I'm trying to color a menu of items on an webpage, based on the item currently selected. I know the item chosen, based on $cgi->param('a'), so that part isn't a problem.

I've abstracted the logic into a small, standalone script that looks like this:

my @menu_options = ('home', 'donate', 'news', 'docs', 'download', 'gal
+lery', 'samples', 'users', 'developers', 'about');

my $items = @menu_options;
my $count = 1;

print qq{
        <div class="sh">
                <span class="doNotDisplay">Navigation:</span>
};

my $style = '';

foreach my $menu_item (@menu_options) {
        $style = qq{style="background-color: #9943ac;"} 
        if ($action eq $menu_item && $action =~ /docs/);

        $style = qq{style="background-color: #d8402b;"} 
        if ($action eq $menu_item && $action =~ /download/);

        $style = qq{style="background-color: #ab0;"} 
        if ($action eq $menu_item && $action =~ /users/);

        $style = qq{style="background-color: #6fab87;"} 
        if ($action eq $menu_item && $action =~ /developers/);

        print qq{\t\t<a href="/$menu_item" $style>$menu_item</a>};
        print " |" if ($count < $items);
        print "\n";
        $count++;
}
print "\t</div>\n";

In my actual code, I have a dispatch table that looks like this:

my %dispatch = (
        (map { $_ => \&default } qw(
           home donate news docs download gallery
           docs users developers about
         )),
        samples => sub { \&samples($dbh) },
);

I'm trying to selectively color the background of the item selected. What am I missing in my sample code above?

I'm only trying to colorize 4 of the 10 menu options, and only one should be colorized at a time. They're in my dispatch table in the production code (not an array like the sample test above; I created that to try to isolate the problem).

Is there a better way to do this?

[GrandFather]

General rule: declare variables in the smallest scope possible. In this case:

#my $style = ''; # Removed global

foreach my $menu_item (@menu_options) {
        my $style = '';

avoids your problem which is due to using a global (to the loop) variable instead of a temporary variable.

[beretboy]

Please, please, please use HTML::Template. It will make CGI programming orders of magnitude easier. I second everything said above about using css identifiers.

[snopal]

A link is not an area. It does not have a background-color component. You need to use some form of bordering, perhaps with DIV tags.

[Joost]

Links, like every HTML element I can think of* DO have a background-color style which can be set via a style attribute or a stylesheet.

*update: except perhaps, the "invisible" ones, like <br> or <style

[snopal]

To get the behavior expressed in the parent, I've always found it necessary to declare some container object to express an area of color background.

That does not mean that I wouldn't entertain an example from you or another contributor that satisfies the parent's design strictly by controlling the background color style property.

Essentially, one can do almost anything with any tag by redefining its style properties, but then it becomes possible the element ceases to be understandable HTML.

[hacker]

The code works so far, but I've discovered a problem..

If you select docs on the test website, you'll see that the menu properly tabs itself and colorizes itself based on the item you select.

The other 3 tabs that colorize this way are 'download', 'users' and 'developers'. Those work as well.

The problem I've noticed, happens when you select a second-level citizen from the secondary menu. For example, if you click on docs and then click on faq from there, the relationship to 'docs' is no longer maintained, and you lose the purple "tab" that goes to 'docs'.

The first-level menu is generated dynamically, using an array and checking $action (coming out of my dispatch table) against the items in that array, and applying the appropriate css style inline for that element only.

This is how the first-level citizens works right now, and you can see that it does indeed work.

What I'm trying to figure out, is how to create/maintain a relationship between the second-level citizens and their parent dispatch actions.

This means the child=>parent relationship looks like this:

   home:
   donate:
   news:
   docs......: [faq] [lists] [tour] [documentation]
   download..: [windows] [macosx] [linux] [source]
   bugs:
   gallery:
   samples:
   users.....: [irc] [links]
   developers: [snapshots] [source] [tools] 
   about:

What is the easiest/most flexible way of creating these menus in a way that maintains these relationships and allows me to keep the parent menu's tab colored, when I'm selecting children items of that parent?