modChome Hauptmenü erstellen UPDATED

Overtry · 29. September 2015

Schönen guten Tag,

auf ein neues, nachdem ich mir den Browser Tab ausversehn geschlossen hab muss ich alles nochmal schreiben .

So nun versuch ich mal mein Anliegen zu erläutern.

Ich bin Aktuell am basten von einem Template das der alten Hauptseite von wow-europe.com gleicht,
und versuche die strucktur bestmöglich bei zu behalten.
LINK: http://web.archive.org/web/20101130143736/http://www.wow-europe.com/de/index.xml.

Gut soweit so schön,
Jetzt wollte ich Joomlas Hauseigenes Modul hernehmen um ein modChome zu erstellen für das Hauptmenü,
das klappt auch bis jetzt.

Nun zerbrech ich mir aber seit Tagen den Kopf darüber wie ich <a> Daten wie Kategorie, Name und Link an ein Script aufbereite,
zunächst hier die Daten die ich habe...,

menucreator.js Original!

Spoiler anzeigen

Code

var menuCreator = {    HOVER_DELAY: 350,    BOX_MINLENGTH: 115,    appendSubMenu: function (item, list, parentUl) {        if (parentUl) {            jq(parentUl).append(list);        }        var newList = menuCreator.createSubMenu(item[2]);        menuCreator.adjustBoxWidth(newList);        list.append(newList);    },    createSubMenu: function (list, ulElem) {        ulElem = ulElem || jq('<ul />').hide();        jq.each(list, function (i, item) {            var hasSubmenu = menuCreator.hasSubMenu(item),                listItem = menuCreator.createMenuEntry(item, hasSubmenu);            if (hasSubmenu) {                menuCreator.appendSubMenu(item, listItem, ulElem);            } else {                ulElem.append(listItem);            }        });        return ulElem;    },    createMenuEntry: function (entry, multiLevel) {        var $listElem = jq('<li />'), timeoutId;        if (multiLevel) {            timeoutId = Math.random();        }        if (entry[1]) {            $listElem.prepend(                jq("<a>").attr('href', entry[1]).text(entry[0])            ).hover(                function () {                    if (multiLevel) {                        Timers.set("timer", function () {                            if (!jq("ul", $listElem)[0]) {                                menuCreator.appendSubMenu(($listElem.data("pointer")) ? $listElem.data("pointer") : entry, $listElem);                                $listElem.data("pointer", null);                            }                            if ((Browser.ie) && $listElem.parent().hasClass('mainNav')) {                                $listElem.parent().css("position", "relative");                            }                            $listElem.css("position", "relative").find('ul:first').show();                        },                            menuCreator.HOVER_DELAY);                        Timers.clear(timeoutId);                    }                    if (!$listElem.parent().hasClass("menuCountry")) {                        $listElem.css("backgroundColor", (Browser.ie6 || Browser.ie7) ? "#232949" : "#131627");                    } else {                        $listElem.css("backgroundPosition", "0 -21px");                    }                    $listElem.children('a:first').css("color", "#FFF");                },                function () {                    if (multiLevel) {                        Timers.clear("timer");                        Timers.set(timeoutId, function () {                            $listElem.css("position", "static").children('ul').hide();                            if ((Browser.ie) && $listElem.parent().hasClass("mainNav")) {                                $listElem.parent().css("position", "static");                            }                        }, menuCreator.HOVER_DELAY);                    }                    if (!$listElem.parent().hasClass("menuCountry")) {                        $listElem.css("backgroundColor", "");                    } else {                        $listElem.css("backgroundPosition", "0 0");                    }                    $listElem.children('a:first').css("color", "#F4C400");                }            );        } else {            $listElem.prepend('<span>' + entry[0] + '</span>');        }        if (multiLevel) {            $listElem.attr("class", "multi");            $listElem.children("a").attr("class", "multi");        }        return $listElem;    },    adjustBoxWidth: function (ulElem) {        var $list = jq(ulElem).attr('id', 'current'),            $links = $list.find("a").filter(function () {                return jq(this).parent().parent().attr('id') == 'current';            }),            maxLength = 0;        $links.each(function () {            var $link = jq(this),                textLength = $link.text().length;            if (textLength > maxLength) {                maxLength = textLength;            }        });        $list.removeAttr('id');        maxLength = (maxLength * 6) + 35;        $list.css("width", (maxLength < menuCreator.BOX_MINLENGTH) ? menuCreator.BOX_MINLENGTH : maxLength + "px");    },    hasSubMenu: function (item) {        return !!item[2];    },    init: function (name) {        var ul = jq("<ul />").attr('class', (name != 'menuCountry') ? 'mainNav' : 'mainNav menuCountry'), hasSubMenu;        jq.each(Menu[name], function (i, entry) {            hasSubmenu = menuCreator.hasSubMenu(entry);            listElement = menuCreator.createMenuEntry(entry, hasSubmenu);            if (hasSubmenu) {                listElement.data("pointer", entry);            }            (ul).append(listElement);            if (jq(ul).hasClass('menuCountry')) {                jq("#" + name).append(ul);            } else {                jq("#" + name).find(".leftMenu-cnt").append(ul);            }        });    }};

Diese Datei baut mir das komplette <ul> gerüst, und will gefüttert werden mit den daten die ich oben erwähnt hatte.

OK nun zeige ich euch die Datei die die Daten normalerweise hatte...,
Teilauszug main-nav.js Original!

Spoiler anzeigen

Dieses HTML Gerüst soll in der modChome ausgegeben werden,
und in <div class="leftMenu-cnt"> muss das <ul> Konstrukt.

Spoiler anzeigen

Harmageddon · 29. September 2015

Frage 1: Bevor du mehrere Stunden investierst, um das zurechtzubiegen: Gibt es nachvollziehbare Gründe, warum du das überhaupt versuchst?
Dein Menü wird zur Laufzeit mit Javascript erst generiert. Das bedeutet nicht nur unnötige Berechnungen im Browser, sondern auch, dass dein Menü für Besucher ohne Javascript nur verstümmelt ist. Wahrscheinlich findet selbst Google keine deiner so erzeugten Menülinks. Auf mobilen Geräten wird das schwer zu bedienen sein, für Screenreader o.Ä. wahrscheinlich überhaupt nicht.
Und wenn das noch nicht genug Gründe dagegen sind: Für das, was ich auf deiner verlinkten Seite sehe, brauchst du nur wenige Zeilen CSS und keine einzige Zeile Javascript.

Overtry · 29. September 2015

Hay Harmageddon

Danke für dein Interesse.

LG:

Edit:
Ok ok.

Also du meinst ein "Pure CSS Menu" ist das beste dafür?
und kann ich beim modChome das so machen?

Spoiler anzeigen

PHP

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.wow_europe_com
 *
 * @copyright   Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */


defined('_JEXEC') or die;


function modChrome_mainMenu($module, &$params, &$attribs) {
    $menuTitle = isset($attribs['menuTitle']) ? (int) $attribs['menuTitle'] : 'menu';
    $menuTitle = 'menu'.$module->title;


    $moduleCounter = 1;


    $state = isset($attribs['state']) ? (int) $attribs['state'] : 1;


    if (!empty ($module->content) ) { ?>
        <div id="leftMenu" class="<?php echo htmlspecialchars($params->get('moduleclass_sfx'));?>">
            <div id="leftMenuContainer">
                <?php if ($module->showtitle) : ?>
                <div id="<?php echo $menuTitle; ?>">
                    <div class="menu-button-off" id="<?php echo $menuTitle; ?>-button" onclick="javascript:toggleNewMenu(<?php echo $moduleCounter++; ?>-<?php echo $state; ?>);">
                        <span class="<?php echo $menuTitle; ?>-icon-off" id="<?php echo $menuTitle; ?>-icon"> </span>
                        <a class="<?php echo $menuTitle; ?>-header-off" id="<?php echo $menuTitle; ?>-header"><em><?php echo $menuTitle; ?></em></a>
                        <a id="<?php echo $menuTitle; ?>-collapse"></a>
                        <span class="menuEntry-rightBorder"></span>
                    </div>


                    <div id="<?php echo $menuTitle; ?>-inner">
                    <?php endif; ?>
                        <div class="leftMenu-cont-top"></div>


                        <div class="leftMenu-cont-mid">
                            <div class="m-left">
                                <div class="m-right">
                                    <div class="leftMenu-cnt">
                                        <?php echo $module->content; ?>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="leftMenu-cont-bot"></div>
                    </div>
                </div>
            </div>
        </div><?php
    }
}
?>

Alles anzeigen

Edit: Spoiler aktualisiert, der modChome funktioniert konnte nicht aufhören ^^.

Harmageddon · 30. September 2015

Zitat von Overtry

Also du meinst ein "Pure CSS Menu" ist das beste dafür?

Jep.

Zitat von Overtry

und kann ich beim modChome das so machen?

Kannst du vermutlich schon, sieht halt etwas kompliziert aus.