The GregCustom Menu System

A Click-Action Multi-Level Menu

The GregCustom Theme was conceived as a base on which I could build a larger site than most of the other themes available for WonderCMS. The default menu code, which relies on hover action, does not really allow for multi-level menu structures. I wanted one with a click-action that would allow my site to work well on phones and other touch screen devices.

Not knowing my way around PHP I turned to ChatGPT to assist me in creating what I needed. After much work checking its suggested code and often, in the early stages, having to remind it of the implications of writing code for WonderCMS, the code, which I chose to adopt, finally emerged.

This came in three parts. The main part was a routine to be included in a "functions.php" file. This was to be called from a replacement for the "topMenu" section of code in my "theme.php" file. If a "topMenu" section sounds familiar I should say my brief to ChatGPT included, perhaps unnecessarily, that it was to retain the ID and class names of as many elements as possible in the code it was to produce. The third part was some inevitable changes to my CSS code, for which ChatGPT added some further explanatory comments.

The CSS code is easily accessed at the end of the file at the URL you should be able to guess, if you're up to developing your own theme. The "topMenu" code that belongs in the "theme.php" file is shown below:

<section id="topMenu">
  <div class="inner">
    <!-- Hidden checkbox control for pure CSS mobile menu -->
      <input id="menuControl" type="checkbox">

    <!-- Animated Hamburger Button -->
    <label for="menuControl" class="hamburger-btn" aria-label="Toggle Menu">
      <span class="bar top-bar"></span>
      <span class="bar middle-bar"></span>
      <span class="bar bottom-bar"></span>
    </label>

    <nav>
      <ul class="menu">
        <!-- Custom Click Menu -->
        <?= customClickMenu() ?>

      </ul>
    </nav>
  </div>
</section>

As you see there's very little difference from the code in the default theme, a little additional code to create the animated "hamburger button" that I requested and the call to the routine that generates the list items in the site's menu has a different name.

Finally, there's the code in the "functions.php" file that produces the list items that form the menu. I'm not a programmer, but thanks to the comment lines produced and inserted by ChatGPT I can get the general drift of what each section of the code does.

<?php
/**
 * Custom Menu Function for WonderCMS
 * Ensures parent routes maintain proper pathing and trailing slashes while
 * outputting a button-driven dropdown structure for CSS-only menus.
 */

function customClickMenu($items = null, $depth = 0, $parentPath = '') {
    global $Wcms;

    // Fetch root menu items on initial call
    if ($items === null) {
        $menuConfig = $Wcms->get('config', 'menuItems');
        $items = is_object($menuConfig) ? get_object_vars($menuConfig) : (array)$menuConfig;
    }

    if (empty($items)) {
        return '';
    }

    $output = '';

    foreach ($items as $slug => $item) {
        if (is_array($item)) {
            $item = (object)$item;
        }

        // Skip hidden pages
        if (isset($item->visibility) && $item->visibility === 'hide') {
            continue;
        }

        // Determine current page raw slug and label
        $rawSlug = $item->slug ?? (is_string($slug) ? $slug : '');
        $name    = $item->name ?? $item->title ?? $rawSlug;

        // Clean leading/trailing slashes for clean route assembly
        $cleanRawSlug = trim($rawSlug, '/');
        $cleanParent   = trim($parentPath, '/');

        // Build full hierarchical route path
        if (!empty($cleanParent)) {
            if (strpos($cleanRawSlug, $cleanParent . '/') === 0) {
                $routePath = $cleanRawSlug;
            } else {
                $routePath = $cleanParent . '/' . $cleanRawSlug;
            }
        } else {
            $routePath = $cleanRawSlug;
        }

        // Extract subpages safely
        $subpages = [];
        if (!empty($item->subpages)) {
            $subpages = is_object($item->subpages) ? get_object_vars($item->subpages) : (array)$item->subpages;
        }

        // Filter hidden subpages
        $visibleSubpages = array_filter($subpages, function($sub) {
            $subObj = is_array($sub) ? (object)$sub : $sub;
            return !isset($subObj->visibility) || $subObj->visibility !== 'hide';
        });

        $hasChildren = !empty($visibleSubpages);

        // List of section slugs that require trailing slashes (Parent directory categories)
        $categorySections = ['games', 'wondercms', 'sundry'];

        // Determine trailing slash requirement
        $needsTrailingSlash = $hasChildren || in_array(strtolower($cleanRawSlug), $categorySections);

        // Format final URL path
        $urlPath = $routePath;
        if ($needsTrailingSlash) {
            $urlPath .= '/';
        }

        $url = $Wcms->url($urlPath);

        // Strict active page check
        $isActive = ($Wcms->currentPage === $cleanRawSlug || $Wcms->currentPage === $routePath) ? ' active' : '';

        // Indentation helper for clean, human-readable HTML output
        $indent = str_repeat("    ", $depth + 5);

        // Build <li> class list
        $liClasses = 'nav-item' . ($hasChildren ? ' subpage-nav' : '');
        if (!empty($isActive) && !$hasChildren) {
            $liClasses .= $isActive;
        }

        $output .= "\n" . $indent . '<li class="' . trim($liClasses) . '">';

        if ($hasChildren) {
            // Button-driven dropdown header
            $output .= "\n" . $indent . "    " . '<button type="button" class="nav-link' . $isActive . '">' . htmlspecialchars($name) . '</button>';

            // Sub-menu list using 'subPageDropdown' class
            $output .= "\n" . $indent . "    " . '<ul class="subPageDropdown">';
            $output .= customClickMenu($visibleSubpages, $depth + 1, $routePath);
            $output .= "\n" . $indent . "    " . '</ul>';
        } else {
            // Standard page link
            $output .= "\n" . $indent . "    " . '<a href="' . htmlspecialchars($url) . '" class="nav-link' . $isActive . '">' . htmlspecialchars($name) . '</a>';
        }

        $output .= "\n" . $indent . '</li>';
    }

    return $output;
}

The main difference from the default menu code is that it generates button tags rather than links for any item that has sub-pages below it. I also requested that the sub-menu code generated should be appropriately indented so, should you wish to, the code is much easier to read.

ChatGTP initially produced a menu using "summary" and "details" tags. These HTML tags were introduced relatively recently and are designed for content where you might wish to show only a summary of a topic initially but, with a click, allow the visitor to display further details. These two tags have been adopted by web designers for constructing menus as a browser's default action, should the contents of a summary tag be clicked, is to reveal the contents of the nested details tag - exactly the action required in a menu with sub-options.

I decided against using this approach because I thought, perhaps wrongly, that it might make more sense to those less familiar with coding menus to keep the concept of a list uppermost with items either acting as a link to another page, or as a buttons that opens further options. Whatever the concepts, just copying the code on this page, together with the navigation styling in the linked stylesheet should allow anyone working on producing their own theme to provide a click-action multi-level menu system.