Zweites Navigationsmenü?

  • Hallo,

    ich hätte mal eine kleine Frage zum Erstellen eines zweiten Navigationsmenüs.


    Weil bei mir auf der Seite alle Punkte nicht in die obere Menüleiste (Protostar) reingepasst sind, habe ich ein zweites Menü erstellt.

    Dort alle weitere Themen positioniert, soweit sogut.


    Wenn ich jetzt die Internetseite über ein Mobiltelefon aufrufe habe ich oben einen "Symbol" für das (Main-)Menü und unten einfach nur einzelne Menüpunkte (aus dem Lower Menu) untereinander.

    Könnte mir jemand verraten ob man das beheben kann?


    Bild (mobile Darstellung): _https://www.bilder-upload.eu/bild-103e7b-1588334937.jpg.html

    Bild (Main Menu - Backend): _https://www.bilder-upload.eu/bild-0b35e5-1588334987.png.html

    Bild (Lower Menu - Backend): _https://www.bilder-upload.eu/bild-5399e8-1588335016.png.html


    Seite: _https://www.fechtbedarf-bajtinger.de/






    Gruß,

    Hecht

  • Das Symbol steht für das sogenannte "Hamburger Menü", weil es wohl so ausschaut. Nun gut, ich will hier keine Werbung machen... ;)

    Das wird automatisch vom Template so umgewandelt bei kleinen Bildschirmen.


    Auf Position 3 werden die Menüpunkte auf herkömmliche Art und Weise angezeigt. Völlig normal!


    Was genau möchtest du beheben?


    Typischerweise setzt man die rechtlichen Sachen nach unten in ein Footermenü. So lange es nicht überdeckt wird, z.B. durch ein Cookie-Banner, ist dies kein Problem und es stört oben nicht bzw. "bläht" die Seite nicht auf. Ich meine, dass ich das schon einmal geschrieben habe. Kann mich daran erinnern, da ich wieder über die kaum lesbaren Schreibschriften gestolpert bin (zu klein und unglücklich gewählte Schriftarten).

  • Das Menü ist speziell nur auf der Position 1 so möglich. Für andere Positionen ist mir keine einfache Lösung bekannt. Programmieren kann man natürlich immer. Eventuell kann man irgendeine Erweiterung einsetzen, mit der man mobile Menüs erstellen kann. Vielleicht weiß jemand mehr?

    Wichtig wäre dann auf jeden Fall, dass sich die Icons irgendwie unterscheiden. Sonst verwirrt das noch mehr. Wie gesagt, ich würde davon abraten.

  • Hallo, das ist sehr schade, dass es nur in der Position so möglich ist.

    Könnte man evtl. den Template etwas manipulieren, also die Position 1 unter Banner noch mal einsetzen (und z.B. als Position x benennen)?


    Ich möchte das untere Menü nicht im Footer haben, weil es mir unter dem Banner optisch so sehr gefällt =)

  • Ich möchte das untere Menü nicht im Footer haben, weil es mir unter dem Banner optisch so sehr gefällt =)

    Grundsätzlich ist nichts unmöglich. Wäre aber etwas zeitintensiv, falls nicht jemand die Lösung parat hat.


    Alternativ:

    Du könntest das Menü in der Desktop-Version so angezeigt lassen wie es ist, und für die mobile Darstellung ausblenden.

    Im Footer erstellst du eine Kopie, die du in der Desktop-Version ausblendest, und die dann nur in der Mobilversion angezeigt wird (natürlich auf herkömmliche Art und Weise.) Dann ist das schon aus rechtlicher Sicht besser, da man Impressum und Co. nicht groß suchen muss.

  • Danke für den Tipp.

    Man könnte also einfach ein mobiles Menü istallieren verstehe ich es richtig?

    Das wäre ja ohnehin benutzerfreundlicher und besser für google-ranking (?)

  • Dahinter steht das CSS-Framework Bootstrap. Damit kannst du das mobile Menü mit dem Hamburger erzeugen. Und das kannst du in dein Template selber einbauen. Wie die Technik funktioniert, steht hier:

    http://holdirbootstrap.de/komponenten/#navbar

    Ich selber habe mal ein Bootstrap-Grundtemplate für Joomla erstellt, wo das Grundgerüst für so ein Menü enthalten ist. Schau es dir mal an, wenn du magst und dann versuche dein Protostar umzustricken. Wobei ich selber so gut wie gar nicht mit Protostar arbeite und dir im Detail da nicht weiterhelfen kann. Brauchst etwas Zeit. Mach dir vorher Kopien aller relevanten Template-Dateien ;)

    https://www.time4joomla.de/joo…tstrap-grundtemplate.html



    Axel

  • Ja!

    Nö, wieso?

    Wenn ich es richtig verstehe sind die Seite mit einer obilen Version bereits seit 2015 etwas höher in der Liste.

    Wie es sich tatsächlich auswirkt weiß ich natürlich nicht.

    _https://www.sistrix.de/frag-sistrix/google-algorithmus-aenderungen/mobile-friendly-ranking-faktor-update/#Warum_wird_dienbspMobilfreundlichkeit_meiner_Website_einnbspRankingfaktor_bei_Google

  • @Birger, stört dich mein Anstreben so sehr?

    Niemand schaut sich diese Menüeinträge mehrfach an.

    Bei Webseite geht es um Benutzerfreundlichkeit.

    Das was Du da möchtest bringt nichts und ist nicht benutzerfreundlich, da man diese Menü immer übergehen muss, um an die Inhalte zu kommen.

    Deshalb setzt man solche Menüeinträge an das Ende der Webseite

  • Birger, das verstehe ich doch.

    Es geht doch nicht darum wo die Anderen Ihre Menüs setzen sondern wo ich es haben möchte.

    Ich kenne mich damit zwar sehr wenig aus, verstehe aber nicht warum man so (wie du) reagiert.

    Das mag ja sein, dass es nicht einfach ist.

    (Wie gesagt, ich dachte es sei ein ganz kleines Anliegen)

    So kann man es doch einfach sagen, ohne unfreundlich zu werden.

    Oder?

  • In unserem Rechtssystem darf zum Glück jeder seine Webseite so gestalten, wie er mag, ohne Rücksicht auf "man, alle, niemand...".

    Na ja, wenigstens so lange, wie er sich an die DSGVO hält ;). Und danach müssen Datenschutz und Impressum u.a. mit einem Klick erreichbar sein (s.hier oder hier). Daher glaube ich nicht, dass es eine gute Idee ist, diese zwei Links in einem "Hamburger"-Menü zu "vestecken". Aber ansonsten kannst du so viele Menüs in einen Hamburger packen, wie du willst.

  • anka danke vielen Dank für die Links und die (moralische) Unterstützung =)

    Das mit dem 1 Klick werde ich wohl riskieren, schließlich ist es nicht meine Schuld, dass sich das Menü zu einem Button komprimiert.

    Das ich etwas verstecke kann mir wohl auch kaum jemand vorwerfen, da es gleich oben, sofort auffällig positioniert ist.





    Was ich gerade eben unternommen habe:


    1. In index.php den Code für Position 1 unter der Position Banner kopiert und zu Position-100 ungenannt.

    <?php if ($this->countModules('position-100')) : ?>

    <nav class="navigation" role="navigation">

    <div class="navbar pull-left">

    <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">

    <span class="element-invisible"><?php echo JTEXT::_('TPL_PROTOSTAR_TOGGLE_MENU'); ?></span>

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>

    </a>

    </div>

    <div class="nav-collapse">

    <jdoc:include type="modules" name="position-100" style="none" />

    </div>

    </nav>

    <?php endif; ?>


    2. In templateDetails.xml unter der Position Banner die neue Position 100 eingeragen.

    <position>position-100</position>



    3. Am Ende von template.css Folgendes eingefügt:

    .position-100 {

    margin-left:15px;

    margin-top:4px;

    }



    Warum die Angabe in Punkt 3 so eingefügt?

    So im Netz so gefunden, und um Funktion zu testen so eingefügt.


    Das Resultat - der zweite Hamburger ist da _https://ibb.co/JsgNQH2

    NUR, dieser öffnet sich auf PC synchron mit dem oberen und auf dem Smartphone garnicht, statt dessen öffnet sich der obere Hamburgen.




    Die Lösung scheint sehr nahe, kann mir noch wer einen Tipp geben wir ich die Hambrger voneinander trenne?