WebsiteBaker Community Forum
WebsiteBaker Support (2.13.x) => General Help & Support => 
Hilfe & Support (deutsch) => Topic started by: md001 on August 08, 2023, 01:33:02 PM
-
Hallo, seit langem habe ich mal wieder eine Seite mit WB erstellt.
Ich habe hier nur ein Problem mit dem Menü (show_menu2)
Ziel ist ein horizontales Menü mit Mouseover. In der reinen html Seite funktioniert es auch, allerdings bekomme ich es nicht hin, das Ganze in das show_menu2 einzubauen.
Hier die Definition aus meinem .css
Vielleicht kann mir bitte jemand sagen, wie ich das nun in das Template bekomme 😬
/* Navigation menu styles */
.menu {
list-style: none;
display: flex;
justify-content: center;
background-color: transparent; /* Transparente Hintergrundfarbe */
padding: 10px 0;
flex-wrap: nowrap; /* Damit Menüpunkte nicht umgebrochen werden */
}
.menu li {
margin: 0 10px;
}
.menu a {
color: white;
text-decoration: none;
padding: 5px;
}
/* Mobile Navigation styles */
.mobile-nav-icon {
display: none; /* Standardmäßig ausgeblendet */
cursor: pointer;
font-size: 48px; /* Größere Schriftgröße für das Hamburger-Symbol */
}
/* Show mobile navigation icon when screen width is less than 600px */
@media (max-width: 600px) {
.menu {
display: none; /* Menü bei kleineren Bildschirmen ausblenden */
}
.mobile-nav-icon {
display: block; /* Mobile Navigation Icon anzeigen */
}
.menu.active {
display: flex; /* Menü anzeigen, wenn das Mobile Menü geöffnet ist */
flex-direction: column;
align-items: center;
}
}
/* Submenu styles */
.submenu-content {
display: none;
position: absolute;
background-color: #333;
padding: 0;
z-index: 1;
}
.submenu:hover .submenu-content {
display: block;
}
.submenu-content li {
margin: 0;
}
Hier der Schnipsel aus meiner HTML Datei, bei der es ja funktioniert wie gewünscht
<nav>
<div class="mobile-nav-icon" onclick="toggleMenu()">
<span>☰</span> <!-- Menüsymbol (Hamburger Icon) -->
</div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="submenu">
<a href="#">Seite 1</a>
<ul class="submenu-content">
<li><a href="#">Untermenü 1</a></li>
</ul>
</li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
<li><a href="#">Seite 5</a></li>
<li><a href="#">Seite 6</a></li>
<li><a href="#">Seite 7</a></li>
<li><a href="#">Seite 8</a></li>
<li><a href="#">Seite 9</a></li>
<li><a href="#">Seite 10</a></li>
</ul>
</nav>
-
Hast du mal eine URL für uns zum anschauen und analysieren?
Nächsten Fragen sind:
WB-Version?
PHP-Version?
welches Template?
Schwebt die so was vor?
Link (https://efg.umojasingers.de/) zu einer Testseite
-
WB-Version? 2.13.3 r166
PHP-Version? 8.1.15
welches Template? selbst erstellt.
Ja, so ein horizontales meine ich :-D
-
OK
Bei der Testseite habe ich dieses Template (https://template.WebsiteBaker.org/media/itemz/files/hortal-wb-2.zip) farblich umgebaut.
Auf unserer Templateseite (https://template.WebsiteBaker.org/) findest du noch mehr schöne Templates.
Vielleicht kannst du dir ja auch da die show_menu2-Aufrufe und css-Anweisungen zum nachbauen anschauen.
Viel Freude und Erfolg mit WebsiteBaker
-
Danke für die schnell Antwort, aber ich bin nicht sicher, ob wir aneinander vorbeireden.
Diese templateseite kenne ich. Es geht mir aber nicht darum, etwas irgendwo rauszukopieren und zu hoffen, dass es dann bei mir funktioniert...
Ich habe wohl grundsätzlich die Thematik des show_menu2 nicht verstanden.
Als Beispiel habe ich ja im ersten Post den HTML Code gepostet und auch den Teil aus der CSS.
Jetzt habe ich nach wie vor nicht verstanden, was ich nach "<?php show_menu2..." eintragen muss, damit das Menu, das ich ja in meiner css definiert habe auch angezeigt wird.
-
na dann probieren wir es mal so (auch, wenn der CSS-Code oben unvollständig ist)
$iMenu = Nummer des Menüs
$iStart = Startlevel des Menüs. SM2_ROOT wäre Level 0. Möchtest du Mehrsprachigkeit, braucht es bei einen Faktor, den man manuell eintragen kann oder vom Script ermittelt bekommt. Das DefaultTemplate zeigt dir da Beispiele
$iMaxLevel = hier: SM2_ALL, also alle vorhandenen öffentlichen Seiten in allen Menü-Level. Weitere Möglichkeiten in der Readme zum ShowMenu2
$iOptions = die Menü-Optionen - Weitere Möglichkeiten in der Readme zum ShowMenu2
$sItemOpen = Code, der für jeden einzelnen Menüpunkt verwendet wird, also jedem <li>. Hier mit der Bedingung: hat eine Hauptseite Unterseiten (Childs), füge die Menüklasse submenu ein
$sItemClose = der schließende </li>-Tag
$sMenuOpen = wird für jedes Untermenu verwendet, hier wird je Untermenü eine eigene Liste mit der CSS-Klasse submenu-content verwendet
$sMenuClose = der schließende Tag zum <ul> der Untermenüs
$mTopItemOpen = wird hier nicht benötigt, darum = false
$mTopMenuOpen = der öffnende Tag zum Menu im Level == 0
der Menü-Code ausnahmsweise mal in einem Zitatblock, damit er nicht verfälscht wird
<?php
// zuerst die Definition der einzelnen Teile
$iMenu = 1;
$iStart = SM2_ROOT+$iMultiLang;
$iMaxLevel = SM2_ALL;
$iOptions = SM2_ALL|SM2_BUFFER|SM2_PRETTY;
$sItemOpen = '<li class="[if(class==menu-expand){submenu}] [class]"><a href="[url]" class="[class]"><span>[menu_title]</span></a>';
$sItemClose = '</li>';
$sMenuOpen = '<ul class="submenu-content">';
$sMenuClose = '</ul>';
$mTopItemOpen = false;
$mTopMenuOpen = '<ul class="menu">';
// nun die Definition der Funktion
$sMainNav = show_menu2(
$iMenu,
$iStart,
$iMaxLevel,
$iOptions,
$sItemOpen,
$sItemClose,
$sMenuOpen,
$sMenuClose,
$mTopItemOpen,
$mTopMenuOpen
);
?>
und die Ausgabe:
<?php
echo $sMainNav;
?>
-
Damit so ist es schon verständlicher. Es funktioniert in jedem Fall erst mal und ich hoffe, dass ich es jetzt verstanden habe 😬
Vielen Dank.
-
Sehr schön (Y)
damit lassen sich dann auch richtig komplexe Abfragen realisieren, z.b. so etwas
$sItemOpen ='<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}] level="lev[level]">
[if(class==menu-expand){<a href="[url]" class="dropdown-toggle" data-toggle="dropdown">[menu_title]<b class="caret"></b></a>}
else {<a id="p[page_id]" href="[url]" target="[target]" class="[class]">[menu_title]</a>}]'
hieße "übersetzt"
Ist die (vom Code automatisch vergebene) Menüklasse gleich menu-current oder gleich menu-expand, dann setze die Klasse "active" im <li>-Tag, ist nur die Klasse menu-expand gesetzt, setze zusätzlich noch die Klasse "dropdown"
Ist die Klasse menü-expand gesetzt, (heißt: Seite hat Childs bzw Unterseiten), dann setze im a-Tag diesen Menü-Link-Code (2.Zeile des Code-Beispiels), wenn nicht, den anderen Code aus Zeile 3 des Beispiels
Mit Hilfe der Page-ID lassen sich dann auch einzelne Menü-Button ansprechen ( id="p[page_id]") z.b. um ihnen einzelne Farben oder (über CSS) einzelne Icons zuzuweisen.
Damit läßt sich dann so fast alles, was an Menüs aktuell für Webseiten bekannt ist, umsetzen