Horizontal aufklappendes Menü

  • Hallo zusammen,

    ich habe mal eine Frage die sicherlich auch für den einen oder anderen interessant ist.

    Ich würde gerne ein horizontales Menü haben (Level 1), und wenn man über das Menü drüber "hovert" klappt das Untermenü auf (Level 2 - Subkategorien).

    Nach einiger Suche bin ich sogar auf eine Lösung gestoßen:
    http://www.xtc-modified.org/forum/topic.php?id=4036

    Habe versucht diese umzusetzen, leider ist das nicht mehr ganz so einfach durch den praktischen Boxenmanager (den ich nicht missen möchte).

    Kann mir vielleicht jemand helfen wie ich das bei der SEO V2 einfügen kann, bzw. umsetzen kann?

    Ein Modul gibt es hierfür ja noch nicht oder?

    Viele Grüße

  • Hi Jungs,

    ich habe es realisiert (auf jquery basis, also voll im V2 zeitalter) und gebe es euch morgen im laufe des Tages.
    Hier ein Bild davon.
    [Blockierte Grafik: http://www.teamorder.eu/horizontal_nav.gif]
    Klappt richtig gut, allerdings habe ich mir nicht die Mühe gemacht es im Admin auch steuerbar zu machen..muss man auch nicht.
    Vielleicht mache ich es auch...irgendwann...

    Bis morgen,
    Julien.

  • Alles klar, freue mich schon auf deine Lösung.

    Eine Frage hätte ich nur, was meinst du mit "Admin auch steuerbar zu machen"? Das man es an und ausschalten kann oder wie? Weil alles andere macht er ja automatisch denek ich mal :confused:

    Aber werd mich da wohl einfach mal überraschen lassen :cool:

  • Hallo,

    so wie versprochen hier meine Anleitung, wie immer auf eigene Gefahr und bitte immer schön Backups machen und nie auf Live System einspielen, sondern schöön lokal testen.

    Dies beschreibt wie ich eine horizontale Navi mit JQuery eingebaut habe und dies in einer Box darstelle.
    Credits gehen nach DynamicDrive und Gunnart; was nicht funktioniert ist sicher auf meinem Mist gewachsen :)
    (Level Middle /html+, css+, mysql++, php++/ )

    Diese Datei downloaden:
    http://www.teamorder.eu/jquery_hnav_pack.zip


    ************* TEIL I *****************
    *
    1)Jquery Hnav Skript
    Die Datei "jqueryslidemenu.js" unter "includes/javascript/js/" abspeichern.

    2)JQuery HNav CSS und Bilder
    Die Datei "jqueryslidemenu.css" unter "templates/deine_template/css/" abspeichern.
    Die Bilder "down.gif" und "right.gif" unter "templates/deine_template/img/" abspeichern

    3)"Menu als Liste" Skript
    Die Datei "horizontal_navigation.php" unter "templates/deine_template/source/boxes/" abspeichern.

    4)Box Skript
    Die Datei "horizontal_navigation.html" unter "templates/deine_template/boxes/" abspeichern.

    5)Datei "templates/deine_template/html/box_middle.html" editieren/ersetzen:
    Sollte am Ende so aussehen:
    {if $DIV_SWITCHER!="no"}
    <div class="boxText{if $class} {$class}{/if}" {if $id}id="{$if}"{/if}>
    {$BOX_CONTENT}
    {if $link}<br /><a href="{$link}">{#text_more#}</a>{/if}
    </div>
    {else}
    {$BOX_CONTENT}
    {/if}


    6)Datei "includes/header.php" editieren:

    a)Vor echo '</head>'."\n".'<body>'."\n"; bei ca. Linie 65 folgendes addieren:
    // MOD:BEGINN HORIZONTAL NAVIGATION
    echo '<script src="includes/javascript/js/jqueryslidemenu.js"></script>'."\n";
    echo '<!--[if lte IE 7]>'."\n";
    echo '<style type="text/css">html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/</style>'."\n";
    echo '<![endif]-->'."\n";
    echo '<link rel="stylesheet" type="text/css" href="templates/'.CURRENT_TEMPLATE.'/css/jqueryslidemenu.css" />'."\n";
    // MOD:END HORIZONTAL NAVIGATION

    b)Datei abspeichern.


    So, somit wäre schon das wichtigste getan, jetzt nur noch schnell eine "Position" und eine "Box" zaubern...in TEIL II

    Julien.

  • ************* TEIL II *****************

    Die Boxen..

    1) Box erstellen.
    Unter die Admin Oberfläche bei "SEO Config->Boxen Manager" eine neue Box zaubern:
    Box Name: H_navigation
    Interne Bezeichnung:horizontal_navigation
    Position:* Deine Position oder unter den nächsten Punkt folgen *
    Sortierng: deine Sortierung
    Box Aktiv: Ja
    Titel Aktiv: Ja
    Typ: Datei (In MYSQL in der Tabelle "boxes" das Feld "box_type" auf File setzten)

    Position
    Da ich die H Navi in eine für mich speziellen Bereich haben wollte habe ich eine neue Position gezaubert, und soviel ich weiss geht es nur wenn man in der Tabelle "boxes_positions" einen neuen Eintrag macht.
    Meiner heisst "horizontal_nav"

    2)Index.html editieren
    Da wo ihr gerne eure Box haben wollt, kopiert ihr folgendes:
    <div id="myslidemenu" class="jqueryslidemenu" style="z-index:2000;">
    {$BOXES_horizontal_nav}
    </div>

    Für mich da ich eine neue Position kreeiert habe heisst es dann:
    {if $BOXES_horizontal_nav}<div id="myslidemenu" class="jqueryslidemenu" style="z-index:2000;">
    {$BOXES_horizontal_nav}
    </div>
    {/if}

    So, jetzt sollte ihr eine schöne neue Hnav haben, die genau wie die normale Navigation gecached wird.

    VIel Spass dabei.

    ps:
    ich stehe zur Verfügung um zu helfen, aber ich hoffe auf eure Unterstüzung und kann nicht auf Alle Anfragen SOFORT antworten..ein Leben habe ich auch :)
    Habt Verständnis.

    Julien.

    Einmal editiert, zuletzt von julien (29. August 2010 um 19:37)

  • Hi Julien,

    vielen Dank erstmal für deine Mühen. Ich habe nun mal alles eingegeben, nur eine Einstellung schaffe ich nicht: Die Box kann ich nicht auf Typ:Datei stellen. Bei mir ist das immer vom Typ Datenbank. Ich sehe leider auch wenn ich die Box öffne keine Möglichkeit das zu ändern. Wo stelle ich das um?

    viele Grüße

  • Hallo Tomkom,

    sorry ich habe es vergessen:
    In MYSQL in der Tabelle "boxes" das Feld "box_type" auf File setzten/schreiben, dann sollte es funktionieren.
    Falls nicht, gebe mir hier die Fehlermeldung oder beschreibe so ausführlich wie möglich was Du siehst.

    Nachdem alles funktioniert werde ich eine Anleitung in der zip Datei einfügen, sodass man sich nicht alles threads lesen muss.

    Julien.

  • wow, perfekt, funktioniert einwandfrei!! Vielen Dank.

    Jetzt habe ich nur noch eine Frage, ich möchte das Menu nicht horizontal, sondern vertical ausklappen lassen (also genau entgegengesetzt zu deinem).

    Die Hauptkategorien habe ich schon untereinander (float:left raus). Leider will nun das zweite UL aber nicht sich neben dem ersten UL anordnen lassen, (und dann die li natürlich mit float:left).
    Kannst du mir wohl noch sagen welche Änderungen ich in der CSS Datei vornehmen muss?

    Vielen Dank.

    Hinweis: so wies aussieht zieht er diese Info zum drunter bauen (mit 32px Abstand) irgendwo im JS und nicht im CSS... kann trotzdem leider net finden wo :(

    Einmal editiert, zuletzt von tonkom (29. August 2010 um 19:15)

  • Hallo noch mal,

    in meinem ersten Shop ist es am laufen, leider will es einfach im zweiten nicht, obwohl ich alles genau gleich gemacht habe, alle Einstellungen tausendmal durchgegangen bin und auch die Anleitung 10 mal durchgeschaut habe.

    hier ist der link:

    https://support.commerce-seo.de/www.ladela-wellness-shop.de

    Ich hoffe ihr seht mehr als ich... :(

    EDIT:
    Ok, man sollte auch wirklich ALLE Dateien hochladen...bei mir hatte ich die falsche box_middle hochgeladen! Nun funzt es sehr schön, vielen Dank noch mal.

    Einmal editiert, zuletzt von tonkom (30. September 2010 um 16:06)

  • Hallo Julien,

    vielen Dank für deine Lösung. Ich habe noch ein wenig bei Gunnarts Lösung geschaut, da ich die Horizontale Navi nur auf einer Ebene und die zweite Ebene in der Kategoriebox links haben wollte.

    Wer nur die Hauptnavigation auf der ersten Ebene haben will ändert folgenden Eintrag in der horizontal_navigation.php

    Code
    'MinLevel'	=>	1

    dann in die Datei templates/deintemplate/source/boxes/categories.php in Zeile ca. 120

    Code
    $box_smarty->assign('BOX_CONTENT',gunnartCategories());

    auskommentierren

    ändern in

    Code
    $box_smarty->assign('BOX_CONTENT',gunnartCategories($cPath_array[0],1,$CatConfig));

    und die Datei templates/deintemplate/boxes/box_categories.html wie folgt ändern.

    Code
    {config_load file="$language/lang_$language.conf" section="boxes"}
    {if $BOX_CONTENT}
    {html file=box_top.html name=categories}
    {html file=box_name.html name=categories class=categories}
    {html file=box_middle.html}
    {html file=box_bottom.html}
    {/if}

    bitte wie immer backup machen etc.
    grüsse
    olli

  • Danke Julien, habe das Horizontalmenü ohne Probleme in den CSEO V2 eingebaut, sieht gut aus! (http://www.profibag.de).

    Nun würde ich gerne noch einige weitere Menüpunkte hinzufügen, z.B. die Hersteller oder auch verschiedene Content-Infoseiten unter einem 1st-Level-Menüpunkt "FAQ" und anderes.
    Kann man so etwas mit dem Horizontalmenü auch lösen?

  • Hallo zusammen,

    ich möchte niemanden zu nahe treten aber die meisten User sind von diesen horizontalen Klapp-Menüs genervt.
    Zudem ist hier doch einiger Eingriff nötig, der u.U. durch ein shop-update wieder nieder gemacht wird.

    Seit ihr sicher dass Ihr euren Kunden ein horizontales Klapp-Navi antun wollt?

    Grüße Datenknecht

  • JA, wollen wir!
    Das ist und bleibt zwar Geschmackssache, aber unsere Kunden wollen genau das. Damit haben sie einen schnelleren Überblick.

    Allerdings geht es in diesem Thread nicht um das Für und Wider von Aufklappmenüs, sondern um die Realisierung.
    Also, wer hat einen Tipp oder Lösungsvorschlag für die Integration von zusätzlichen Menüpunkten, wie oben beschrieben?

  • muss mal was loswerden: echt super, spitzen tolle leistung und arbeit, die sich julien hier gemacht hat.
    funzt einwandfrei und sieht gut aus !!!

    recht herzlichen dank.

  • Hi ishoptv,

    Freue mich über dein Comment und freue mich wenn es "euch" auch weiterhilft.
    Opensource und Community Gedanken: Nehmen aber auch zurückgeben und die anderen Teilhaben lassen.

    Julien.