jQuery Mega-Drop-Down-Menu für modified eCommerce Shopsoftware?

[Barnabas]

Moin! 

Ich habe eine Frage bezüglich dieses Mega-Drop-Down-Menus! Ich würde das gerne bei mir im Shop einbauen! Ist es schwer das an den modified eCommerce Shopsoftware 1.05 anzupassen?

Nice Multiple jQuery Mega Drop Down Menu

jQuery Mega Drop Down Menu Plugin

Bevor ich mich jetzt tiefer damit beschäftige, wollte ich mal eure Meinung dazu hören! Vielleicht hat der ein oder andere noch einen Tipp auf Lager was ich beachten muss!

Gruß Kai

Linkback: https://www.modified-shop.org/forum/index.php?topic=16629.0

[Sick]

Interessantes Thema,
habe auf jeden Fall schon einige modified eCommerce Shopsoftware Shops mit so einer Navigation gesehen.
Also machbar ist es auf jeden Fall.

Gruß

[GTB]

h-h-h hat sowas für modified eCommerce Shopsoftware gemacht.

Gruss Gerhard

[Barnabas]

So...! Ich habe mal ein bisschen gebastelt! 

Hier habe ich ein Basis-Drop-Down-Menu das für die Standardinstallation des modified eCommerce Shopsoftware gedacht ist! Vielleicht möchte das jemand nutzen!

In dem Downloadpaket befindet sich eine Index.html zum testen. Wie die Verlinkung zu den KATEGORIEN und UNTERKATEGORIEN aussehen kann, wird hier beschrieben!

Eigene Links auf Kategorien verlinken

Anbei noch ein paar Screenshots vom Aussehen!

Gruß Kai

[Tomcraft]

Kann es sein, dass du den Anhang vergessen hast?

Nachtrag: jetzt hast du es nachträglich angefügt.

Grüße

Torsten

[Barnabas]

Nein, sorry! Ich habe noch mal was geändert, müsste jetzt laufen.

[h-h-h]

Code: PHP  [Auswählen]

      <ul id="mega-menu-1" class="mega-menu">
                <li><a href="{$index}">{#link_index#}</a></li>
                <li><a href="#">Katalog</a>
                        <ul>
                                <li><a href="#">Desktop</a>
                                        <ul>
                                                <li><a href="#">Product 1</a></li>
                                                <li><a href="#">Product 2</a></li>
                                                <li><a href="#">Product 3</a></li>
                                        </ul>
                                </li>

Da muss dann ja alles per Handeingepflegt werden, wenn Du Interesse an einer automatisierten Version hast die auch ohne Javascript läuft kannst Du Dich gerne bei mir melden. Demoshop

Gruß

h-h-h

[Barnabas]

[...]
Da muss dann ja alles per Handeingepflegt werden, [...]

Ich wollte das wie beim Superfish-Menu lösen, aber ich habe das noch nicht hinbekommen!

Ist aber auch nicht sooo...tragisch, wenn Kategorielinks und Unterkategorielinks mit der Hand eingetragen werden!

[...] wenn Du Interesse an einer automatisierten Version hast die auch ohne Javascript läuft kannst Du Dich gerne bei mir melden. [...]

Ja, leider funzt das Menu bei deaktivierten Javascript nicht! Kann ich da ein fallback einpflegen? Gibt es da fertige Scripte?

Gruß Kai

[h-h-h]

Anfragen bitte per eMail, siehe eMail-Button links.

Gruß h-h-h

[olli0578]

Da ich hier nicht nur nehmen, sondern auch mal was beitragen möchte, habe ich mich mal über dieses etwas angestaubte Thema hergemacht und das Megamenü mal ein bisschen modifiziert.
Geändert habe ich folgende Punkte:

• Das Script, welches in die includes/header.php eingefügt wurde habe ich in die /templates/xtc5/javascript/general.js.php verschoben. Somit ist das Menü komplett im Template eingebunden und es müssen keine Core Dateien geändert werden.
• Das Menü habe ich dynamisch mit den Kategorien verlinkt. Allerdings gibt es hier noch ein Problem mit der korrekten Ausgabe der Kategorietiefe: Auf der Startseite wird nur die erste Kategorieebene ausgegeben. Bin ich dann in einer Kategorie, werden nur die Unterkategorien der jeweiligen Kategorie ausgegeben. Eben das Standardverhalten der box_categories. Also muss noch eine Möglichkeit gefunden werden, wie alle Kategorien ausgegeben werden können.
• Bei deaktiviertem Javascript funktioniert das Menü nicht. Muß man das heutzutage noch berücksichtigen?

Und jetzt die Anleitung, wie ich das Menü eingebunden habe:

Geänderte Dateien:
/templates/xtc5/css/general.css.php
/templates/xtc5/javascript/general.js.php
/templates/xtc5/index.html
/templates/xtc5/boxes/box_categories.html

Neue Dateien:
/templates/xtc5/css/dcmegamenu.css
/templates/xtc5/javascript/jquery.dcmegamenu.1.2.js
/templates/xtc5/javascript/jquery.hoverIntent.minified.js

(Die neuen Dateien findet Ihr im Anhang)

Folgende Änderungen müsst Ihr an Euren Shopdateien vornehmen:

Datei: /templates/xtc5/css/general.css.php

Suche:

Code: PHP  [Auswählen]

<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/thickbox.css" type="text/css" media="screen" />

Ersetzen durch:

Code: PHP  [Auswählen]

<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/thickbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/dcmegamenu.css" type="text/css" />

Datei: /templates/xtc5/javascript/general.js.php

Suche:

Code: PHP  [Auswählen]

script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>

Ersetzen durch:

Code: PHP  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.dcmegamenu.1.2.js" type="text/javascript"></script>
<!--BOF Megamenu-->
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-1').dcMegaMenu({
        rowItems: '4',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>
<!--EOF Megamenu-->

Datei: /templates/xtc5/index.html

Suche:

Code: PHP  [Auswählen]

<ul id="topmenu">
  <li><a href="{$index}">{#link_index#}</a></li>
 <li><a href="{$cart}">{#link_cart#}</a></li>
 {if $account}
    <li><a href="{$account}">{#link_account#}</a></li>
 {/if}
  {if $smarty.session.customers_status.customers_status_id == '1'}
    <li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>
 {/if}
  <li><a href="{$checkout}">{#link_checkout#}</a></li>
 {if $smarty.session.customer_id}
    <li><a href="{$logoff}">{#link_logoff#}</a></li>
 {else}
    <li><a href="{$login}">{#link_login#}</a></li>
 {/if}
</ul>

Ersetzen durch:

Code: PHP  [Auswählen]

<ul id="mega-menu-1" class="mega-menu">
  <li><a href="{$index}">{#link_index#}</a></li>
 <li><a href="#">Katalog</a>
    {$box_CATEGORIES}
  </li>
  <li><a href="{$cart}">{#link_cart#}</a></li>
 {if $account}
    <li><a href="{$account}">{#link_account#}</a></li>
 {/if}
  {if $smarty.session.customers_status.customers_status_id == '1'}
    <li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>
 {/if}
  <li><a href="{$checkout}">{#link_checkout#}</a></li>
 {if $smarty.session.customer_id}
    <li><a href="{$logoff}">{#link_logoff#}</a></li>
 {else}
    <li><a href="{$login}">{#link_login#}</a></li>
 {/if}
</ul>

Suche:

Code: PHP  [Auswählen]

<div id="leftcol">
          {$box_CATEGORIES}
          {$box_ADD_QUICKIE}
          {$box_CONTENT}
          {$box_INFORMATION}
          {$box_LAST_VIEWED}
          {$box_REVIEWS}
          {$box_SPECIALS}
          {$box_WHATSNEW}
       </div>

Ersetzen durch:

Code: PHP  [Auswählen]

<div id="leftcol">
          {$box_ADD_QUICKIE}
          {$box_CONTENT}
          {$box_INFORMATION}
          {$box_LAST_VIEWED}
          {$box_REVIEWS}
          {$box_SPECIALS}
          {$box_WHATSNEW}
       </div>

Datei: /templates/xtc5/boxes/box_categories.html

Suche:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}
<h2 class="categoryheader">{#heading_categories#}</h2>
<ul id="categorymenu">{$BOX_CONTENT}</ul>

Ersetzen durch:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}
<ul>{$BOX_CONTENT}</ul>

Jetzt noch die Dateien aus dem ZIP-Archiv per FTP auf euren Server laden.

Edit: Dateianhang korrigiert

[merten-1813]

Hallo da ich viel hier lese und teste seit kurzem und auch eine Möglichkeit gesucht habe so ein mega Menü zum laufen zu bringen weil ich sehr viele Kategorien habe bin ich jetzt auf eine Lösung gestoßen diese zu realisieren es ist alles über hover realisiert das heißt das gleich alle Kategorien zu sehen sind falls da Interesse besteht einfach melden ist zwar noch nicht css technisch fertig aber es funktioniert alles prima

im Anhang noch zwei Bilder als erstes wenn man oben auf der habt Kategorie geht sieht man maximal 5  unter unterkategorien bei jeder unterkategorie und wenn man auf den Abschnitt geht Öffnen sich die restlichen unter unterkategorien per hover.

vieleicht interessiert es ja jemanden dann könnt ihr euch gerne melden und ich werde es mal schriftlich wieder geben.

[ Für Gäste sind keine Dateianhänge sichtbar ] [ Für Gäste sind keine Dateianhänge sichtbar ]

[Spegeli]

@Speedy: Habs mir grad mal in deinem Shop angeschaut. Optisch nicht der brüller, funktionalität scheint vorhanden zu sein.
Vllt. kannst du ja mal ne Anleitung etc. dazu schreiben, dann würde ich es bei meinem Demo Shop mal ausprobieren und evtl. verbessern / erweitern.

[merten-1813]

Ja das es optisch nicht der brüller ist das ist mir bewusst bin nicht so der css Typ aber es kommt ja auf die funktion erstmal an klar werde ich das mal schriftlich machen vieleicht klappt das noch heute das ist halt so aus verschiedenen Modulen wie zum Beispiel die die geteilte Kategorien-Navigation gemacht und denn die top_categories.php geändert bei den Einstellungen Rest alles css.

[merten-1813]

So habe das ganze mal schnell schriftlich gemacht eigentlich keine große Sache dank diesem xt:Commerce - geteilte Kategorien-Navigation/

das muss eingebaut sein

dann sind des noch 3 Dateien die man bearbeiten muss

in der Root/templates/ Ihr Template /index.html

Code: PHP  [Auswählen]

{$top_CATEGORIES}

an gewünschter Stelle einfügen

in der Root/templates/ Ihr Template /source/boxes/top_categories.php

Suchen

Code: PHP  [Auswählen]

$TopConfig = array(
                        'MinLevel'              =>      1,
                        'MaxLevel'              =>      1,
                        'HideEmpty'             =>      false,
                        'ShowCounts'    =>      false,
                        'CatNaviID'             =>      'TopCats'
                );
 

und ersetzen mit

Code: PHP  [Auswählen]

$TopConfig = array(
                        'MinLevel'              =>      3,
                        'MaxLevel'              =>      3,
                        'HideEmpty'             =>      false,
                        'ShowCounts'    =>      false,
                        'CatNaviID'             =>      'TopCats'
                );
 

und in der Root/templates/ Ihr Template /stylesheet.css    
am ende ein fügen Ist zwar nicht schön aber man kann es erkennen vieleicht hat ja jemand noch Verbesserungen.

Code: CSS  [Auswählen]

.Box {
   
    height: 36px;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 6px;
    position: relative;
    width: 98%;
}

#TopCategories > ul {
    float: left;
    list-style: outside none none;
}


#TopCategories .CatLevel1 {
    float: left;
    margin: 1px;
    position: unset;
 
}


#TopCategories .CatLevel1 > a {
    background: none repeat scroll 0 0 #272727;
    border-left: 2px solid white;
    border-right: 2px solid white;
    border-top: 3px solid white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: block;
    font-size: 11pt;
    height: 18px;
    margin-right: 5px;
    padding: 7px 20px;
}


 


#TopCategories .CatLevel1 > ul {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    border: 2px solid white;
    display: none;
    height: auto;
    left: 0;
    position: absolute;
    top: 42px;
    z-index: 999999;
}

#TopCategories .CatLevel1:hover ul{
display:block;
}    

 

#TopCategories .CatLevel2 {
    height: 140px;
    margin: 15px;
    min-width: 240px;
    overflow: hidden;
    width: auto;
     display: inline-block;
 display: -moz-inline-grid;
 
 vertical-align: top;
}
#TopCategories .CatLevel2:hover{
min-height: 125px;
height:auto;
padding-bottom:15px;

}
#TopCategories .CatLevel2 {
    background: none repeat scroll 0 0 rgba(250, 250, 250, 0.5);
    display: -moz-inline-grid;
    height: 140px;
    margin: 15px;
    min-width: 240px;
    overflow: hidden;
    padding-left: 8px;
    vertical-align: top;
    width: auto;
}



#TopCategories .CatLevel2 > a {
    color: #fff;
    font-size: 130%;
    font-weight: bold;
    padding: 6px;
}
.CatLevel2:first-child {
    border-left: 0 solid;
}
.CatLevel2 {
    border-left: 1px solid #fff;
}

.CatLevel2:nth-child(6) {
    border-left: 0 solid;
}
.CatLevel2:nth-child(11) {
    border-left: 0 solid;
}
#TopCategories .CatLevel2 > ul {
    overflow: hidden;
    padding: 10px 10px 21px;
}



#TopCategories .CatLevel3 {
    float: none;
    list-style: outside none none;
    margin: 0;
    padding: 1%;
    text-align: left;
    width: 100%;
}

#TopCategories .CatLevel3 > a {
    border-bottom: 1px solid #808080;
}

ein kleiner Beitrag von mir