Page 1 of 1

Dropdown Menu ab Level 2

Posted: Fri Jan 27, 2017 6:55 am
by josde
Hallo zusammen,

ich habe ein Dropdown Menu über <?php echo li($hc,1)?> erstellt. Nach dem Tutorial von svasti [http://svasti.de/en/?Tutorials/Horizont ... -down-menu] gibt der zweite Parameter das Startlevel an. Ab dem ersten Level funktioniert das auch.

Auf einer Unterseite (<h2>) möchte ich, dass das Dropdown Menu erst beim Menulevel 2 beginnt. Die Eingabe <?php echo li($hc,2)?> zeigt bei mir aber immer noch die komplette Navigation ab Level 1 an.

Bei der Ausgabe eines vertikalen Menus über <?php echo toc(2,3);?> klappt alles wie gewünscht.

Kann mit jemand einen Tipp geben, wie ich die Ausgabe des Dropdown Menus ab Level 2 realisieren kann?

Vielen Dank
Josef

Re: Dropdown Menu ab Level 2

Posted: Fri Jan 27, 2017 9:17 am
by cmb
josde wrote:Nach dem Tutorial von svasti [http://svasti.de/en/?Tutorials/Horizont ... -down-menu] gibt der zweite Parameter das Startlevel an.
Das ist so nicht wirklich richtig. Relevant ist vor allem, dass im ersten Parameter die richtigen Seiten übergeben werden. Der zweite Parameter sorgt nur für die gewünschte Verschachtelungstiefe (siehe auch weiter unten).
josde wrote:Auf einer Unterseite (<h2>) möchte ich, dass das Dropdown Menu erst beim Menulevel 2 beginnt.

Wenn Du dort alle <h2> mit Unterseiten auflisten willst, kannst Du Dir ein eigenes $hc2 im Template wie folgt erzeugen:

Code: Select all

$hc2 = array_values(array_filter($hc, function($i) {
    global $l;
    
    return $l[$i] >= 2; // 2 für h2, 3 für h3 etc.
})); 
Und dieses dann eben per `li($hc2, 2)` anzeigen lassen. Wenn Du statt dessen `li($hc, 1)` aufrufen würdest, dann würden alle Menüpunkte eine Ebene tiefer verschachtelt dargestellt.

Re: Dropdown Menu ab Level 2

Posted: Sun Jan 29, 2017 10:51 am
by josde
Hallo Christoph,

danke für deinen Code, der so auch funktioniert. Leider ist das nicht die Lösung für mein Problem. Vielleicht war meine Darstellung nicht eindeutig genug. Daher versuch ich es noch mal:

Ich habe folgende Seitenstruktur:

Code: Select all

Seite1
Seite2
Seite3
 |__ Seite31
 |__ Seite32
      |__ Seite321
      |__ Seite322
Seite4
Über <?php echo li($hc,'menulevel')?> wird folgendes Dropdown Menu erstellt:

Code: Select all

Seite1  Seite2  Seite3  Seite4
                  Seite31
                  Seite32
                    Seite321
                    Seite322
Wenn ich jetzt die Seite3 anklicke, soll das Dropdown Menu erst hier beginnen und dann so aussehen:

Code: Select all

Seite31  Seite32
          Seite321
          Seite322
Die oberste Ebene soll also entfallen. Mit <?php echo toc(2,3);?> ist das einfach zu realisieren aber leider erzeugt das kein Dropdown Menu und die zweite Ebene (Seite321) wird erst beim Anklicken von Seite32 sichtbar.

Gibt es eine Möglichkeit, die li() Funktion so zu ändern, dass mein Vorhaben möglich ist oder evtl. einen ganz anderen Lösungsansatz?

Danke
Josef

Re: Dropdown Menu ab Level 2

Posted: Sun Jan 29, 2017 12:50 pm
by cmb
josde wrote:Die oberste Ebene soll also entfallen. Mit <?php echo toc(2,3);?> ist das einfach zu realisieren aber leider erzeugt das kein Dropdown Menu und die zweite Ebene (Seite321) wird erst beim Anklicken von Seite32 sichtbar.
Kurz allgemein zu toc() und li(): toc() sammelt die gewünschten Seiten, und ruft li() dann mit diesen auf. Dabei ist toc() nur für "normale" Menüs ausgelegt, eben nicht für Drop-Downs. Daher müsstest Du die gewünschten Seiten selbst sammeln, was für diesen Anwendungsfall aber komplexer ist, als mein Script weiter oben. Man könnte nun toc() anpassen, aber das ist mir grundsätzlich zu kompliziert, und daher bevorzuge ich die Verwendung von XH_Pages (auch wenn das etwas langsamer ist). Das könnte dann wie folgt aussehen:

Code: Select all

<?php

class Josde_Toc
{
    private $pages;

    public function __construct()
    {
        $this->pages = new XH_Pages();
    }

    public function render()
    {
        global $s, $l, $_XH_firstPublishedPage;

        if ($s <= $_XH_firstPublishedPage) {
            $parent = null;
            $level = 1;
        } else {
            $parent = $s;
            $level = $l[$s] + 1;
        }
        $indexes = $this->gatherIndexes($parent);
        sort($indexes);
        return li($indexes, $level);
    }

    private function gatherIndexes($parent)
    {
        if (!isset($parent)) {
            $indexes = $this->pages->toplevels();
        } else {
            $indexes = $this->pages->children($parent);
        }
        foreach ($indexes as $index) {
            $indexes = array_merge($indexes, $this->gatherIndexes($index));
        }
        return $indexes;
    }
}

function josde_toc()
{
    $toc = new Josde_Toc();
    return $toc->render();
}

?>
Diesen Code kopierst Du entweder in cmsimple/userfuncs.php oder in template.htm. In template.htm rufst Du dann an der gewünschten Stelle folgendes auf:

Code: Select all

<?php echo josde_toc()?>
Das sollte die von Dir gewünschte Menüstruktur erzeugen.

Re: Dropdown Menu ab Level 2

Posted: Sun Jan 29, 2017 2:36 pm
by Tata
Hallo, Josde, meinst Du nicht etwas, wie das hier?
http://cmsimple_xh_plugins.cmsimple.sk/

Re: Dropdown Menu ab Level 2

Posted: Sun Jan 29, 2017 5:16 pm
by josde
Danke Christoph für Deine Mühen. So funktionierts bei mir.

Re: Dropdown Menu ab Level 2

Posted: Tue Oct 03, 2017 2:13 pm
by mhz
Hallo zusammen,
ich habe mit einem eigenen Template nun doch mal grundlegend angefangen und kam bisher recht gut weiter xh.michael-zajusch.de.
Ich habe bisher das schon gelöst: Verschiedene Aufzählungspunkte vor h1, h2, h3. Das Navigationsmenü soll so wie es jetzt aussieht, bestehen bleiben.
Jetzt stellen sich jedoch einige Fragen. Wie bekomme ich es hin, dass alle Menüpunkte in der Navigation eingeklappt sind und nur die <h1> sichtbar sind. Klicke ich auf einen dieser und es verbergen sich dahinter noch andere <h2>, so soll nach einem Klick auf <h1> der Muenüpunkt <h2> sichtbar werden, aber um einen (ca. 5px) Versatz nach rechts (so ähnlich wie hängender Einzug bei Word). Dadurch soll der Besucher merken, dass diese (Unter-)Punkte zusammengehören. Erst wenn <h2> angeklickt wird, soll sich, sofern vorhanden, <h3> (usw. bis <h9> [bei XH 1.70]) öffnen.
Befindet sich der User in einem Menüfeld, sollen alle anderen wieder bis auf die <h1>-Ebene geschlossen sein.

Was ich bisher ausprobiert habe:
1. die oben angegebene Lösung mit Userfuncs und <?php echo josde_toc;?>
2. die Lösung mit <?php echo li($hc,1);?> <--- das ist z.Zt. alleinig aktiviert!
3. die Lösung mit <?php echo toc(2,3);?>

Ich weiß jedoch nicht, ob oder wann ich <?php echo toc();?> auch eingefügt lassen soll, denn es ergeben sich unterschiedliche Szenarien beim Aufruf.

Ich bitte um Vorschläge, wie ich das Problem lösen kann.
Danke im Voraus!
Michael

Re: Dropdown Menu ab Level 2

Posted: Tue Oct 03, 2017 3:59 pm
by cmb
Aus dem Kopf heraus:

Code: Select all

<?php toc(1,1)?>
<?php toc(2,2)?>
<?php toc(3,3)?>
erzeugt drei einfache (also nicht verschachtelte) Listen für die jeweiligen Menüebenen, die nur diejenigen Seiten enthalten, die auch bei toc() (ohne Parameter) angezeigt würden. Den Rest kann man wohl per CSS erledigen; evtl. ist der :empty Pseudo-Selektor dabei hilfreich.

Re: Dropdown Menu ab Level 2

Posted: Tue Oct 03, 2017 5:25 pm
by Hartmut
Hallo,

für die Einrückung der H2/H3-Seiten würde sich im Menü beispielsweise "margin-left" anbieten.
Hier ist eine kurze Anregung aus einem "mini1"-Template, das ich damals für meinen Belange modifiziert hatte, aber für deine Vorstellungen vermutl. noch etwas angepasst werden müsste:

Template (nav2 = vertikales Menü):

Code: Select all

    <div class="nav2">
        <?php echo toc(1,4);?>
...
    </div>
CSS:

Code: Select all

.nav2 {
    float:left;
    width: 20%;
    clear:left;
	}
.nav2 ul {
    list-style-type: none;
    padding:.2em 0 .01em 0;
    margin:0.5em 0 0.5em 0;
    background:#eaeaea;
    border-radius: .5em;
    border:1px #0080c0 solid;
}
.nav2 ul li {
    margin: 0 .1em .6em .1em ;
    border-radius:.5em;
    padding: 0 .5em 0 .5em;
    background:#9FC4F5; /* Ke: farbl. hervorhebung des aktiven H2 - H3 Verzeichnisses */
}
.nav2 ul li a {
    color: black;
    text-decoration:none;
    margin: 0 -.6em 0 -.6em;
    padding: 0 .6em 0 .6em;
    background:#eaeaea; 
    display:block;
    border-radius: 0.5em;
}
.nav2 ul li a:hover {
    color:#0a0;
    background:white;
}
.nav2 ul li ul  {
    margin:0 -1em 0 0.5em;
    padding: .5em 0 0 0;
    border-radius: .5em;
    border:1px #0080c0 solid;
}
.nav2 ul li ul li {
    padding-left: 1em;
    margin-left:0;
}
.nav2 ul li ul li a {
    margin-left:-1em;
    padding-left: 0.3em;
}
Viele Grüße
Hartmut