Dynamisches Menü mit sichtbarem selektiertem Submenü (Kein JS, kein CSS, nur HTML) - #118102 (Webframeworks, Sonstige Fragen zur Webprogrammierung mit Perl)

Struppi

2009-01-16 19:09

User since
2006-02-17
628 Artikel
BenutzerIn

Also ich würd' sowas komplett mit CSS lösen und dem aktiven Link eine Klasse zuweisen class="active".

Ein B Tag wird, genau wie der I oder der FONT Tag, heutzutage nicht mehr empfohlen zu benutzen, da die Darstellung der Elemente komplett das CSS übernimmt und die Elemente nur beschreiben benutzt werden, also in dem Fall Strong.

Um das 2. Problem zu lösen kannst du dem parent LI Element die Klasse zuweisen und dann mit CSS alle UL Listen ausblenden bzw. einblenden

Code (perl): (dl )

#!/usr/bin/perl

$| = 1;

use strict;
use warnings;
use HTML::TreeBuilder;
use CGI;

my $url = '/intern/proj'; # URL des ausgewählten Menüeintrags, bzw. geladene Webseite

my $tree = HTML::TreeBuilder->new; # empty tree
$tree->implicit_tags(0);
$tree->store_comments(1);
$tree->parse_file(*DATA);

foreach my $t ($tree->look_down( '_tag' , 'a' )) {
    if ($url eq $t->attr('href')) {
                $t->parent->attr('class', 'active');
        last;
        }
}

my $html = $tree->as_HTML;
$html =~ s/<html>//g;
$html =~ s/<\/html>//g;

print CGI::header();
print CGI::start_html();
print $html;
print CGI::end_html();


$tree->delete;

1;

__DATA__
<style type="text/css">
#menu {}
#menu .active a{
        font-weight:bold;
}
#menu li.active ul{
        display:block;
}

#menu li ul {
        display:none;
}

</style>

<!-- ul ist immer / -->
<ul id="menu">
<li><a href="/">Startseite</a></li>
<li><a href="/intern/proj">Projekte</a>
        <ul>
                <li>Perl</li>
                <li>PHP
                        <ul>
                                <li><a href="/php/templating_all.html">Templating</a></li>
                                <li>Module</li>
                                <li>CGI-Test</li>
                        </ul>
                </li>
                <li>Blog</li>
        </ul>
</li>
<li>Devshed</li>
<li>Kontakt</li>
</ul>