[gelöst] Frage zu Pagebutton und Untermenü (Circlemenu)

[namor]

Hallo zusammen,

ich versuche mich an einer Möglichkeit bei dem Pagebuttonmenü (aus @setstates Eval Beispiel Menü links) irgendwie Unterseiten mit einzubauen.
Entweder über ein Circlemenu um einzelne Seiten je Zimmer darzustellen.
Oder wen möglich in der Unterseite "Zimmer" ein zusätzliches Auswahlmenü für die einzelnen Zimmer (deren Seiten)zu bauen.

Habe mich schon an beidem versucht, das Circlemenu wird zwar angezeigt aber beim anklicken der Unterpunkte wechselt nix auf die Unterseite der einzelnen Zimmer

Spekulativ habe ich vermutet das mein Pagebuttenmenü die Unterseite ja nicht kennt wie hier https://forum.fhem.de/index.php/topic,56529.msg481128.html#msg481128 erwähnt.
Jegliche Versuche )try & Error) haben nix gebracht.

Hat mir da jemand einen Tip

[Gollum2]

Meinst du sowas?

Code Auswählen Erweitern


<div data-type="circlemenu" class="cell">
      <ul class="">
            <li><div data-type="push" data-icon="fa-wrench"></div></li>
              <li><div data-type="pagetab" data-url="#" data-icon="fa-home" class="cell"></div></li>
              <li><div data-type="pagetab" data-url="eg.html"  data-icon="oa-control_building_modern_s_okg_eg" class="cell"></div></li>
              <lli><div data-type="pagetab" data-url="og.html"  data-icon="oa-control_building_modern_s_okg_og" class="cell"></div></li>
              <li><div data-type="pagetab" data-url="dg.html"  data-icon="oa-control_building_modern_s_okg_dg" class="cell"></div></li>
              <li><div data-type="pagetab" data-url="ab.html"  data-icon="oa-control_building_outside" class="cell"></div></li>
     <li><div data-type="pagetab" data-url="info.html"  data-icon="fa-info" class="cell"></div></li>
    </ul>
</div>
<div data-type="label" class="narrow darker">Men&uuml;</div>


[Gollum2]

Oder soll aus dem ersten menu noch ein weiters aufpoppen?

Also Klick auf Menü...dann kommt OG , UG usw...dann klick auf OG und dann z.b. Schafzimmer, Bad....

[namor]

Hallo Gollum2

die zweite Variante ist mein Ziel.
Danke für den Schubs, bin nun ein Stück weiter.
Buttons funktionieren nun.

Problem ist nun noch der Platz, wenn das Menü im Kreis auf macht, verschwindet der 4te Button (es sind 4 Stockwerke, UG,EG,OG,DG)links aus dem Bildschirm.

Bin weiter am versuchen.

Danke

[namor]

Geschafft!

Hier meine Lösung:

Wer das Pagebutton -Menü aus @setstates Eval Beispiel Menü- links verwendet, kann einen Circlemenue, welches auf weitere Seiten verlinkt folgendermaßen aufbauen.

1. Die weiteren Seiten benötigen die selbe Deklaration des "content" wie die anderen (direkten Pagebutton-Seiten im Menü) auch.
2. Nun das Circlemenu einbauen.

Die Reihenfolge und die Icons muss ich noch anpassen...

Code Auswählen Erweitern

<div data-type="circlemenu" data-border="round"
          data-item-width="1" data-item-height="1"
          data-circle-radius="60"
          data-direction="vertical"
          class="circlemenu top-space right-space-3x ">
        <ul class="menu">
   
            <li><div data-type="push" data-off-background-color="transparent" data-off-color="#56728f" data-on-background-color="transparent" data-on-color="#cceeff" data-icon="fa-sign-in"></div></li>
             
               <li><div data-type="pagebutton" data-url="#content_zimmer_ug.html" data-load="#content9"   data-off-background-color="transparent" data-off-color="#56728f" data-on-background-color="#56728f" data-on-color="#cceeff" data-active-pattern=".*#content_zimmer_ug.html" data-icon="oa-control_building_kg"  class="cell"></div></li>
             <li><div data-type="pagebutton" data-url="#content_zimmer_og.html" data-load="#content10"  data-off-background-color="transparent" data-off-color="#56728f" data-on-background-color="#56728f" data-on-color="#cceeff" data-active-pattern=".*#content_zimmer_og.html"  data-icon="oa-control_building_modern_s_okg_eg"  class="cell"></div></li>
               <li><div data-type="pagebutton" data-url="#content_zimmer_eg.html" data-load="#content11"  data-off-background-color="transparent" data-off-color="#56728f" data-on-background-color="#56728f" data-on-color="#cceeff" data-active-pattern=".*#content_zimmer_eg.html"  data-icon="oa-control_building_modern_s_okg_eg"  class="cell"></div></li>
                 <li><div data-type="pagebutton" data-url="#content_zimmer_dg.html" data-load="#content12"  data-off-background-color="transparent" data-off-color="#56728f" data-on-background-color="#56728f" data-on-color="#cceeff" data-active-pattern=".*#content_zimmer_dg.html"  data-icon="oa-control_building_modern_s_okg_eg"  class="cell"></div></li>
     
      </ul>
      </div>


@Gollum2

Vielen Dank nochmal für Deine Unterstützung