Schrift
Start · Board · Webprogrammierung mit Perl · Webframeworks, Sonstige Fragen zur Webprogrammierung mit Perl
[thread]13011[/thread]

Dynamisches Menü mit sichtbarem selektiertem Submenü (Kein JS, kein CSS, nur HTML)

Leser: 3


<< |< 1 2 >| >> 13 Einträge, 2 Seiten
GwenDragon
 2009-01-16 17:18
#118094 #118094
User since
2005-01-17
14748 Artikel
Admin1
[Homepage]
user image
Wie würdet ihr ein Menü mit Perl kreieren, das selektiert nur ein Submenü anzeigt?

Das Menü selbst kann ja aus einer verschachtelten HTML-Liste erzeugt werden
Ich habe mir gedacht, das Ganze mit CPAN:HTML::Treebuilder und CPAN:HTML::Element zu parsen und dann bei einer aktuellen Seite den Link rauszunehmen und nur den Inhalt des Links in bold stehen zu lassen.

Testskript:
Code (perl): (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

#!/usr/bin/perl

$| = 1;

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

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')) {
      my $s = HTML::Element->new('b', 'class' => 'selected');
      $s->push_content($t->content_list);
      $t->replace_with( $s );
      last;
   }
}

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

print $html;

$tree->delete;

1;

__DATA__

<!-- ul ist immer / -->
<ul>
<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>


Dann könnte diese Liste auf der eigentlichen Seite per Templatesystem wie CPAN:HTML::Template::Compiled eingebunden werden.

folgendes Menü als Beispiel:
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Home
Projekte
   Perl
      CGI
      Module
   Javascript       
      Übersicht
      Dynamische Menüs
Entwickeln
   Theorie
   Tools
      Verwaltung
      Testing
      Codegenerierung
Kontakt
Impressum


Nur wie traversiere ich den Baum des Menüs und lösche alle unnötigen Submenüs raus?

Beispiel als gewählter Menüpunkt

Also dass es nur so aussieht (Groß bei selektiertem Menüpunkt):
Code: (dl )
1
2
3
4
5
6
7
8
9
Home
Projekte
   Perl
      CGI
      MODULE
   Javascript
Entwickeln
Kontakt
Impressum
die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
GwenDragon
 2009-01-16 18:53
#118095 #118095
User since
2005-01-17
14748 Artikel
Admin1
[Homepage]
user image
Nein, auch nicht mit CSS. Ich will auch keine Frames verwenden.
die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
LanX-
 2009-01-16 18:07
#118098 #118098
User since
2008-07-15
1000 Artikel
BenutzerIn

user image
Wenn du sagst ohne JS dann bedeutet "selektieren" bei dir "klicken" und nicht "MouseOver", korrekt?

Ich hab mal sowas mit Frames realisiert, heutzutage würd man Iframes nehmen ... jede menusicht hatte eine eigene Seite die per klick geladen wurde.

Du könntest auch iframes schachteln, weiß aber nicht inwieweit da dynamisch gesizet wird. (leeres Iframe soll verschwinden)

IDEE: Klassisch würde man ausblenden über CSS "visibility" lösen, wenn du es also hinbekämst das auf Klick eine neue CSS Datei eingebunden wird könntest du das auch ohne JS lösen...

konkret: das komplette ausgeklappte menu ist eine HTML seite die abhängig vom query eine andere CSS einlädt die Teile des Baums ausblendet.

... ich habe gerade den verdacht an deinen Bedürfnissen vorbeizuquatschen, du willst kein DHTML ohne JS sondern wissen wie man das serverseitig löst?

Naja ich schicke den Post trotzdem ab, du kannst ja die letzte Idee mit variierenden CSS serverseitig umsetzen...
me and my writeups
Struppi
 2009-01-16 19:09
#118102 #118102
User since
2006-02-17
628 Artikel
BenutzerIn
[Homepage]
user image
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 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

#!/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>
scriptor
 2009-01-16 19:09
#118103 #118103
User since
2008-05-07
69 Artikel
BenutzerIn
[Homepage] [default_avatar]
GwenDragon+2009-01-16 17:53:49--
Nein, auch nicht mit CSS. Ich will auch keine Frames verwenden.


Vielleicht verstehe ich die Fragestellung nicht ganz? Aber wird der Baum nicht bei jedem Request neu berechnet?

Ich hab die Seiten z. B. innerhalb eines nested set in mysql und lese entsprechend aus und erzeuge UL-Listen. Hierarchieebenen, aktive Seite und Seiten auf gleicher Ebene sind mit CSS-Klassen markiert.
GwenDragon
 2009-01-16 19:27
#118104 #118104
User since
2005-01-17
14748 Artikel
Admin1
[Homepage]
user image
Doch der Baum wird neu berechtnet, da es sich jedesmal um eine andere Seite haldelt, in die eingebunden wird.

Die URL steht ja in REQUEST_URI;

Mein Problem ist, dass die nicht selektierten Untermenüs gelöscht werden sollen, damit sie nicht angezeigt werden.

Das heißt, alle Untermenüs der parents, die nicht dfirekt zum selektierten Menüpunkt gehören sollen gelöscht werden.

Das Menü ausgeklappt sieht so skizziert aus:
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Home
Projekte
  Perl
      CGI
      Module
  Javascript       
      Übersicht
      Dynamische Menüs
Entwickeln
   Theorie
      Tools
      Verwaltung
      Testing
      Codegenerierung
Kontakt
Impressum


Wenn ich Module anwähle sollten folgende mit # gekennzeichnete gelöscht werden.
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Home
Projekte
  Perl
      CGI
      Module
  Javascript       
      #Übersicht
      #Dynamische Menüs
Entwickeln
   #Theorie
      #Tools
      #Verwaltung
      #Testing
      #Codegenerierung
Kontakt
Impressum


Jetzt verständlich?

scriptor+2009-01-16 18:09:13--
Ich hab die Seiten z. B. innerhalb eines nested set in mysql und lese entsprechend aus und erzeuge UL-Listen. Hierarchieebenen, aktive Seite und Seiten auf gleicher Ebene sind mit CSS-Klassen markiert.

Auch ohne Datenbak soll es laufen.
Denn die Menüs sollen einfach als HTML-Listen pflegbar sein.

Ich komme aus irgendeinem Grund nicht an die Parents heran.

Muss mal morgen nochmals im Quellcode der Module bei CPAN nachsehen.
die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
scriptor
 2009-01-17 02:16
#118112 #118112
User since
2008-05-07
69 Artikel
BenutzerIn
[Homepage] [default_avatar]
GwenDragon+2009-01-16 18:27:38--
Auch ohne Datenbank soll es laufen.
Denn die Menüs sollen einfach als HTML-Listen pflegbar sein.


Wenn das Menue statisch ist, könnte es doch auch als CSV oder XML gespeichert werden. Wenn Du ihm dann noch ein paar Metadaten mitgibst, sollte ein Ausfiltern der nicht benötigten Menuepunkte kein Problem sein! :-)

Code: (dl )
1
2
3
4
5
6
7
8
	
  `id` Page-ID,
  `nick` Name,
  `l` links,
  `r` rechts,
  `num` laufende Nummer,w
  `level` Hierarchieebene,
  `groupid` Parent-ID,
GwenDragon
 2009-01-17 18:30
#118127 #118127
User since
2005-01-17
14748 Artikel
Admin1
[Homepage]
user image
Ich werde das ganze jetz mit einem eigenen Modul ausprobieren, das auf CPAN:Tree::Simple aufbaut.
die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
kristian
 2009-01-18 01:57
#118133 #118133
User since
2005-04-14
684 Artikel
BenutzerIn
[Homepage] [default_avatar]
Hallo

Knack das Problem, es ist IMHO wirklich nicht ganz leicht.
Aber es macht keinen Sinn.
Wenn ich im Menue etwas auswähle und die Seite neu geladen wird, dann ist es nicht für User gemacht. Usability schimpft sich das. Wieviele KBytes muss ich laden um weiter zu kommen? Wie lange dauert das? Wann habe ich keine Lust mehr?
Sorry, ich will dir nicht den Spaß an der Idee nehmen aber es gibt auch Leute die nur ganz dünne und sehr lange Leitungen haben. (siehst du ja an mir)
Gruß
Kristian
Struppi
 2009-01-18 12:19
#118135 #118135
User since
2006-02-17
628 Artikel
BenutzerIn
[Homepage]
user image
Deshalb sind Lösungen mit CSS ganz sinnvoll, da diese keine Einschränkungen haben. Aber wir kennen ja nicht die Gründe für dieses vorgehen (ich hab das mit dem Ausschluss von CSS auch erst später gelesen, da dies nur im Threadtitel vorkam).

Was mich aber trotzdem wundert, dass parent nicht funktioniert, mein Beispiel (mit CSS, ich weiß) funktioniert.
<< |< 1 2 >| >> 13 Einträge, 2 Seiten



View all threads created 2009-01-16 17:18.