SHOW_MENU2 ... Bedingte Formatierung

[markherrmann]

Hi Leute, ich bin am verzweifeln (ich Blicke show_menu2 nicht)

Ich habe rumprobiert um die folgende Navigationsstruktur für W3-CSS abzubilden:

Code: [Select]

<!-- Navigationbar -->
<div class="w3-bar w3-black">
<div id="navbar" class="w3-bar-block w3-sand w3-hide w3-hide-large w3-hide-medium">
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 3</a>
<div class="w3-dropdown-hover">
<button class="w3-button w3-sand w3-hover-sand">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button w3-sand w3-hover-blue">Link DD1</a>
<a href="#" class="w3-bar-item w3-button w3-sand w3-hover-blue">Link DD2</a>
<a href="#" class="w3-bar-item w3-button w3-sand w3-hover-blue">Link DD3</a>
</div>
</div>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-right w3-black w3-hover-blue w3-hide-small w3-hide-medium">BTN-Rechts</button>
</div>
</div>

Ein Test mit der Fußzeilennavigation ging noch leicht alle sind ohne Submenüs:

Code: [Select]

<div class="w3-bar w3-margin-top w3-small"><?php show_menu2(2, SM2_ROOT, SM2_START, SM2_ALL, "\n".&#39;<a href="[url]" class="w3-bar-item w3-margin-right w3-border w3-button w3-tiny w3-padding-small">[menu_title]</a>&#39;.&#39;&#39;, &#39;&#39;, &#39;&#39;, &#39;&#39;, false, false);?>
</div>
Aber das Menü oben enthält ein Dropdown-Content, der auch wieder geschlossen sein möchte. Die If Statements gehen soweit ich das gelesen haben nur im Opener-Teil.

Hat sich jemand von Euch schon damit intensiver beschäftigt? Ich bin mit meinem Latein am Ende. Hab schon überlegt eine Funktion fürs auslesen Navigation zu schreiben.

[crnogorac081]

not a solution but this may help you with your code

Code: [Select]

$sTopNav = '';

$sItemOpen = '<li class="nav-item[if (class==menu-expand){ dropdown}][if(class=menu-current||class=menu-parent){ parent}]">'.
'<div class="d-flex">'.
'<a class="nav-link[if(class=menu-current){ active}]" href="[url]">'.
'<span>[menu_title]</span></a>'.
'[if (class==menu-expand){'.
'<a class="nav-link-toggle dropdown-toggle hide-arrow ms-auto" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<i class="bi bi-chevron-down"></i>
</a>}]'.
'</div>';

$topNav = show_menu2(
1,
SM2_ROOT + $iMultiLang, // If you have First menu level /en/, /de/ , use: SM2_ROOT + $iMultiLang,
SM2_ALL,
SM2_ALL|SM2_NUMCLASS|SM2_PRETTY|SM2_BUFFER,
$sItemOpen,
'</li>',
'<ul [if(level==0){class="navbar-nav"} else {class="dropdown-menu"}]>',
'</ul>'
    );
$topNav = str_replace('class=""', '', $topNav);


[markherrmann]

will try it... thank you

[sternchen8875]

Bin nicht ganz sicher, ob es das ist, was du benötigst, weil deine Vorlage und dein Testcode doch unterschiedlich sind.

Der Code der Vorlage besagt, das es (eigentlich) ein hidden-Menü ist, das z.b.  für eine Navigation auf Mobilgeräten verwendet wird. So hab ich es erstmal gebaut

<div  class="w3-bar w3-black">
   <div id="navbar" class="w3-bar-block w3-sand" style="display: none;">
        <?php
            // einzelne Menupunkte
            $sItemOpen = '<li class="[class] w3-hide-small w3-bar-item w3-button w3-hover-blue level[level] [if(class==menu-expand&&level==0){w3-dropdown-hover}]">[if(class==menu-expand){<a href="[url]">[menu_title]</a>}else{<a href="[url]" class="w3-padding-8 level[level]">[menu_title]</a>}]';
           // home-button
           $sTopItemOpen = '<li class="w3-border-right"><a href="'.WB_URL.'" class="w3-hover-none w3-padding-8"><i class="fa fa-home" aria-hidden="true"></i></a>';
           
            // button rechts
            $sTopItemOpen .= '<li class="w3-right"><a class="w3-bar-item w3-button w3-padding-0 w3-right" href="javascript:void(0)" onclick="closeMenu()" title="Toggle Navigation Menu">Close <i class="fa fa-bars"></i></a>';

            echo show_menu2(
                $aMenu          = 1,
                $aStart         = SM2_ROOT,
                $aMaxLevel      = SM2_ALL,
                $aOptions       = SM2_ALL|SM2_PRETTY|SM2_BUFFER,
                $aItemOpen      = $sItemOpen,
                $aItemClose     = '</li>',
                $aMenuOpen      = '<ul class="w3-dropdown-content w3-bar-block w3-card-4 level[level]" style="max-width:180px;">',
                $aMenuClose     = '</ul>',
                $aTopItemOpen   = $sTopItemOpen,
                $aTopMenuOpen   = '<ul class="w3-bar-block w3-sand">'
            );
    ?>
   </div>
</div>           
<br>
<button onclick="showMenu()" title="Toggle Navigation Menu"" class="w3-button w3-right w3-black w3-hover-blue w3-hide-small w3-hide-medium">BTN-Rechts</button>

dieses Menü ist anfangs geschlossen und wird erst bei Klick auf den Button BTN Rechts geöffnet. Im aufgeklappten Menü ist dann wieder ein Close-Button

$sTopItemOpen hat zwei Zeilen, in der ersten Zeile ein Home-Button. War nicht Teil deines Menü's. Hab es aber drin gelassen, vielleicht braucht es ja mal wer

Möchtest du diesen Home-Button nicht haben, kommentiere die erste Definition von $sTopItemOpen aus und entferne in der zweiten Definition den Punkt vor dem = ($sTopItemOpen .= ....

und so schaut es dann aus



noch das JS zum Öffnen und Schließen des Menüs

Code: [Select]

<script>
function showMenu() {
  document.getElementById("navbar").style.display = "block";
}

function closeMenu() {
  document.getElementById("navbar").style.display = "none";
}
</script>

[sternchen8875]

und so hab ich es als statisches Menü im Einsatz

[markherrmann]

Hey Danke Sternchen...

wollt eigentlich gestern damit beginnen, aber das Beispiel vom ersten antwortenden war doch ernüchternd.
Als ich gesehen hab das da, Listenelemente (bei Dir ja leider auch) drin stand ... dacht ich ich lass es.
W3 CSS ist schon ziemlich cool, ich hab damit die Web UI für ESP32 Sensoren geschrieben... deswegen will ich genau das, auch für die Onlineseite im Web benutzen.

Für alle die sich W3 CSS mal ansehen wollen: https://www.w3schools.com/w3css/w3css_examples.asp

Für alle die vor ähnlichen Problemen stehen: Ich schreibe gerade eine eigene Funktion in den Kopf meines Templates. SM2 benutz ich noch, aber nur noch als Datenquelle:

Funktion1 bei mir lautet:

Code: [Select]

function menu_2array() {
ob_start();
show_menu2(1, SM2_ROOT, SM2_ALL, SM2_ALL|SM2_ALLINFO, '[url]|[menu_title]|[level]|[parent]|[page_id]|[class];', '', '', '', false, false);
$array_temp_raw = explode(";", ob_get_contents());
array_pop($array_temp_raw);
ob_end_clean();
$array_temp_clean = array();
$array_target_keys = ["url", "menu_title", "level", "parent", "page_id", "class"];
for ($i=0; $i<count($array_temp_raw); $i++) {
$array_temp = explode("|", $array_temp_raw[$i]);
$array_changed = [];
foreach ($array_temp as $index => $value) {
    $array_changed[$array_target_keys[$index]] = $value;
}
$array_temp_clean[] = $array_changed;
} // for
return $array_temp_clean;
} // menu_2array()
und die macht mir ein hübsches array, welches ich danach nur noch iteriere...

Code: [Select]

    [n] => Array
        (
            [url] => https://xyz
            [menu_title] => Test
            [level] => 0
            [parent] => 0
            [page_id] => 11
            [class] => menu-sibling
        )
Aber Danke für Eure Beiträge.

[sternchen8875]

Also show_menu2 ist kein Hexenwerk und ist in 5 min auf div erweitert unter Beibehaltung aller bekannten Funktionen. Problem ist dann halt die "Upgrade-Gefahr", die sich durch ein "neues" Modul show_menu2_div lösen ließe. Bringt dann auch den gewünschten Menü-Code 

Wichtig ist, das du eine Lösung hast, mit der du zufrieden bist

[markherrmann]

Hey Danke fürs Feedback, was haste erneut geschickt?
Was Updates angeht... da haste natürlich absolut recht.

Ich guck mir deinen ersten Post heute Abend nochmal an.

Grüßle aus dem badischen...

[sternchen8875]

was haste erneut geschickt?

Nein, hab nix geschickt, trau mich nicht 

Das show_menu() und show_menu2() Listenelemente ausgeben, war damals wohl "State of Art", an Div's hat da noch keiner gedacht und ich erinnere mich auch nicht, das dies vor 15 Jahren irgendwo zu sehen war. Heute findet man es recht häufig, aber rein technisch macht es keinen Unterschied. Am Ende ist es doch nur CSS.

das show_menu2() um div zu erweitern braucht wohl nur 3 kleine Änderungen. Vielleicht bekommen wir ja die Entwickler dazu überredet 
Ich werd mal schauen, ob ich das auf dem Wunschzettel unterbringen kann.

Zwei parallele Module sind auch möglich, bedürfen aber "größerer" Änderungen im Script, damit sich beide Funktionen nicht stören